Efficiency and Economy: Responsive Design On a Budget
With limited time and money how best to design and develop interfaces for multiple platforms and why it is important to do so.
The word ‘budget’ is deemed in some quarters to be a dirty word with negative connotations suggesting shortcuts, unreliability and even lower quality. You’ll be pleased to hear the approach I’m suggesting doesn’t manifest in any of those shortcomings and in fact the ‘budget’ approach could actually improve the end product. That’s right, streamlining your design and build processes to produce cost effective responsive solutions might actually be the best thing that ever happened to you.
This way of working stems from a principle drawn from the concept of ‘mobile first’, an approach forwarded by Luke Wroblewski amongst others. I say drawn as I want to move away from the idea of ‘mobile’ and think instead, as Tom Maslen has talked about recently, about what constitutes the ‘core experience’ of the website you are designing whether it be on a 480×320 screen or a 2560×1440. That is to say which content, functional, branding and design elements are your users going to benefit from the most and also expect to be present whichever platform they are on and whatever screen size they view your site on.
By evaluating and identifying the core experience this should then give you a stronger product that meets the needs of your target users without compromising on the essence of your offering whilst remaining device agnostic. As a happy byproduct of the process you will also strip away the attributes that quite often make up the time consuming ‘fat’ of many website builds such as superfluous content items, distracting presentation modules and mind bending navigation systems.
Ultimately through focussing efforts initially on creating the core experience you should also save significant time and be able to work within budgetary constraints. So, armed with our approach how does this then translate into the design and build process?
Choose your battles
Through simplifying and optimising there could be significant time and money saved during the front end development process. However, although this article focusses on the front end, the approach of creating a ‘core experience’ should translate to all aspects of creating a digital experience including deciding on the information architecture, content creation, CMS specification and even server hardware selection.
The core experience in its simplest form will become the small screen experience. It will ensure that those users will be able to access and interact with the site without missing out and/or being frustrated by a lesser, alternative to the desktop version. But what about everyone else?
OK, so unfortunately we can’t really just stop at the development of a core experience – we do have a great site that will work cross platform but some major user groups won’t be happy. With budget constraints in mind this is where you really have to choose your battles and make informed decisions about which user groups and platforms you are going to further optimise your site for through ‘progressive enhancement’ of the core experience.
Use your analytics tools, look at the target demographic, speak to your focus groups and do your market research (or at least find some comparable case studies) and then choose who or rather which platforms are most important to you. It may be that the most significant user group are using tablets and not desktops.
As Mark Boulton has suggested – progressive enhancement shouldn’t necessarily adhere to break points that reflect a set of standard screen resolutions but instead respond to your actual anticipated user needs. By determining the 2 or 3 user groups and prevailing platforms that most of your users are or will be using you should save yourself several hours in enhancing the experience for multiple break points and platforms that will see relatively very little usage.
We have an approach and we’ve established that actual user needs will determine which platforms our progressive enhancement will target. Now we need the tools to help put this all into practice. For all the front end design disciplines use the tools that you are most comfortable with – I feel it is important to embrace this methodology, how you then deliver on it is up to you. However, I’ve tried to suggest some potentially helpful tools below and also some things to think about if you do decide to use a tool or service when creating your responsive website.
When it comes to designing the UI for a responsive site we need to transition from thinking in terms of fixed width pages and instead develop a more ‘fluid’ approach to interface design.
Laura Kalbag has talked about design systems as a useful way of making designs work cross platform, ensuring consistency in the design decisions you’ve made and translating the design ethos effectively across target platforms. This could result in fewer traditional mockup files such as PSDs being created and instead supplementary design documents such as palettes and style guides which describe how the design will work in your various target devices. Tools such as style tiles and pattern libraries are helping designers to articulate these design systems.
Grids are a big part of responsive front end development and as a result there are dozens of downloadable grid systems and services out there that can help you. Some of those such as Twitter Bootstrap go even further and provide responsive html and css for a multitude of common modules and components that can be used in your website.
To ensure leanness and optimisation of code ideally you would create your own purpose built responsive grid based on the requirements of your site. However if you are looking for a grid tool that could save you time and the pain of doing the maths for proportional layouts then Mark Boulton’s Gridset looks a fairly useful service.
If you’ve gone through the process of determining your core user experience and developed a well thought out progressively enhanced UI then finding a theme that corresponds to it may be tricky.
However, using a responsive theme in conjunction with a CMS such as WordPress or Drupal could save you oodles of time – there are plenty of good ones out there with all kinds presentation features to excite and dazzle your audience but just make sure it fits in with what you are looking to achieve. There’s nothing worse then trying to download a large, CPU intensive site whether it’s responsive or not on a device that simply can’t cope with the demands it’s making.
CMS and Ecommerce
This article is primarily focussed on front end development but a brief word about the CMS… It goes without saying that if your website requires a CMS then achieving a cost effect solution will rely fairly heavily on an open source CMS.
Rather than recommend a specific CMS I would suggest that with responsive in mind you should consider some of the following questions when making your choice:
- How easy is it to configure and create your own responsive theme?
- Are there mobile specific modules or even mobile detection scripts that you can take advantage of?
- Is there a preview mode that enables me to emulate a small screen experience?
- Does the CMS allow for full control of the HTML? i.e. will easily enable you to strip out HTML/CSS that the CMS may add?
- What are the typical page size overheads of a particular CMS?
The last point is very important – page performance can really let an online experience down on slower connections. Not only that but google’s search algorithm takes into consideration download speed in determining page ranking thus only heightening the importance of lean, fast downloading pages. Both WordPress and Drupal offer numerous mobile modules, plugins and responsive themes and are well worth investigating as part of your CMS assessment.
Responsive design is a paradigm shift and an emerging discipline that everyone working in digital is still trying to get their head around. As web designers we’ve become accustomed to working with fixed width layouts in order to impose a manageable structure within which to design. With the latest presentation technologies such as HTML 5, CSS3 and JQuery we’ve also sought to create rich and engaging but also memory, processor and bandwidth sapping desktop experiences which do not necessarily respond to the needs of the small screen user.
In an age where online devices outnumber people it’s time for a major rethink – consider the core experience first, consider the common user needs and wishes foremost and with this refocusing of minds and ideas you should save time, money and ultimately lead to much better user centred digital experiences.