How To Build a Modern Website in 2011

Over the past 12 months Ive been on a self-imposed quest for knowledge. Were at a changing - almost revolutionary - point with the web as I (start) writing this on November 1st, 2011. Heres why:

Uncertainty
We as web designers have been trying to impose constraints on the inherently fluid and uncertain web for many years now. Im talking fixed widths, Flash and pixels. And weve been able to get away with it until now. Our turning point is the (not exactly recent) proliferation of diverse browsing devices finding their way onto the web. A few years back when we finally stopped our quarrelling and settled on an optimal (read: safe) screen dimension of 1280 x 940, we went to work on our 960.gs layouts and never looked back. Many designing for the web came from a traditional print background, but many also wandered in without any formal training or design education. Who can blame the amateur web designer wanting to establish some sort of stability in an otherwise grey-hair including profession made up of this inherit uncertainly, supporting legacy browsers and the like. Now were finally shifting the rotting corpse of IE6 from around our necks, thanks, in part, to our very best adversarial leaders (Ethan Marcotte, Andy Clarke, Paul Irish) who are on a quest to make a better future web (and their own lives easier, Im sure) doggedly pushing the web industry forward, rather than remaining stationary, for the first time in many years. I feel there needs to be more of this fascism (in a positive manner) in the way we build on the web today - in the same manner the Web Standards movement went about its effective and essential business when it hit the mainstream in 2003.

2011
Now our users are viewing our work on a myriad of different devices, screen sizes and operating systems. At a rate that is growing so fast that covering your eyes as you view Google Analytics is no longer an option. Live with it, and learn to love it cos the benefits are going to make the web a much better place. Why? Because we have to start designing with razor-sharp focus, basing our decisions off rich empirical data rather than personal preference or unsupported opinion. Furthermore, no longer should designers just create buckets for which content gets chucked into (paraphrase a la Mark Boulton). Chris Coyier recently threw his hat into the ring of the increasing uncertainty web designers are experiencing, and its straightforward, no-nonsense attitude is delightfully sobering. So, with that said, Im going to throw my hat in the ring, roll up my sleeves and say how I think it should be done. Please note: I am not saying anything startlingly new, but because its hard not to get dizzy amidst the constant back-and-forth and endless RSS feeds, Im hoping its helpful to gather the fundamentals into one place - it certainly is for me anyway!

Mobile First, Responsive Design

Our current bastion of strength for all that is right and sexy on the front-end is the mobile-first, responsive technique. Not simply a development methodology, but an all-around design strategy as (when done right) it basically encapsulates every heading that follows in this section.

Mobile-First
Day one, ground zero, the first step. The mobile-first approach to design is really quite simple. Over two years ago (eek!) the (often visionary, and quite wonderful) Luke Wroblewski wrote this article proposing that we design for the mobile web experience of our sites (and applications) before the full desktop version. This technique forces you to focus on prioritizing the content that is actually required over that which is nice to have, furthermore with this methodology were now treating the most rapidly growing and soon to be most-important as our ground zero - makes total sense, huh? Also, if youve ever worked on such a project doing things the traditional, opposite way - moving from desktop down to mobile - youll realize how

much easier and focussed mobile first makes the design process. From a front-end development perspective, the mobile first approach also requires the default CSS rules go into the main style.css sheet and that we progressively enhance layout and further rules for larger screens using min-width: Media Queries. This means devices that dont support the CSS3 Media Queries attribute will be served the mobile version (but more on that later). Earlier this year Luke Wroblewski also authored a book entitled Mobile First, and within its 123 pages contain the principles of designing for mobile first, ahead of the desktop.

Content First
The days of Lorem ipsum are over. Dont use it. Ever. Yes, Im aware that the likelihood of a client having full web copy ready at the beginning of a project is often as likely as Pamela Anderson ever exercising some self-dignity, but we as designers have to become more rigid with the client. We become facilitators of the problem when we start the design process without it. If a client doesnt have copy ready, tell them to come back when they do. Or, if you know a little bit about copy and content strategy like we do at Modular, then assist them and drive the completion of the sites content before the design process begins. Either way, if you explain to them that itll ensure the final product is more focussed and youll be building a bespoke structure to beautifully house their content rather than a cheap plastic bucket that well aggressively spade it into, diluting their message in the process, just so everything can fit inside - well, theyd be silly to turn you down really, wouldnt they! The funny thing about the content-out method is that this is what print designers have always done. You wouldnt have a client call them up and say: I need you to design the layout and info-graphics for a book (or magazine article) for me, but I dont have any of the words yet. It would be simply laughable. Ass-backwards, if you like.

Design Simplification
Looked at some of the most popular websites on the internet lately - like GMail or Mailchimp? Looking pretty neutral, dare I say bare, arent they! Well no, actually. Finally, united workers of the web have started to educate themselves and realize that pursuit of the printed page shouldnt be an end-goal. Weve started designing for the web as its own thing, its own medium. The days of Flash-driven stupidity are thankfully gone and as an industry were now paying attention to the basic principles of graphic design: making use of that under-used color #fff, using proper typographic rules, maximizing white space within a layout and clever - read: subtle - use of colour and colour palettes. There are other vital reasons for simplifying design on the web. Vast arrays of assets (such as images and textures) coupled with rich colours dont translate to the small screen well - and its often limited data connections. Furthermore, from a fundamental standpoint design should be thought of as purely a way to give form to function. I think the average folks designing for the web are starting to understand that design should never be the focus - that should (arguably) be left to art. I passionately believe that the purpose of a modern web design is purely to provide a neutral canvas to elegantly display content, allowing users to interact with it in natural, innate ways, and that it should be optimized for whatever device the user chooses to access it on. This should be our sole design goal. Were trying to please our user, simply give them what they need, and if we do that really well, it feels like a gift. Our designs must be skillful, be vulnerable, be thoughtful and most of all: be human. We should be in the business of gift-giving and exceeding users expectations. However - as with most wide-ranging simple ideals - achieving this isnt simple, many will try but few will succeed. Think of it as web 4.0.

Typography
Typography is at the centre of absolutely everything we do. Good choice and pairing of type and typesetting create a visual scale and organic relationship between design and content. Typography that is harmonious will do invisible wonders to your design - unfortunately though, its the type (no pun intended) of element that if paired and set badly will completely ruin a design, but if mastered will go unnoticed because harmony has been achieved and it just feels right. Therefore, it is vital that time and care is spent on this department. I talked about designing from the content-out earlier, the next step is design from the type out using modular scales. And then, using this choice of type, define layout and form.

Learn and understand at least the basic rules of Typographic design. Then swing on over to Typekit and get yourself some nice, multi-platform-supported web fonts. Spend time - Im talking days - examining and trying out various font pairings. Select workhorse typefaces. Read the foundries description of what the font was designed for. And if ever in doubt - and in need of an elegant quick-fix - use a sans-serif for headings and a large-sized serif for the body. Compose to a vertical rhythm - baseline grids are in and its rems (avoid the cascade and constant resetting, but be sure to provide a pixel fallback) as our vertical measurement and percentages as our horizontal. Were not seeking complete alignment but were seeking that harmony that Tim Brown talks about in his article More Meaningful Typography. This is also a really useful tool to add to your typographical-arsenal.

Inspiration
Its already been widely ascertained (and expertly articulated) that gaining inspiration directly from the source you are seeking to design for just leads to stale repetition. We should look for inspiration in places other than the web. Go outside, read books, look for inspiration in the real world. My favourite places to feel creative are in airports, museums, libraries and coffee houses. If you get all your inspiration from CSS galleries, all youre going to do is echo what somebody has already done. This year I have also subscribed to the printed form of three different magazines, not for their content, but for the form they give to that content (the design). Furthermore, I have appreciated after months of viewing tablet-based PDF and ePub books, the value of physical books in helping inspire in a way a screen-based alternative never can or will. This lead me to purchase a subscription to The Manual, and I also hotly anticipate the (physical) release of Frank Chimeros The Shape of Design. Oh, also, read this.

Getting Technical
Frameworks
The ultimate starting point in 2011 for a modern web project is HTML5 Boilerplate. Although I personally prefer Andy Clarkes 320 & Up additions that make the Boilerplate framework that bit more small-screen friendly when approaching a design mobile first, and have rolled my own - which we use at Modular - that mixes the two, and adds a number of other best practices picked up along the way.

Responsive Design - fluid grids, flexible images, and media queries.

There has been so much written on responsive design this year that Im not going to touch on it - but, you can head over to the Modular site to read more about the business and user benefits of this. Just read Ethan Marcottes book Responsive Web Design and then head over to the MediaQueri.es site to see some nice responsive work at play. However, the first big name responsive project - The Boston Globe - went live towards the latter end of the year. Read more about it here and here. It currently acts as the poster-child for HTML5 and responsive design. It is also worth noting that this is a New York Times-owned publication and it could be safe to assume that they are testing out this technique with a view to go responsive on their other online projects. Other big-name responsive projects are also currently in the works over at Mark Boulton Design, Stuff & Nonsense and Clearleft - and are set to launch in 2012.

Browser Support
Home PC use has dropped by 20% since 2008 and continues to nosedive. Furthermore, in Q4 of 2010 smartphone shipments surpassed PC shipments - 2 years ahead of industry-analyst Morgan Stanleys predictions! The picture I am - probably too subtly - painting is that the days of the home PC are dying a quick, painless death. Mobile is the only variety of Internet usage showing any growth at all, and you can

guarantee that people will perform the action they need to on the nearest screen to them. Furthermore, mobile phones will overtake desktops as the most common web access devices worldwide by 2013 - maybe even sooner! With this influx of new devices, small screens and new user environments and patterns brings a whole new (adopts Walter Sobchak voice) world of pain. So how can we design and develop leading edge websites that meet the needs of the biggest growth pool of user now, while trying to fully-support ancient (and I mean ancient in web years) browsers such as IE 5 - 8 at the same time? Its utterly impossible. But completely ditching support for legacy versions of Internet Explorer, exhibiting care-free we dont support IE6 cos we design for the bleeding-edge attitude will also do nothing but lose you clients and frustrate users who have no option (for whatever reason) to upgrade their browser. Thus man-up, take it on the chin stop complaining. You didnt think building good websites well was gonna be easy, did you? But this is where the mobile first approach helps you out In 2011 - after having designed and built your site mobile-first, building for the best browsers first - either dish IE the standard base typography and colour mobile-layout with the odd IE-specific class (using Modernizr as your browser-sniffer) to fix things like line-lengths to aid readability, and be done. Alternatively, use a javascript polyfill (such as Respond.js) to enable unsupported CSS3 Media Queries. However, the chance of it going a little funky is possible, plus youll experience a slight performance hit (noticeable particularly on mobiles such as the early Windows Phones - which support neither CSS3 Media Queries nor other CSS3 goodness - and other devices). Alternatively, as Andy Clarke recently wrote, serve IE with a fixed-width (yet adaptive) stylesheets for each breakpoint. I really like this approach and it seems like the most sensible, and realistic game plan, and is the way I am currently working. Update - 15th December, 2011: Jeffrey Zeldman just posted news today of Microsoft soon auto-updating users of older versions of IE. Magic! However, we cant always rely on all users having auto-update switched on, for various reasons.

In conclusion
I could go on, getting into more of the development issues that present themselves when using this workflow. But, as I said up top: I want to limit this post to what I believe are some of the current best practices around, things we should be seeking to concentrate on and be attempting to master as a wider industry. When its coming from the right people (like Andy Clarke and Jeremy Keith, Luke Wroblewski and Ethan Marcotte, et al) I feel we should often encourage fascist web design. In the same way the Web Standards movement pushed things forward by establishing a number of S.M.A.R.T. criteria by which to design, the One Web movement must seek to do the same.