Web Design Tips for Graphic Designers / Print Designers

Published on 17 Feb 2012 at 6:46 pm.
Filed under Mobile,Search Engine Optimization,Web Design.

Web design can be a very difficult thing to learn for anyone that is coming from a print or graphic design background. The most difficult thing for them to get used to is that you absolutely cannot know what the end user is going to see.

There are many out there that strive for a pixel perfect design. They want a website to look exactly as they intended it Photoshop with no differences. Pixel perfect is impossible. There are far too many unknowns that you cannot control such as:

• Size of the browser window — everyone’s monitor is different, nor does everyone browses the web maximized.
• Users can bump up their font size (without zooming the page) to make things easier to read.
• Each Web browser has their own differences in rendering.
• Users may not have the font you want to use installed, and they may not be browsing the Web in a device that can download fonts or you may not have the right to distribute said font to the world.

If you are one of these designers then you need to stop and take a step back. The web is a fluid medium. It is not a snapshot. You are going to want to study HTML5 and CSS3. As you might have guessed, HTML5 and CSS3 are the next natural evolution of HTML and CSS. These are the tools that power the modern web. If you’re using tables for design because it is something you can visualize you are doing yourself a disservice. There are usability, accessibility, as well as SEO problems with using tables. While it definitely takes a while to learn you will ultimately end up with a powerful tool under your tool chest. Imagine the difference as the difference between Photoshop and MS Paint.

There are a few design principals you should learn.

1. Fixed Design
2. Graceful Degradation and Progressive Enhancement
   
3. Adaptive Design or Responsive Design

Web design method: Fixed Design

A fixed design is the simplest of web design methods to understand. As the name implies the design is fixed. Things such as the size of the user’s viewport (i.e. the browser window), internet connection speed, and browser functionality are ignored. If the window is too small they will get a horizontal scrollbar. This method will be the easiest to get used to because it is the closest thing to a static design you will get on the web. You’ll probably take a design that is between 900 and 1200px wide, center it, and call it a day. By today’s standards it’s not very impressive, but it is what most clients need. You can still come up with breathtaking designs using this method, but after a bit things will become repetitive.

Web design methods: Graceful Degradation and Progressive Enhancement

Graceful Degradation and Progressive Enhancement are the next web design methods that you should study. These methods take a look at the concept of web design from the exact opposite ends of the spectrum. Studying these methods will give you the basis behind learning the concepts to follow this section.

Graceful Degradation is the concept of making your design work in the most advanced browsers on the market and accepting that the page will degrade gracefully for older, less advanced browsers. The core content of the site must still be available, but it is accepted that things are not available to everyone. One example of this would be the CSS border-radius attribute. The border-radius attribute is a native browser feature for rounding some element of the page. The border-radius element was officially announced back in 2005, and has been supported for many years in Firefox since version 1.0, Google Chrome since version 0.2, and Safari since 3.0. Internet Explorer unfortunately did not support border-radius until 2011 with the release of IE9. The Graceful Degradation web design method would accept that IE8 and below do not receive rounded corners for elements in the design, but instead would be have right angles for every corner.

Progressive Enhancement reverses the thinking from Graceful Degradation. Progressive Enhancement starts with POSH (Plain Ole Semantic HTML), and loads CSS and JavaScript as external resources. This means that should neither of these resources load for whatever reason the content is still completely accessible. This strategy is referred to as the separation of content and presentation. With this you are starting from a position that is acceptable for all browsers, search engines, and the disabled and building a better experience. This core thinking behind Progressive Enhancement is significantly more popular than Graceful Degradation and is what led to our next point.

Web design method: Adaptive Design or Responsive Design

Example media query in CSS

Adaptive design/responsive design is the next step in web design. I will be perfectly frank, the web design community hasn’t really decided on what to call this design principal. It hasn’t even decided on whether or not these are two separate concepts. Originally this method was known simply as Adaptive Design until the publication of Ethan Marcotte’s exemplary A List Apart article titled “Responsive Web Design“.

Adaptive design is a fluid web design. Your grids, images, text and other content scales with the user’s capability. If a user resizes their browser than the design changes with it. This can be done by designing your site using percentages instead of fixed widths, media queries, or a combination of the two. Media queries are very useful when it comes to mobile design because it allows a designer to craft a fixed (or percentage based) design inside of variable conditions. You can craft different designs for tablets and phones at different screen resolutions, DPI, or orientation. They can be very fine grained, but also quite cumbersome in that there are so many variables to account for. For example, a CSS pixel does not translate into device-pixels. With a high DPI device zoomed to 2x would result in 1px in CSS becoming a 2×2 square of device-pixels.

At this point you should be able to see just how daunting a task it is to create a great design. I wish you the best of luck during the transition.

This post was originally published as Web Design Tips for Graphic Designers / Print Designers for The BrandBuilder Company.