Let’s call it Modern Web Design

I am proposing a new buzzword to replace all other web design buzzwords. Forget ‘Graceful Degradation’, lose ‘Progressive Enhancement’, drop ‘Semantic Web’ and let’s finally throw out the ‘Web X.0’ – I propose we just lump it all together and call it Modern Web Design. Simple and clean don’t you think? Kind of like the HTML5 doctype.

With so many moving parts these days in the web design world —like the slow browser implementations of  HTML5 and CSS3, the rapid growth of mobile browsing, the rise of Javascript libraries like jQuery and Script.actulo.us, the slow death of Flash, and the varying screen sizes and resolutions from mobile to television— its becoming harder to approach a new web project.

Some designers believe in the progressive enhancement method while others are evangelists for graceful degradation — or aggressive graceful degradation prescribed by Andy Clarke. — Both methods relate to how browsers render web sites. Instead of fighting over whether to design for the lowest common denominator or the most cutting edge technology, I move we adopt a different —but similar— approach where its acceptable for a web site to look, act, and feel different in any given browser or display. Its about time that our users, our clients, and ourselves accept the fluid nature of browsers and embrace the many different sizes, resolutions, and devices that our sites will be viewed upon.

The Equation

I’m not saying that we give up on carrying similar if not exact design elements from one display to the next. We obviously don’t want to lose branding power. But the main idea here is to take advantage of what each browser and display can do to enhance the design -OR- design to a displays strengths, not weakness’. It’s basically a mash up of coding methods plus accepting the fact that it is okay for your site to look different.

This sort of new reality is gonna be a hard one for many of us designers to take; especially those who hail from the print world where every presentation has set dimensions. I know its gonna be hard for me because I like my web sites to fit in a fixed box where nothing changes; I like to have my site look the exact same on every browser and every display. But this old rigid design methodology needs to change to accommodate new technologies and displays. I’m not proposing the death of fixed layouts, but I believe that we need to take a look at altering our layouts and design elements to better accommodate the strengths of modern displays and browsers.

I broke past my mathematical fears and defined a little visual equation to better illustrate my point:

Now, lets break down the equation. The following sections focus on each one of these variables and their particular relevance to us as mighty web designers.

(Progressive Enhancement X Graceful Degradation)

To me, both methods are truly the same thing, its just a matter of where you start. The Progressive Enhancement method is about designing around the content and adding features and enhancements based upon the capabilities of each individual browser. Graceful Degradation is the opposite, you design for the best functions and features and then degrade them based upon the lack of browser compatibility. The results of both tend to be similar, but the real difference is in the design process.

I believe the better design process is to take advantage of what both have to offer. We should always design for the best technology available, but as we design and build, we need to make the necessary changes to accommodate for the strengths of each browser and display. This means constantly thinking about and testing how elements will be rendered and weighing your options at each step of the process. Thinking about how each individual piece of the design puzzle will be viewed on someone’s iMac or HD television screen or their mobile tablet PC.

Some design elements are critical to the meaning of the site while others are just decoration, or icing on the cake. This might mean in some cases that we don’t display the icing at all depending on what browser of display the site is being viewed on, and that’s okay. The presentation on an Android phone should be different than the presentation on a 52″ Samsung HD plasma television because they are different. In making design decisions, instead of thinking about how to make the design fit across all platforms, think about how to present your design on each browser or display. This way you can take advantage of the inherit strengths and nuances of each medium.

+ Meaningful Markup

Also known as semantic markup, it is the method of conveying the meaning of you site through its markup. The classic example is using the <strong>  and <em> (emphasis) tags instead of the <b> and <i> tags to show emphasis. These tags attach meaning to their content, where the <b> and <i> tags are just there to alter the style of the content. Basically, just use the proper tags for the proper content, crack you “div-itis”.

Where progressive enhancement focuses on content, in modern web design we should focus on the meaning as well. Coding your markup to convey meaning allows browsers and displays to interpret that meaning regardless of style; this helps to move the meaning of your site to the user. Even if style sheets, images, and javascript are turned off your meaning will still remain. Plus, semantic markup is more accessible for screen readers and other assistive technologies.

+ User Centered Design

When you design a website with the user in mind —throughout the entire process— you will be less tempted to over design. Its great to use new technologies but don’t use them just to use them, use them when it makes sense, don’t let your users get lost in the technology battle. Remember that they probably don’t care about what HTML version you built the website in, it doesn’t matter to them.

Also, if you are thinking user centric then you are thinking about what browsers and displays your clients and users are viewing your site with. If you know that the majority of your users will be using IE7 then make sure that your site is enhanced for IE7. This doesn’t mean you should design for IE7 in general and forget about other browsers; this means that you need to make sure your message and meaning are presented best in IE7 and best in Firefox and best in… well you get it. Just keep in mind that this “best” will be different in all browsers and displays; if you can’t render pseudo CSS properties in IE7 then don’t, but only if it does not kill your sites meaning when rendered in IE7.

+ Designing in Browser

This doesn’t mean you shouldn’t use Photoshop. Designing in a browser allows you to be more flexible as you design and code. It’s a more fluid way of designing and allows you to make decisions, alterations, and tests as you go. Instead of designing one design, and forcing all browsers and displays to conform, designing in a browser will allow your design to live in the browser or display.

Tear down the PSD walls and let your designs breathe:

• The days of slice and dice are over. Use Photoshop designs as blueprints, not the content.
• Designing in the browser allows you to quickly make decisions and adjust on the fly.
• Design dynamically. With out the pixel restrictions of a PSD file you can create a more dynamic experience.
• Always show you clients a coded prototype. Let them view the living site, not some dead Photoshop comp.

Slicing a Photoshop file into pieces and putting those pieces back together in HTML is a rigid technique. This is when you get into those long days of pixel pushing and troubleshooting because your design does not look the same as your PSD file did when you viewed it on your eleven inch Macbook Air. Think of the Photoshop file as a guide or blueprint to follow as you code your site.

By not slicing up a PSD, you are also reducing the amount of images you will use and you’ll find out that a lot of images and effects created in Photoshop can be created just the same in CSS or JS. If you are not held at gun point to your sliced up PSD file, you’ll be able to look at the design and figure out which parts you can replicate in CSS or JS (or whatever your language choice is). This way you can reduce the size of your site and also test these elements right in the browser and view them to see what features and design elements work best per display.

When you use a PSD file as a comp to show to the client you are setting yourself up for failure. Some effects that you have in your PSD may not render correctly in the browser or display your client is using once the site is completed. And you’ll get that inevitable “The site looks like crap, I’m not paying you for this!” email after viewing the site for the first time. This is why you never show your client the PSD files, unless brutally prefaced by “This is only a blueprint, actual product may look different on your iPad.”. Always show your clients a functioning live prototype. That way you won’t have to go back and debug browser problems when you just want to be done with the project.

The Result

Modern Web Design. I know your probably thinking that this kind of design process is a lot of work and that you do not have time to design a site to be rendered most effectively across all browsers and displays. In some cases, a project may require writing multiple style sheets per display or browser that enhances the presentation drastically in order to render your site effectively, but in other cases it may be just a matter of letting the site devolve naturally. The key to this thinking is to always design around the content and meaning of your site and make sure that it is presented to the best of each browser and displays abilities.

Design isn’t just making something look cool.

Related Articles

• Understanding Progressive Enhancement — A List Apart
• 51: Graceful Degradation vs Progressive Enhancement — Dev.Opera
• Mobile First — Luke W
• What Does Browser Testing Mean Today — Andy Clarke