This one is key:

The vision for what we do has stayed the same since I founded iA back in 2005: Reduce to the essence.

Syncing up with the Dieter Rams school of thought Reichenstein compartmentalizes the ‘invisibility’ of good design further and discusses the importance of simplifying experiences and creating responses to, rather than solving, design challenges:

Good design is invisible. Good screen design happens in the subatomic level of microtypography (the exact definition of a typeface), the invisible grid of macrotypography (how the typeface is used), and the invisible world of interaction design and information architecture. Minimum input, maximum output, with minimal conscious thought is what screen designers focus on. And just as type designers and engineers we do not try to find the perfect solution but the best compromise.

On design thinking:

As a web designer you need to consider what people do with their hands and heads. You need to design your products in a way that requires minimal input, and delivers maximal output.

Good user interface design takes care of irritations before they appear.

On ‘design by committee’:

Nothing is more destructive to good design than group thinking and collective decision making. Why? As I said, to most people good design is invisible. Group decisions focus on the visible, bad aspects of design.

And, on the importance of good typography:

With good typography you can score on a level that is subconscious to most users. Hardly anyone can discern good from bad typography, but everybody can feel it.

A great and informative read from start to finish. Read it in full now.

Project background

The project started out as a referral. Conference organizer Hillary Chute (professor at the University’s Gray Center for the Arts, who are the hosts of the event) emailed us with the requirement. Her main reason for contracting an external design studio for the project rather than going with the default University template already available to her was her want to reflect the distinct and aesthetic nature of comics and graphic novels, requiring a custom design with vibrant branding for the conference (I’d like to add that the visual design of the University’s wider academic site is very elegant and employs Proxima Nova nicely).

Kick-off meeting

This, the first real step of the process, is always vital in unearthing the true hopes and aspirations the client has about a project. While Hillary & I had already had a quick phone conversation to allow me to devise the project proposal, now was the time to get into the real detail. I always record my client kick-off meetings so I can firstly: listen back to them and take more detailed notes than I’m able to while we’re talking, and second: concentrate on listening to what the client is saying to allow us to hold an actual conversation and allow me to delve further into a specific question or point if needed. This latter part is vital, as at this stage you are doing your due diligence, unearthing potential bumps in the road before you reach them. Otherwise you may as well just send them an email full of questions (which you should have already done on the screener prior to the proposal. For more on that read Mike Monterio’s Design is a Job – it’s fantastic).

During this meeting I discovered the key objectives of the site were:

• Clean, simple and inviting (although, without fail every client asks for this!),
• Not too academic, but still serious,
• Cartoonists themselves taking center stage,
• Convey professionalism,
• Vibrant,
• Fitting with the graphic novel/comics medium.

I also discovered the wider background of what the event was, what its aims were, why it was happening, how it was different from other events, who it was aimed at, what we wanted the user to get from the site, and what we ultimately wanted them to do when visiting. I also discovered all the content that would go on the site, when registration goes live, how it will be marketed, how visitors will primarily be finding the site, etc. The client was also very keen for the site to take on a new life beyond the event as an archive; showing that the Gray Center had put on a successful, public, well attended event, the first of its kind, featuring the world’s most respected cartoonists.

The key detail in terms of the project’s visual design – which I already knew when constructing the project proposal – was cartoonist Chris Ware would be drawing and producing the main conference promotional poster. If you’ve ever seen his work it is simply amazing, and the opportunity to work with someone of his status not something that comes up everyday. So, I knew I wanted to tie some assets (icons, doodles, etc), the colour palette, and elements of the poster’s overall form into the website itself. While I wouldn’t let it dictate the visual design of the site completely, I would borrow just enough to ensure cross-branding tie-in between the events physical and online presence. However, completion of the poster was projected to be at least a couple of weeks away – and that was half the project timeline. So if it didn’t arrive in time, it would – without doubt – affect project schedule! One thing I’ve learnt by this stage of my career is that if it’s not possible to have an important project asset at the beginning of the process, then it should be marked as a potential road bump with all the potential to throw a spanner in the works. We shouldn’t be pessimistic, just mindful of looking ahead, and designing and thinking ‘defensively’.

Our meeting ended with my requesting every single piece of content the client wanted housed on the site. I explained the reason I needed this all up-front was to ensure the clarity of the final product. Layout and form had to be inextricably linked to content; we’re building a bespoke structure to beautifully house content rather than a cheap plastic bucket (template) that we’ll aggressively spade it into, after all! Until I had this I couldn’t truly begin the design process.

Defining the objectives and zoning the content

After referring to my notes and listening back to the kick-off meeting a number of times, I wrote out the clients key objectives on Post-It notes and stuck them onto a whiteboard. This was so I could visually shift them around, rank their importance, and plant them as key seeds in my mind. I did this while making sure to keep any visual design preconceptions totally out of the picture. I also started to add key elements of information that just had to be on the site (such as event title, date, location, entry requirements, calls to action, headings of must-know content that would be populated later, etc).

I considered the lifespan of the site. What would the future, present and past attendee seek from the site? How would I appeal to the key audience we’re seeking to attract, what did we want them to do, and how did we want them to feel when they visited the site?

When the content arrived I took stock of it and actually read it all through. I then made one long Pages document categorizing the content into logical sections. Even though I’d started to ‘zone’ the content early on while preparing the project proposal, now was the time to actually work on making this more concrete. In terms of navigation – and in-fitting with the mobile first approach – I knew I wanted the least amount of ‘main’ pages I could possibly get away with. Meaning, only the vital must-know content would be granted entry onto the page. This lead me to a top-level navigational/page structure of: Home, Participants, Schedule, Location and Register. Nothing else was truly needed. At the same time I researched the genre of comics and graphic novels, and the work of some of the key conference participants extensively, also referring to the content and architecture featured on other admirable conference websites in the process.

I must admit I wasn’t into comics as a kid, and although I had seen and was an appreciator of the work of many of the conference participants (particularly Chris Ware and Daniel Clowes), I greatly enjoyed spending a few afternoons down at the local bookstore delving into these great works in full. At this point in the project I thought the conference poster would be arriving any day, so I concentrated my research on typography and layout as I was planning to use the colour palette Chris employed on his poster, as well as take small assets from this work.

Choosing the typography and defining the grid

In terms of content, the participants biographies were by far the longest and most dense. I decided to start here and use this content to choose typography and define my grid. I’d agreed with the client during the kick-off meeting that rather than use standard portrait profile photos of each cartoonist (many of which prefer not to be photographed in person anyway) we’d use self-portraits as a unique and visual point of interest. This also meant the foundational visual design would have to accommodate these 17 different visual styles with finesse. The participant images I was sent all varied in size, quality, aspect, and resolution. However, I needed to define a common dimension that would work in harmony with the length of content for each biog piece (which averaged around 250 words), and could be reused site-wide. After playing around with some layout ideas in Photoshop I decided upon a square ratio of 166 pixels for each image and used it to define one column of what became a 6-column grid with 29 pixel gutters (for a total content width at desktop of 1141px). I then used a ratio of one column for the image to two for main body copy. This ensured a comfortable reading measure but also left me with a little too much whitespace. During my layout experimentations I’d already figured out I didn’t want to use the full desktop 1141px page width on the Participants page so as to keep it light and airy, but after referring back to my notes considering what a visitor to the site would need from the content, I decided that the ability to both easily access the works of each participant, and discover (without leaving that page) what date and time they would be appearing was sorely missing from each entry. So, I requested more content from the client; selling the user experience benefit and delivery of more useful content to attendees as the reason performing a little more work would be worthwhile in the long-run. As I had decided early on to build a responsive, multi-device friendly site to allow attendees to access participant and schedule information during the event, this strategic way of directing content was vital to the usefulness of the final product. With that in place, I then used one further grid column to house this supporting ‘Further Reading’ and ‘Appearing on’ info. The custom 6-column grid I had created also meant that I could arrange all 17 participant images neatly into a modular grid on the homepage – 6 images per row – with one left over for the ‘Read about all participants’ link.

This stage of the design process hinged on using the real site content, and the actual number of conference participants directly informed the creation of the site’s grid. Now the initial framework was built, and the Homepage and Participants page (my main/largest pages of content) layout was complete. This was achieved purely through the experimentation of ratios and their interlinking relationships using the real site content, before taking these discoveries and sprinkling a little gut instinct; determining what ‘felt right’ to identify the fixed item of content with which to build the custom grid outwards from.

Meanwhile…

At the same time I jumped into Typecast – my first foray into using this new font-pairing application on a project – to start the process of picking typography. I spent a long, probably ridiculous amount of time experimenting with type combinations (mainly due to the immense variety of downright gorgeous typefaces available on Typekit). Primarily I was looking for something that had an air of hand-drawn style to it, like the actually hand written text Chris Ware uses in his work. It also had to be thin and delicate to ensure those participant images provided the most ‘colour’ and ‘weight’ on the page, and it had to be distinct but unassuming. To offset this I also wanted a rounded (but not childish), strong typeface for headings. After going back and forth between Typecast and Photoshop with screenshots, contrasting blocks of text against images, I finally settled upon Ratio light for main body content due to its distinctive but still simple and sophisticated personality, and Domus Titling, which is rounded and all capitals, for headings. However, when set very small for supplemental content Ratio appeared a little too decorative, clashing with the focal larger-set body copy. So, in certain places I employed the still very similar but a dash simpler, workhorse Freight Sans Pro from light through to medium weight.

To be continued…
Follow me on Twitter, or subscribe to the site RSS feed for Part 2 which covers my process for building the ‘working wireframe’ in the browser for the first stage of client sign-off, completing the design through switching back and forth between browser and Photoshop, and how I dealt with some unexpected project disruptions along the way. I will also later cover CMS integration and preparing the site for launch.

Ever since listening to Paravel’s run down of Brooklyn Beta in November, and reading, various, write-ups in the weeks following the event, I’ve been meaning to write this post. However, it was point #1 of Mike Monteiro’s recent ‘10 New Years Resolutions for Designers’ list on Net Magazine’s site that actually catapulted me onto the keyboard to do so.

Brooklyn Beta – a collaboration between the fine folks at Analog and Fictive Kin – bills itself as: a small, friendly web conference aimed at the “work hard and be nice to people” crowd. In 2011 their aim was to, apparently: “highlight problems that matter. Problems like education, charity, and finance.” What is particularly refreshing about this is that unlike most web conferences which aim purely to inform and instruct on the latest trends, topics and theories, Brooklyn Beta acts purely to encourage and inspire the web industry within a social context and setting. And – from what I’ve read – 2011 seemed to send the message that, as a web community, our roles and the work we choose to do have never been more vital on this planet than at this current time. As Dave Rupert so succinctly said – relaying his experience of one particular speaker Patrick McKenzie – on his ATX Web Show:

“stop making stuff for 20-year old white dudes… we spend an exorbitant, almost criminal, amount of time solving really dumb problems. We spend a lot of time just thinking about this stuff and putting a lot of effort, and actual dollars, and actual man hours into meaninglessness… let’s do something that solves an actual problem. I don’t need to sit around and need to ‘Like’ more stuff. The inability to ‘Like’ my mousepad is really ruining my day. That’s not what we should be putting our effort into solving.”

Then, earlier this week Mike wrote in his article:

“the world has never been so blessedly full of problems. Our infrastructure is rotting, the economy is crap, Wall Street is awash with criminals and millions of people can’t get basic medical care, food and water. We don’t need another app to rate your sandwich… We have more processing power, affordable tools, and combined intelligence right this very minute than at any point in the history of design. We are using it to build shit. It’s time to aim higher. Let’s find problems to solve that actually improve people’s lives. Whether it’s figuring out a better way to access medical records, figuring out how 14 year olds can stop carrying forty pounds of textbooks back and forth to school every day, or a reservation system for the communal rooftop farm in your building, there has got to be something more beneficial to society than the next Facebook clone.”

I don’t know for sure if Mike attended Brooklyn Beta, but it’s fair to say the message reached him. The same is also reflected, in a certain sense, by Cennydd Bowles in his recent article ‘The Things of The Future’ which appears in Issue #2 of The Manual. Not only do people believe in this, but they feel impassioned. Impassioned to write, to document and to encourage social responsibility amongst the web community.

I think as a web industry we can do this. In fact, I think it is vital. The daily rate at which useless, downright stupid, applications and websites are appearing is scary. I’m all for a bit of fun, but the sheer time it takes to build an app or a website well, worries me that we’re even considering spending hours of our time on such things. Most of it is only serving our peers, and/or in an attempt to impress them, and/or made purely to get noticed by Jeffrey Zeldman, et al. However, I also know (well, I hope) that your average designer is typically in it for the love of creating things and providing well thought-out responses to problems. Furthermore, the majority (I believe) are nice, culturally aware, humble people. I just think many don’t realize that their craft could actually be so well used, appreciated and even vitally-needed by those in other industries. Never have the services of those who understand and build for the Internet – one of the single most important parts of our modern, functioning society – been in more demand. In a sense, we have been clever and chosen well in our decision to be involved with, and to work on, the web. This combination of our abilities and the importance of the Internet today mean we have gained great responsibility, therefore. A responsibility not to squander our talents.

Our reasons for having a social responsibility are different for every person. The reason I have a personal stake in this are myriad, but beyond the scope of this post. However – for example – my wife is a community college teacher who teaches disadvantaged, non-native speaking students every single day. Just through the experiences she relays I can’t help but feel fortunate and thankful of my situation, but that my time on earth should be spent making the most of this fortunate position. However, we’ve all seen hardship, we all know how tough others have it. We all know people with disabilities, people with cancer, people who need the help of others. I’m not trying to preach. As an example of relating this to something more local and concrete: having lived right on 24th Street in the Mission district of San Francisco in the past; seeing the amount of people, daily, with no chance of gaining access to healthcare is astonishing. Especially coming from England as I do, where access to healthcare is universal and free. There are local grassroots organizations in every town of every state that attempt to provide what the US government should have done all along. This is just one example of the places we should be focussing our attentions on. Many non-profit organisations are existing on dated, inaccessible websites and with administration and records systems that fail to serve them or their patients. Some may be lucky enough to have IT support staff but it’s likely they aren’t up to speed or the best in their fields.

However, for the independent web designer or developer it’s not always as simple as just changing tact. Becoming tuned into, and fully understanding a whole new industry and its problems, and then spending time working to come up with responses is a big investment. But, isn’t making it our business to become aware of them just the traits and actions of a good citizen contributing what they are best at?

You contribute what you are good at.

I feel quite strongly – much in the way the legal profession already does – that web agencies should regularly be doing pro bono work as the Internet becomes more vital to our population. I’m kinda sick of seeing all the Nike, Microsoft and Google logos on mid-to-larger sized agencies project pages. I’m not complaining of them working with such corporations – I’d love to have the opportunity too – but with it brings a social responsibility. Why not go use some of that cash to help someone out, or better still, charge the client 10% more and use that chunk to bury into pro bono work? That way both the client and the agency come up smelling of roses, but most importantly someone who needed help and assistance got it.

We, the members of this web community, were (for the most part) lucky enough to grow up in a privileged situation: with food in our stomachs, with parents who loved and cared for us, and with access to quality educations. So, in 2012 let’s be mindful of how we spend our working lives and how we influence the direction of those we work with. At the very least let’s spend our spare time working towards making a difference, a better world; not putting fake moustache’s on Twitter avatars.

Industry bible A List Apart recently posted an end of year article summarising its contributors and readers analysis of 2011 on the web. Many write of responsive design, mobile first, content first, etc… as you’d expect. But the entry which rings true with me the most is that of web designer superhero and Dribbble co-founder Dan Cederholm.

He says:

In 2011 I learned to let go of ideals.

It’s an incredibly exciting time to be creating things on the web. This year’s advances in browsers, standards, and smart thinking have enabled us to finally begin to web design. We’re no longer forced to think of the web as a digital reproduction of physical pages, but rather to finally embrace it as its own thing.

These recent advances can seem overwhelming to keep up with: HTML5! CSS3! Responsive Web Design! Mobile! Web Fonts! Grids! It’s become impossible to keep up with everything. And that’s why I’ve learned to let go and focus on incrementally folding these new ways of thinking into daily work as I grasp them—while at the same time trying not to worry about everything being perfect or solving a problem “correctly.”

The web is an ever-changing beast, full of flaws and imperfection and experimentation. And that’s why we love it.

–Dan Cederholm, Founder, SimpleBits

This summary couldn’t be more precise, and spot on. The sheer speed the web has progressed over the past 12 months, and the mountains of books, blog posts and articles that have resulted, is overwhelming. It’s a (sanity-saving) relief to read that even someone as accomplished as Dan experiences this too.

Staying abreast of modern developments in this field and having the opportunity to experiment and learn is crucial (even if they can’t be used in client projects today). As Trent Walton recently said: “If I’m going to be of any value to clients tomorrow, I’ve got to always be looking beyond what is conventional today.” But it is overwhelming! However, I believe this is part of the oath of allegiance to being a craftsman of the web that you must take when you decide you want to really be a web designer. What 2011 has really confirmed, more than ever before, is that this isn’t a profession for amateurs anymore. Building quality, modern, responsive websites that meet the needs of the modern user, her device, her constraints and environment is really hard! We could (mistakenly) decide to seek perfection before launch therefore, but 2011 has also been the year of agile, iterative design workflows taking off on the web. With technology changing so rapidly it is the only way to build a modern website or application (right from personal-site redesigns by accomplished designers such as Elliot Jay Stocks and Andy Clarke, to large-scale web apps). Real designers ship (per Naz Hamid further down the page). What this means is you need to be damn good at your craft. The investment you put into staying on top of advances in the field – and crucially: putting them into practice whenever possible – is what makes you that good. It’s a daily investment, and as Dan so rightly said “it’s overwhelming”. However, this field has always been about independent learning and I like the fact that through dedication – the more you soak-up, the more you practice – the better you’ll get. It’s a profession that awards attentive learning. As Jeffrey Zeldman says:

You get the power by using it. Nobody confers it on you.

A New Era

Mobile has meant new design considerations as we understand that our user is effectively “one eyeball and one-thumb” (even if they aren’t it’s still not a bad premise to design off) and, as we finally embrace the web as its own thing, rather than a fixed-width pixel-ized version of a printed page, we’re playing to our strengths for the first time. It’s a great thing, but suddenly it has become one hell of a lot harder to do well.

As our messiah Mr. Zeldman also recently wrote:

This is a frustrating time to be a web designer, but it’s also the most exciting time in ten years. We are on the edge of something very new. Some of us will get there via all new thinking, and others through a combination of new and classic approaches.

In 2011 I personally learnt not to let go of ideals, but to not allow them to overwhelm me, or stop me - whenever possible - from shipping. That is something I plan to rigorously abide by through 2012 too as we, the One Web community, work to further define best practices in this changing landscape.

Over the past 12 months I’ve been on a self-imposed quest for knowledge. We’re at a changing – almost revolutionary – point with the web as I (start) writing this on November 1st, 2011. Here’s why:

Uncertainty

We as web designers have been trying to impose constraints on the inherently fluid and uncertain web for many years now. I’m talking fixed widths, Flash and pixels. And we’ve 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 we’re 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, I’m 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 straight-forward, no-nonsense attitude is delightfully sobering.

So, with that said, I’m 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 it’s hard not to get dizzy amidst the constant back-and-forth and endless RSS feeds, I’m hoping it’s 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 we’re now treating the most rapidly growing and soon to be most-important as our ground zero – makes total sense, huh? Also, if you’ve ever worked on such a project doing things the traditional, opposite way – moving from desktop down to mobile – you’ll 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 don’t 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. Don’t use it. Ever. Yes, I’m 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 doesn’t 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 site’s content before the design process begins. Either way, if you explain to them that it’ll ensure the final product is more focussed and you’ll be building a bespoke structure to beautifully house their content rather than a cheap plastic bucket that we’ll aggressively spade it into, diluting their message in the process, just so everything can fit inside – well, they’d be silly to turn you down really, wouldn’t they! The funny thing about the content-out method is that this is what print designers have always done. You wouldn’t 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 don’t 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’, aren’t they! Well no, actually. Finally, united workers of the web have started to educate themselves and realize that pursuit of the printed page shouldn’t be an end-goal. We’ve 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 we’re 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 don’t 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. We’re 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 isn’t 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, it’s 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 – I’m 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 it’s rem’s (avoid the cascade and constant resetting, but be sure to provide a pixel fallback) as our vertical measurement and percentages as our horizontal. We’re not seeking complete alignment but we’re 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

It’s 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 you’re 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 Chimero’s ‘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 Clarke’s 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 I’m 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 Marcotte’s 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 Stanley’s 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 bring 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? It’s utterly impossible. But completely ditching support for legacy versions of Internet Explorer, exhibiting care-free ‘we don’t support IE6 ‘cos we design for the leading 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 didn’t 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 you’ll experience a slight performance hit (noticeable particularly on mobiles such as the early Windows Phone’s – 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 can’t 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 it’s 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.