How To Effectively Use Padding & Borders In A Framework

Many web designers love to use frameworks, such as the popular 960 Grid System. These tools make our lives easier by taking care of the layout mark up, allowing us to focus on other more important aspects. Sure frameworks have their perks, but there just some problems that cause us to pull our hair out.

If you’ve ever used a framework for your website layouts, you notice everything is laid out pixel perfect. This, of course, is supposed to be great. But this also cause issues when we try to style everything. Have you ever tried to add padding or a border and your entire design changes? This is because you are overstepping the boundaries set by the framework. Even if its a simple 1px border on the right, this will drastically change your layout. There’s an easy fix to this problem which actually originated from a problem in Internet Explorer (Who knew an actual use could come out of IE?!?). It even works on just about every browser out there!

This simple trick is called Box-Sizing: Border-Box. Box-Sizing simply states that the width of the box will remain the same, while Border-Box stated that padding and borders will be added to the inside. Finally, our prayers have been answered! Just apply Box-Sizing: Border-Box to the entire document using * as the CSS selector. Make sure to add -mox- and -webkit- to format for older versions of Firefox and Safari. (See picture for example)

Now, sit back and enjoy inside padding and border and properly working layouts!

Avoiding Client Monsters (Part II)

..A continuation…

Client Monsters: The divas of the business world. Everything must be their way, every pixel in place. Tending to these monsters can prove stressful and tiresome. Here are some more helpful hints to help you control your clients.

The design of a website, to a client, is the most crucial part of the project. This determines how their business will be presented to the outside world. Their website helps determine their future business transactions. You, the designer, have been chosen to ride the bull by the horns. Your part is crucial and critical, to design and build a gateway to the outside world. As usual, designing a website requires research and time. As you begin send design ideas, your emails and conversations allow you to control the client.

It’s all about communication. When sending a design idea, be able to back up your decisions. Clients don’t understand what elements are needed in a website. They just want it to look appealing and get the

point across. By explaining yourself you are able to put the client in your shoes and understand your reasoning.

Never use open ended/opinionated questions. This always leads to many changes and grief down the road. Once you give a client the ok to ask for any changes, they will go for it. If you come to a dead end and have to ask their their input, remember functionality needs to come before looks. If a website is slow, sluggish, and poorly layed out, people wont stay on the site very long.

Avoiding Client Monsters

Have you ever had that one client that wants everything his/her way no matter what? These disastrous clients aren’t a very rare bunch. Many of these business owners have very little respect for us designers. Being the good guys means we are easily trampled over. All we want to do is please the customer and make an awesome website. As the old saying goes, the customer is always right! (some of the time…)

 

To properly deal with clients, we have to know how to set our boundaries. This can easily be done through a contract at the beginning of your work. When you write up a contract, try to hit certain areas that will help you down the road. The most common agreement is the number of pages on the site and cost for extra. This is a heavy hitter. Clients always start their ideas small and try to expand quickly, sucking you into their plot. This creates more work for you, and a maybe a few less bucks in the bank. Make sure to state the amount of pages on the site and their name/purpose. This way the customer can’t combine pages in order to make room for new content. Also, state a solid price for any extra pages they desire to be added to their package. This way the client fully understands what you are offering and what they are receiving.

There are many more helpful hints and tricks to help get along with your clients. Make sure to follow us as we continue this series. Feel free to ask us questions, we will be more than happy to respond or address it in our next segment!

Style Tiles – The New Way To Wireframe

Everyone knows has their own way to set up a wireframe for their website. Some prefer the old fashion pen and paper as they sit with their client. Others enjoy building the website in Photoshop, getting every detail exact. Others use softwares to make our lives a little simpler, such as the new Adobe Proto for tablets. If you are like me, you don’t know if you should worry about sending a design layout or sending a perfect wireframe. With Style Tiles, the design gets portrayed while preventing all the unnecessary overworking.

Style Tiles is built for us, the web designers who worry about design enough to impact how we code. Style Tiles is also Open Source, so the community is constantly evolving it to fit our overall needs. Also, it is made for responsive web design (which we all know is a must these days). With Style Tiles, we are able to get ideas on how the website w

ill be pasted together. Think of them as paint swatches, a preview of the what is yet to come. You are able to set colors, fonts, form, shape, and more importantly harmony and unity in your design.

Feel free to check out their website to learn more and try it for yourself! Please tell us how you like them and what is your preferred method for wire-framing!

Awesome Desktop Wallpapers

If your like me, having an awesome background wallpaper is a must. Some of the stuff out there, lets face it, just isn’t worthy of your desktop. After scouring the internet for hours on end, I have compiled a small list of website that offer great high definition wallpapers. Please feel free to check them out and let us know how you feel about them!

Desktopography

Simple Desktops

Wallbase

InterfaceLift

Fluid Layout vs Media Queries

Web design never stops growing, always improving. As times come and go, designers have to keep up with the demand of the users. Nowadays, users are on every devise and screen possible. This varies from the usual 1920 x 1080 monitor to tablets, smartphones, and even big screen tvs. A well designed and developed web page will be formatted to work for as many users as possible. Many developers have struggled on how to create a website that will work for the masses. Some people believe in Fluid Layouts, others in Media Queries. Both have their pros and cons, and as to which one is best, I’ll let you decide.

Fluid Layout:

Fluid layouts are made using width percentages. By doing this, each area will accommodate the designated percent on the screen. The larger the screen, the larger the width, and visa-versa. This appeals to many users as they tend to format their website once and leave it at that. This method requires less code, but may end up with some unappealing results. As the screen narrows, many

times clear layouts are lost and things tend to get scrunched together. On the other extreme, with too large of a screen the website seems empty.

Media Queries:

Media queries are commonly used to change a website layout using max and min width. Using media queries allows designers to rewrite/tweak your current code to best fit the new screen. This allows layouts to be change, simplified, or expanded when need be. This method produces more exact results, but it still has it’s evil size. If the min-width is set to 800px, if you are near that area moving just a few pixels will cause the website to change. This creates an unnecessary change that can be distracting to a user. Media queries also uses more code, in essence requiring the website to be reformatted to fit the new screen.

Both Fluid Layouts and Media Queries have their advantages and disadvantages. Designers use what will appeal and help them the most. With Fluid Layouts promising adaptability and Media Queries offering precise changes, the choice is up to you.

Photoshop CS6, A Brief Synopsis

Photoshop CS6

The Photoshop CS6 Beta is out and we are all dying to get our hands on the latest and greatest from Adobe. They have drastically changed Photoshop, making it simpler and better to use. Adobe has also taken many of our suggestions, making it better for us designers. There are some major changes that you can see right as you open Photoshop.

For starters, the UI has changed from the original white to a much nicer dark grey. This is much more comfortable on the eyes, allowing you to focus on the image better. Another major change can be seen in Camera Raw. Here they have made it simpler to manage and change your photos. Added onto the list of many great filters is the new Blur Gallery. From here there are three new options to make your pictures stand out. Choose from the very popular Tilt-Shift Blur, the simple Iris Blur, and the detailed Field Blur. With so many options, there is a blur to fit all of your needs. The new crop tool is also a great addition. Now cropping your images, maintaing aspect ratio, and straightening horizons is just a click away.

Have you ever used a long document of text and had to constantly edit your headers to be the same? With Photoshop CS6′s new paragraph styles, the hard work is done for you. Now you are able to set up individual styles for any text you need. This makes styling text documents a breeze. Now let’s say you have over 100 layers and you have to find the specific one, with the new Layers Search you can do just that. Just type in the name and your layer appears, you can even sort by layer type!

A big change and addition to Photoshop is the new Content Aware Move tool. This tool allows you to select an object and move it anywhere you want. Photoshop then fills the previous spot and blends the new object into its surroundings. This is one tool that you will have to check out for yourself! Another big change is Photoshop’s 3D capabilities. With 3D objects, you now have more control than ever. The layout has been simplified and new tools have been added to ensure your rendering looks great. Lastly, Photoshop CS6 has now added video. You can import videos and arrange a slideshow, even add your own music and transitions! You are even able to add images and give them effects through-out the movie, thing of it like a simpler version of After Effects.

So many great features have been added to Photoshop CS6, and the list continues to grow. Everyone will enjoy every new tool they have put in, making life a little easier. Please feel free to check out more and download the beta at http://www.adobe.com.

A brief look at Coda: a feature rich code editor for Mac

Coda, the one-window development tool for web designers. If you are unhappy with your HTML editor and looking for powerful and inexpensive software, look no further.

Many refer to it as the Dreamweaver Killer, offering a much nicer interface for a fraction of the cost. Coda offers many different features that put it head to head with the top competitors. One of the best features is the ability to set up individual sites. These sites set up to your local hard drive as well as a server, so you can edit files and save them to either when desired. These sites save which files you had open and where you were, which is a very handy feature. The HTML editor has a small snippets feature that comes standard with doctypes. The CSS Editor is extremely easy to use, all it requires is a CSS selector and all the choices are given to you. It really is a simple and effective way to style your web pages. Coda also includes a build in web viewer to preview your new creations. One of my favorite features is the books panel. This holds reference books pulled/downloaded from online sources. This is a very handy feature when you are looking for a specific code. My favorite part of Coda by far is it’s price, a small price of $100. Coda is a great powerful editor that, for the price, is worth every penny (All 10,000 of them!)