Over the last year or so much has changed in web design. Our big problem use to be backwards compatibility with IE6. But now we find ourselves in the midst of a zombie apocalypse. New smart-phones and tablets are popping up faster then the brain hungry undead in a George A. Romero movie.
Luckily a lot very of smart people have been paying attention and coming up with ideas and solution on how to deal with this impending apocalypse. Here’s brief summary of all the lessons learned over the last year. Follow them and you just might survive.
Work from the Content Out
This may be the most important idea I learned all year. Developing a content strategy that defines a process for content audits, creation, design, development, deploying and on-going governance to ensure quality is a crucial step in web success going forward.
Quality content helps inform design in its tone, voice and quantity. All of this can have a profound influence on the design of the site. Failure at this stage can cause the site to feel disjointed, random and unprofessional. It shows lack of planning and foresight.
I’d like to say that this is the most important but it needs to work hand in hand with design. As I said it informs design it doesn’t dictate it. So let’s start talking design.
A design (and development) strategy that thinks mobile first brings with it challenges and rewards. In this time when the number of mobile devices is increasing at an alarming rate and that they have become the preferred method of viewing the web, it’s no longer optional to deliver mobile optimized content.
A mobile first strategy forces focus on what is absolutely critical. It may also point out that the needs of mobile phone users differ from tablet users and again from desktop users. It shines a light on the context in which different users on different devices may have different objectives and goals.
Another side effect of approaching the design from the mobile first perspective is that it keeps attention on the details. Like optimizing content. Generating optimized content for each experience improves performance for the end user and the server.
Use HTML5 & CSS3
These latest version of the basic languages that describes a web page provide many enhancements over their predecessors. They delve deep into the mobile operating systems and take advantage of native device technologies to deliver better user experiences.
For example, the new email element in HTML5 taps into the mobile OS and pulls up the web keyboard instead of the standard one which makes the “@“ symbol and “.com” button accessible. Thus making it easier to enter the email address requested. There are several other examples like this that make it ideal especially with a mobile first strategy.
In turn CSS3 now allows us to achieve things with a couple lines of code that use to require one or more images. This reduces the load on the server by reducing the amount of request and size of the download which delivers the page to the user more quickly.
Now everything is not ready for primetime just yet. But those same smart people I mentioned at the beginning are the ones coming up with the tools and resources to start using many these new technologies today.
By starting with a clean, well-formed, semantic HTML page we’re already compatible back beyond IE6. Now we’re ready to begin layering on the good stuff. We can begin to add our styles, structure and interactivity in a careful and considered manner. Building up in this fashion creates increasingly more engaging websites without excluding users in the process.
Progressive enhancement is a great tool in the designer/developers toolbox to ensure that sites are fully accessible. Usually when people speak about accessibility they’re speaking about those with visual impairments like color blindness and loss of sight. What about those impaired by inferior browsers, cough “IE6” cough. The no user left behind benefits of progressive enhance far out way any impact they may have on development.
Another apparent benefit to a semantic progressively enhanced page appears to be improved SEO. There seems to be some evidence that pages designed this way are performing better with search engines.
Responsible Responsive Design
The latest fashion statement to come down the web cat walk is Responsive Web Design (RWD). Since it’s really not feasible to create device specific designs for every device out there, RWD steps in to provide a method that can scale a web page from the smallest to largest browsers by making use of some CSS3 tricks. This is great final progressive enhancement to a sites design.
When implemented correctly a responsive design delivers the right stuff at the right time to the right device. But it’s not a magic bullet and may not be right in very situation. In some case you may still need to silo your mobile and desktop designs, but will probably still benefit from using a responsive design for the mobile.
But with this new design model comes maybe one the most difficult changes necessary to succeed. A change in processes and expectations is needed to successfully implement this strategy, especially for disparate teams of designers, developers and stakeholders. For starters we need to let loose the notion that a page or site need to look and behave exactly the same on all devices. Old concepts like “The Fold” left over from the print world no longer hold the same value as they once did.
Embracing what makes the web the web opens the doors to new and innovative ways to reach users. When we fail to let go of the old ways we apply unnecessary constraints that prevent us from realizing the full potential of what’s possible. The innate flexibility of the web makes it the perfect space especially now to reach our user with useful usable content and responsive design is great way to achieve this.
Know Your Users
All this technology and strategy is good stuff, but if you don’t who your audience is or what they’re trying to get done then all the pretty bells and whistle in the world won’t help. Solid user research is the connective tissue that brings it all together. It tells you who, what, where, when, why and how your users are interacting with your site.
Nothing works better at gaining this insight then talking directly to the users. Taking the time for first hand interviews to find out all about your users is the best way. Further, building users personas from this information can create a clear picture of the user needs and goals and guide design that meets know user tasks that will want to perform. This can have the added advantage of minimizing the influence of individual experiences on the design
The sooner you start talking to users the better. And if at all possible keep them involved throughout the design process. As you run through iterations of your design or want to test a new idea get your users involved and record their feedback. Why rely on mind reading. Usability testing doesn’t need to be expensive to be done right. A little software and sound techniques can lead you to the kind of insight that make your web site shine.
Let’s face it, at the end of the day we’re not building websites for ourselves. They’re to connect with user who coming for information, products and entertainment. So a User Centered Design (UCD) philosophy just makes sense.
Before you get busy developing strategies for content, mobile, progressive enhancement, responsive web design and a user centered process, take a moment to create an overall web strategy plan. Laying out the principles, practices and patterns that you want follow up front can reduce conflicts when it come to design and development. Create a web persona in similar fashion as a user persona for each project. Make sure the goals and objects are congruent with your web strategy. Again in group dynamics this can go a long way to avoiding personal conflicts during a project
These ideas and concepts will keep those flesh eating zombies at bay and make your websites as future-friendly as possible in the process. However, much like the zombies in the new movies things are moving faster then ever so don’t wait to get started.