Mobile first responsive web design

Submitted by exaboy on Thu, 12/29/2011 - 21:49
Mobile first responsive web design

That is quite a mouthful, but it defines the direction the web development industry is taking. Make no mistakes these buzz words are not a passing phase but rather doctrine of which websites in this day and age must adhere to if they wish to deliver the product promised.

I must admit that I have come full circle with the whole HTML5 movement. In its early stages it was sceptical as many were about its realistic future in a world that seemed so set in the past. It doesn’t take much to get excited about the future of the web. There is nothing more rejuvenating than listening to a presentation or reading a book about the tools that can be used to build cutting edge website for all devices. And webdevs really are bestowed with the most important quest of all - striving to make the internet better one site at a time.

There are two terms right now that are the essence of web design/development:

For good reason these movements have really raised the bar for both designers and developers encouraging them to work together for the common good and betterment of the end product. It also helps adjust some flawed reasoning that has crippled our industry and made it a bore. Now we are educated and understand that visual experiences will differ from device to device (including browsers) it is ok. We have beat ourselves up with thinking like this and it has rubbed off on our clients who have the same expectations. We have a monumental task ahead of us to undo all this bad stuff if we hope to begin building interesting websites again, and not shifting elements pixel by pixel.

I look forward to getting the designers to step away from Photoshop and move towards scamps which will inevitably mean they will do more hands-on work with the developers to achieve the desired results. This is a very good thing, and something they will enjoy as they will have more control over the end product as opposed to conducting a design review at the end of it.

So how does a digital agency, which has traditionally had a linier workflow, go about approaching what can be best described as an 'agile' approach to design and development? First things first both teams need to be on-board with the process. It will mean that the developer and designer need to be involved in the process from the get-go, working though (together) what the requirements of the client are and setting down the markers of what needs to be achieved. Many agencies are Design lead, which is an atrocity because very little designers know how to build what they design, or think they do. Lets step though what is required.

Content is King

There is a reason your visitors are on your site, and you have a limited time to guide them in finding it before frustration prevails and they leave. What is worse, not only leave but they might never come back. In the initial discussions focus on the important message being portrayed for this specific device, rely on the clients statistics and UI to guide this direction. The homepage is not the place to dump useless content.

Mobile first

Yes work your way from the smallest (most focused) device up to your desktop browser, this will have numerous benefits to the process including UI, Performance and Stability of the chosen frameworks. When looking at dimensions ensure you take into account device PPI as the differences are significant. Don't be sucked into the 320px baseline as we don't want to grasp for 'comfort zones' but at the same time consider what your users are using.

Keep it lean

I implore your to focus on your mark-up, JavaScript and css early doors. Don't reinvent the wheel but also consider the number of connections you are making to the server for assets. Question everything, and have no mercy with yourself, such as like 'Do i need jQuery loaded immediately' or 'Should I turn these images into a sprite?' are important to repeatedly ask. By doing so, you will increase your page-load times which are mission critical for the likes of low-bandwidth devices. At this stage you will also decide how you want to break out your JS & CSS into sections/components of the site of course ensuring this methodology is optimised.

Progressive enhancement

That's right our objective is to create a platform from which we can build on, something that is robust enough to handle the layers we will apply on top. Our mark-up, CSS & JavaScript at the base level should be fully capable of rendering the website with its core functionality. Only at this point are we able to continue to enrich the user experience.  

Tools of the trade

  • HTML5 Boilerplate - Get started with a solid base, and strip down to suit your needs.
  • Use percentages for widths, its old-school but produces the best results. Also use ems for font-sizes, margins and padding, it will save you time in the long run.
  • Use wrapping elements with "overflow: hidden;" to mask images as they scale in your layouts, then set the image "max-width: 100%;" to ensure the aspect-ration is preserved.
  • ResponsiveImages.js - Allows for low-res (mobile) imagery to enhance to higher quality (desktop)
  • Respond.js - A script that enables Media Queries IE6-8 & FF3
  • Modernizr - Feature profiling/detection tool, has many custom add-ons
  • Media Queries - Breakpoints in your CSS where tweaks to the interface can be made.

Conclusion

It will take time for agencies to adopt these philosophies and implement their processes accordingly, but what we can have confidence in is that there are tried and tested methods of building future proof websites. Find what works for your particular team, and continue to push the boundaries to make the experience better for yourself and those around you, but more importantly the client. After all it's all about them.