Responsive Web Design
One of the key talking points at Drupal Camp London earlier this year was the challenge of pitching and the difficulty in providing profitable work on fixed priced projects.
It was interesting to hear one of our industry’s leading peer agency’s admit that historically, they lost money on 35% of all their fixed priced projects.
To alleviate this risk, another agency we spoke to has implemented a policy of not engaging in the RFP process at all.
They choose to provide a chargeable detailed design and functional specification instead. And since switching to this method, their lead to conversion rate has increased, their profitability has increased, all their projects get delivered on time, and their advocacy levels have gone through the roof.
Our role as an agency in the pitching process is to primarily to overcome two challenges:
- Fixed budgets that are allocated by finance departments as percentages of marketing spend, profit or turnover, which bear no relation to the cost required to deliver a project successfully, and..
- Overcoming the tendency for a prospect to accept the lowest price because they can’t differentiate between the offerings
As a business ourselves, we fully understand the need to work with budgets.
But in the same way a fixed budget might let you fund an entry level Mercedes, but not a top level Mercedes with a bigger engine and stacks more features, so a budget you pledge to a web project may not be enough to give you all that functionality and design standard that you need to make the project a resounding success.
And success in most cases can be directly related to conversion rate performance, a subject that can produce eye-watering results.
Overcoming the tendency to accept the lowest price comes down to the challenge of helping clients understand that not all websites are created equal, despite them all being called websites.
And that in many cases, more investment will mean a superior return because the end result will convert a much higher percentage of users into leads, sales or advocates.
The anatomy of web design cost.
Web design cost is made up of two main components:
- The amount of hours required to build the project, and..
- The hourly rate of the agency
So what can a company do if they have allocated a fixed budget, defined their requirements and put it out to tender, only to find the projected costs coming back at two or three times their expectation?
Firstly, they can reduce the number of hours required to build the project
This is obvious, but no so easy to achieve.
It’s true that some agency’s work faster than others, Agency’s that have really sorted their internal workflow out, or that may have a deeper experience in the client field, or who have the ability to reuse code can often deliver a spec for spec site up to 20% faster, which translates to a 20% reduction in cost if everything else is equal.
Reducing the level of features is another way of reducing development hours, but prospects can really struggle with this. They will frequently use phrases such as ‘just’ and ‘only’ when talking about feature requests and who can blame them? The prospect only sees the end result, not what it takes to get there.
So if you want a £50k site for £20k you’ll start by trying to figure out how one agency might be able to work 20% faster than the others in your pitch pool, and that gets you down to £40k.
Then, you can try and understand how to reduce the feature set to reduce the development hours.
Wunderkraut, Europe’s largest Drupal agency have a great way of articulating this:
They argue that if 100% of the feature set will represent 100% of the cost and that’s too high, what if 80% of the feature set could be delivered for 50% of the cost?
That for us is a logical approach, and in many cases would deliver value for the client.
So reducing the feature set by 20% might get you your site for £25k, but if the 20% reduction is all the stuff that would really make your site fly, then caution is urged.
This is particularly relevant when it comes to conversion rate optimisation, and if that 20% of feature set or £25k of cost sees conversion rates drop from say 3% to 1%, you could be loosing hundreds of thousands of pounds of lost revenue in the first year.
Secondly, so what about reducing the man-hour rate?
Hourly or daily rates can be roughly split into five tiers. This is by no means cast in stone, but it does simplify the argument:
- Tier 1 agency – up to £3k per day
- Tier 2 agency – around £1.5k per day
- Tier 3 agency – around £700 per day
- Contractor – around £400 per day
- Offshore contractor – around £160 per day
Unfortunately, making direct comparisons based purely on agency rate is difficult:
A Tier 1 agency won’t be pitching for a £50k project anyway. A Tier 2 agency will have more senior staff that will work faster than junior developers. They may also need less R&D so ultimately may be able to deliver a project in less hours.
A Tier 3 agency may on the other hand have exactly the right project specific experience and may also be able to deliver a project faster than a competing agency.
A single contractor won’t have experience across all the main disciplines of creative, design, UX, architecture and development, so will only provide a cost saving if part of a wider team.
Going offshore won’t deliver the same standards by a long way and in our historic experience won’t offer a genuine cost saving – not when you take into account the greatly increased project management and delays for misinterpretation or reworks.
If you want a £50k site for £20k, its safe to assume you can’t. Something will have to give. You’ll either have to peg back your wish list of functionality, or accept lesser levels of design and development standards, or cut corners (and be aware these are being cut).
In our opinion, cutting back the functional wish list is one logical approach, because if managed correctly, you can always build this back up in the future.
Another option is to stick to the specification but build the project in two or more phases. We’ve had a few projects like this recently and its almost self-funding for the client. Phase One delivers an immediate sales uplift, which helps provide the budget for Phase Two and so on.
That said, the option favoured by many companies is to stick to the wish list and budget and keep going until you find an agency that will help – and there are plenty of agencies out there willing to take on a project for a relatively low budget and hope it all works out.
Unfortunately, motivations will probably wain after the thrill of the win wears off, and the chances are you will contribute to our deplorable industry statistics:
- 65% of all projects are delivered late
- Clients are disappointed and don’t getting what they expected in 35% of cases, and this rises to 50% when the work goes offshore
- (Source: Aberdeen Group).
But dissuading prospects from this approach is a tough sell – especially when all the indications at the start suggest you really can get a £50k site for £20k.
We continue to try and find ways of helping companies make better-informed decisions, and on the whole we are getting there.
I hope this article gives you food for thought, and best of luck with whichever approach you take.
Drupal 8 is set to become the most capable version of the website CMS framework to date, with it’s new responsive features being among the most anticipated. What can we expect to see with regards responsive design?
With an eventual release date earmarked for mid to late 2013, Drupal 8 will be warmly welcomed into the community. As well as a raft of developer upgrades (which wont be discussed in this post), there are some fundamental core changes, chief among which will be a responsive solution for front-end and admin, out the box.
Let’s first take a look at the new Admin bar. The ‘Seven 8.0’ is Drupal 8’s default theme and whilst a step-up in presentation is obvious from the outset, users of Drupal 7 will still find this a very familiar toolbar.
It now has clearer, better-designed buttons with added icons to help spare the user’s cognitive load and aid in orientation. The new icons are also a big help at mobile size where things can become a lot simpler.
Improved Drupal 8 Admin for Responsive Websites
Whilst Drupal 7 could always be integrated to a responsive website, the actual Admin user experience on smaller mobile devices was not the best it could be. A lot of vertical and horizontal scrolling and bunching of content meant adding or editing content wasn’t the most pleasant of tasks.
Drupal 8 Desktop View
On a desktop monitor, the Admin bar has room to stretch and now makes better use of the two strips. The top strip has shortcuts and user info whilst the bottom strip is now a contrasting white colour, purely dedicated to Admin sections. A blue pencil icon on the far right toggles between the horizontal and vertical toolbar layouts.
Drupal 8 Mobile View
Here, the toolbar is shown responding to mobile. It re-adjusts automatically depending on the size of the device you are viewing so whether it’s smart phone, tablet or desktop, the toolbar simply adjusts appropriately without you needing to think. Users familiar with Drupal 7 will note how much clearer the layout for mobile is now.
Whilst properly addressing responsive serves up a laundry list of issues in general, one of the immediate problems most designers and developers will grapple with is how to deal with page-loading performance. As the size-range of devices becomes ever more extreme, we’re also demanding that we’re not dealt a half-baked experience on mobile - where connections are typically slower than desktops. At the same time, mobile devices are also ramping up in quality, like the iPhone retina screens, so now there is also a demand for 4 times the image.
Drupal 8 is also tackling this with responsive ‘Pictures’. This allows admin authors to add one large image (whether it’s a banner slide, a block image, gallery photo or a general picture on a page) and Drupal 8 will automatically serve up an appropriate size of picture for the device. E.g. full size for 1200px sites and over, and physically smaller versions for smartphones. This eliminates the temptation to ‘hide’ certain heavy pictures at smart phone size, which would normally penalise a smart phone user’s overall experience.
This will avoid a large image designed for say, 1200px wide desktop (like a banner) being served up and scaled down, on the fly, for a smartphone and hence unnecessarily hogging bandwidth and page-speed.
The Drupal 8 Mobile Initiative Lead – John Wilkins
The Drupal 8 Mobile Initiative Blog
A logical approach to planning & prototyping your new, responsively designed website.
Grids have always been an important planning element for designers. They know that a well gridded layout can help ease a user’s cognitive load and help them scan a page with far greater efficiency than one that is chaotic and misaligned. With responsive website design (RWD) now firmly embedded in the industry, determining a workable grid system has never been more important.
In this article we’ll take a look at the 1200px Grid system.
All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In January 2010 76% of the computers where using a resolution higher than 1024 x 768 px.
1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with.
Determining the Grid’s Complexity
Within the 1200px grid, we need to decide how may columns we will use to form the core language of our grid system. We need enough columns so that we still have a usable grid at the very smallest device sizes but too many columns can over complicate things and be counter productive.
For the purpose of this article, we will choose 15 columns across 1200px. This results in 60px wide columns, separated by 20px margins and capped by 10px gutters left and right.
That’s a happy compromise, which will flow out nicely as we continue to explore the grid across all the other device sizes...
Responsive Break Points
We now need to decide on what are called ‘break points’. A breakpoint is where our website will be re-styled when we change from one size range to another.
Here are some popular break point sizes.
• Smart Phones (Portrait) 320px Wide (minimum)
• Smart Phones (Landscape) 480px Wide
• Tablets (Portrait) 720px Wide
• Tablets (Landscape), Laptops, Small Monitors 960px Wide
• Larger Desktops 1200px Wide (maximum)
There is an argument to say that just because desktop monitors are getting larger, users don’t necessarily experience websites at full-screen at such sizes so we need to consider these trends carefully and not over-engineer things. This is why we don’t produce breakpoint above and beyond 1200px.
The Responsive Grid
Within the breakpoints, we can simply determine the maximum number of our 60px columns that will fit into these size-ranges and this allows us to final produce a grid for each scenario.
• Smart Phones (Portrait) 320px Wide (4 Columns)
• Smart Phones (Landscape) 480px Wide (6 Columns)
• Tablets (Portrait) 720px Wide (9 Columns)
• Tablets (Landscape), Laptops, Small Monitors 960px Wide (12 Columns)
• Larger Desktops 1200px Wide (15 Columns)
We now have 5 grids to help us plan our responsive website.
Use the grids to rapid prototype and collaborate with the client so that they can see well in advance exactly how their responsive website will play out across the devices and allow them to see the challenges that lay ahead!
The 960px Grid System
The 12000px Grid System
In a nutshell, Responsive Websites automatically ‘respond’ to the target device being used and reformat the content to work as the device intended. Non-responsive Websites simply scale down the content and it becomes unusable.
Fig 1: Just a small selection of the wildly varying, web devices from the, wide desktops to the mid-size tablets, mini-tablets down to the smaller smart phones.
Why Consider Responsive Web Design?
Traditionally, Websites are designed and built to single set sizes. Usually this is a size determined by the most popular desktop screen size.
Until recently, this has been a 1024px wide screen that produces a 960px canvas for a Website design (allowing for browser window edges and some quiet space).
The problem with designing a fixed-width Website is two-fold at the time of writing:
- According to Statcounter, 1366x768 overtook 1024x768 as the most popular screen resolution earlier this year.
- According to Gartner’s 10 Critical Tech Trends, mobile devices will pass PC’s to become the most popular Web access tool in 2013, and by 2015, tablet shipments will be 50% of laptop shipments.
What we now have is a plethora of devices with all sorts of different screen sizes.
Smart phones have been edging up in size and resolution, whilst tablets and mini-tablets have exploded onto the market to create a whole new genre of device that we didn’t even know we couldn’t do without.
We now find we are accessing, or at least trying to access our favourite sites from the very smallest of Smart Phones, right up to the very largest of high-quality desktop monitors.
So if you want to give your audience the best experience regardless of the device they are viewing your site on, what are the options and what will it cost?
The Case Against a Dedicated Website For Each Device
Ouch! UX guru Jakob Nielsen recently suggested that we should do this, or at least have three different Websites in different sizes.
Despite Nielsen’s credibility in the industry, his comments have been met with sheer astonishment. “Horror and bewilderment” are also terms I’ve seen banded around.
Do we really need to be building separate sites for each size of device?
Until recently, it could be argued that a dedicated Mobile site was the logical way of delivering content to smaller devices.
This approach was prohibitive to smaller organisations on financial grounds, but if you were B&Q for example, then you had the budget.
Aside from the financial implications and the prospect of having to double or triple your budget, two highly notable recent events have also put this into question:
- There has been an explosion in sub-sets of Smart Phones, Tablets and Laptops, which has given rise to a wide range of screen resolutions. Two sizes of Website are therefore no longer enough.
- Google’s much-coveted Panda algorithm update penalises duplicate content and if you have a desktop site and a mobile site on a different domain or a sub-domain, then you have duplicate content.
In practice, the only way you can make this work is to have at least three versions of a Website in the hope you can cover every screen resolution out there, and feed each version with its own content to avoid angering Google and messing up your hard earned search positions.
If you have deep pockets and an unlimited amount of time to manage this then so be it.
However, there is a more sensible approach and this is called Responsive Design.
The Case For Responsive Web Design
Here are 6 top reasons why you should consider Responsive for your next Web Design project:
- Unlike a static site, it’s not out-of-date before you even start.
- A Responsive Website can usually be built for 1.5 times the cost of an equivalent static site.
- Unlike building 3 x static sites to sort of cater for all the screen resolution options, a Responsive Website can be built to exactly cater for all the screen resolution options.
- Responsive Web Design is future proof – new style sheets can be added at a modest cost to cater for further changes in screen resolution trends.
- Having a Responsive Website shows your audience you care about their needs – this can really influence referrals and social sharing.
- Building Responsive Websites isn’t easy, so choosing vendors who can build complex sites in Responsive means you are working with people who really know their onions.
How Responsive Websites Are Built
We know we need to deliver the same essential information or, in other words, a single website - just via wildly varying device screen sizes.
To keep things organised from the very start, we need to begin with a grid.
A well-heeled designer will always design on a grid regardless but with so much to consider with responsive design, a grid will really help decision-making at the planning stage.
The most popular grids with respect to responsive design are 12 or 16 column grids.
What makes a good grid is how flexible it is and how well it divides up into ever-smaller column-groups to help us re-organise our site into the smaller device sizes we need.
A 12-column grid is particularly useful as it divides up into 2, 3, 4 & 6 column groups and hence provides a good spread of combinations to satisfy most popular design layouts.
Both the 12 & 16 column grids are based on a 960px width. This value is derived from the popular width of monitor size, which has in recent years been a common desktop monitor size but now is more readily found being used for modern laptops and larger tablets.
Below is an example of a 12 Column grid that mwa Digital use, showing the number of columns that smaller devices display.
Note that extra columns can be applied to extend the grid and cater for the very large desktop monitors that are now on the market. Yep, responsive design goes both ways.
Fig 2: The 960 Grid - 12 Columns
What Does The Grid Do?
A grid will allow us to define what the Website will look like on each device before we even go anywhere near the design process.
I use a Rapid Prototype for this process. Rapid Prototypes have superseded static Wireframes because it’s lightening fast to build Web pages with various degrees of detail and create navigation that actually works.
I can also build a version of each page for any device so this really helps the client understand what they are getting and avoids any nasty surprises down the line.
To get a more holistic look at Responsive Design, have a look at this example of an E-commerce Website built by mwa using Drupal Commerce:
Fig 3: An overlay of the 12-column grid over the RTO basket page. Note how the page is split left and right according to 8 + 4 columns. Note also how the internal elements of the left hand content are split again in 4+4. This method of design helps when we get to smaller devices so we can more easily re-organise the content into single-stacked columns – particularly for the smart phones.
Fig 4: The RTO Basket page with grid hidden. The grid also helps bring discipline to the layout so we can reduce the cognitive load for first-time viewers.
Fig 5: The RTO Basket page designed for each of the device widths from the wide desktop 1200px wide, down to the much narrower smart phone in portrait layout. See how with the smart phones layouts, we hide some of the secondary information, such as the right-hand promotional zones seen on the larger devices. These don’t have to be hidden but help create faster, shallower pages on phones to help keep the primary target a focus.
The View On Large Desktops (1200px)
Starting with the largest screen, this is an optional size, which not all Responsive Web Design caters for. This takes the 960, 12-Column grid and scales up, adding more columns to create a more generous layout for the increasing number of large desktop screens.
In fact, looking at W3Schools.com statistics on monitor trends, as of Jan 2012, 85% of Internet users have a higher screen resolution than 1024 x 768 (12 Column) size.
This isn’t to say a site designed at 1024 X 768 wont work on larger or higher res monitors – far from it. It will work just fine. However, the principles of Responsive Design work both ways. As well as scaling down for smaller devices, we can scale up for the larger ones.
See how the RTO product group page makes use of the extra space on a large monitor using 4 columns of product in it’s grid as apposed to the regular 3 columns for smaller desktops and laptops.
Fig 6: Responsive can also scale up on the 12 Column grid. Many monitors are becoming very large now. Take Apple’s 27” display for example. An extra responsive consideration can be employed for users who have a bit more screen real estate but this is an optional one. I could use a 15 Column grid at 1200px wide in this case.
The View On Desktops, Laptops & Tablets in Landscape (960px)
If we consider most websites to be 12 columns already, the task of designing for Laptops, Desktops and Tablets in Landscape is a relatively known quantity already.
This one is relatively ‘simple’ from a Responsive Design perspective and we can forge straight on to the next.
Fig 7: Catering for the older devices but also the ever-improver smaller devices. Whilst older devices like small monitors, laptops and older tablets use the 960px (1024px wide resolution screens) layout, now the smaller devices like mini-tablets (iPad Mini) are using this resolution of screen so the 960px layout is still going strong.
The View On Tablets in Portrait (720px)
The next device down is Tablets in portrait. As you can see in Fig 2, above, we are now down to just 9 columns so we need to consider how the layout of our 12-column site will now fit into this more restricted space.
If you have used a tablet before, you may think your site is sitting pretty without all this responsive nonsense but take a hard long look at it.
- Can you really browse the site as quickly and easily as the desktop site?
- Can you do so without using inbuilt pinch and zoom gestures?
- Can you click text links, buttons and navigation successfully, every time?
More importantly, even if you can navigate to where you are going, can you comfortably read the information without more zooming and even if you can, are you certain other users are quite so trouble-free?
Be very honest, as your audience will simply vote with their screen-tapping fingers.
If your site has not been responsively designed for tablets, it is likely that your site is getting scaled down by as much as 25%. This means everything gets scaled together including interface, text, links and images.
This can often push the usability of the site beyond the limits of comfort and could well increase the bounce rate of your site for tablet users.
When Responsive Design is employed for tablets, a typical page’s content column is reduced to a tablet-specific width.
Since the content layout we build on sites at mwa Digital is ‘fluid’, the titles, text and images can reorganise themselves automatically and hence nothing is forcibly scaled down.
All text remains at the exact size it was designed at and the device does not need to override this.
The result is that with a narrower page and unchanged text size, the content is pushed down and creates a slightly deeper page, which is not a problem.
Fig 8: We cater for Tablets, mini-tablets and in all colours too!
The View On a Smart Phone in Landscape (480px)
A lot of smart phones now have a velocity meter built in as standard. This means they can be viewed in landscape and portrait mode – which ever the user wishes to use.
This means your Website also has to cater for both preferences and a smart phone in landscape grid is now down to just 6 columns.
Fig 9: The smart phone in landscape provides better width but sometimes the lack of height can be an unintuitive way to browse. It entirely depends on the content and is very much up to user preference.
Once we get down to the smart phone sizes, we start to interrogate the layouts in a more rational way.
Any secondary information, like promotional zones are removed or re-organised to the bottom of the page.
Many of the image elements also need attention at this stage as this aspect of screen is quite different from the tablets or desktops and conventional elements, such as those on the header need to exist in a more extreme space.
In Fig 9, you can even see that secondary elements of the main navigation are removed and reserved down in the footer. The target with mobile is to channel the user to the most immediate of goals.
In this example, it is to access the products’ departments, guiding them onto product groups and then basket and checkout.
Any secondary info like About Us, Contact, Testimonials etc., can still be accessed but just in alternative ways. A prominent ‘Search’ field is offered as a point to retrieve any information in compensation for the rationed navigation.
The View On a Smart Phone in Portrait (320px)
This is the smallest width device layout at just 320 pixels or 4 columns wide. Splitting this layout into any more columns can prove too complicated on the eye whilst also delivery images at too smaller size so wherever possible, all elements of the site are stacked into one simple column.
This does make for longer pages and more scrolling and where this would feel inappropriate on a desktop, it seems more expected on a mobile device.
You now have a full E-commerce experience on mobile in portrait so that all the usual pages that a user would see on desktop are also delivered in mobile.
This is important, as it helps the user navigate in a more ‘expected’ way.
The mobile layouts deliver homepage, content pages, product department pages, product group pages, product detail pages, basket, checkout and unique customer zone pages, truly allowing for a mobile shopping experience.
Fig 10: Above, RTO’s home page (left) and a section of the checkout page (right). The smart phone in portrait is the most restricted view for width but is also the most natural way to browse given that it can be held and operated with one hand. Additional styling is afforded to this layout making text links more like solid larger buttons, more ergonomically suited to the thumbs and finger taps.
One consideration is quick loading pages for mobile. Often, users are connecting on w-fi or 3G services rather than a cabled Ethernet connection and so this is just one more thing to think about.
Removing any secondary information like promo boxes, adverts and background images can help keep the browsing experience on mobile speedy and targeted.
The Pros and Cons Of Responsive Web Design
Presence: The single most prominent reason for using Responsive Design is simply to be where your audience is. The Web’s users are evolving and you need to adapt just to break even.
Efficiency: Responsive eliminates the need for multiple websites with multiple points of administration. One Website, one CMS, one admin, one set of data, multiple layouts.
Opportunity: Many design agencies are still assessing and developing their own solutions for responsive. We predict that within just a year or two, nearly every website will be responsively designed and if your site isn’t, it will suffer and drop off the radar.
Steal a march on your competition and look into responsive design for your site as soon as you can.
Future Proof: Once your responsive solution is in place, new layouts can be added relatively cheaply so you can certainly cover any new, popular device sizes that emerge in the coming years.
Cost & Time: Considering building a new Website responsively when the cost is around 1.5 times the cost of building a static version is a bit of a no-brainer.
However, overhauling existing sites is not an attractive job – particularly where content management systems and E-commerce are in place.
Whilst the Responsive Design itself is not so much an issue, changing an older framework from non-responsive to responsive very much is and is a bit like unpicking a lot of knots in a ball of wool or applying foundations to a house that’s already standing.
Some CMS systems like Word Press for example would be a no-go if you had a custom theme in place.
If you are considering making an existing site responsive, take the opportunity to consider any other large changes into account at the same time as you may be looking at a lengthy development turnaround and incorporating other changes may be cost effective in the long run.
Responsive Web Design
BBC TV Channel Homepages: Responsive Design
BBC Website Article showing their use of Grid
Golden Grid System
Screen Size Stats
Designers respond to Nielsen on mobile
Live Examples of Responsive Web Design:
Resize the browser down to a very small size to see how the content re-organises itself.
We’d love to know how you are dealing with reaching your audience on various devices. Are you thinking about it, researching it, busy developing a solution or not addressing it at all?
Feel free to comment.
Follow us on:
- RT @drewallenmusic: Seen @ArticMonkeysBR & @bobdylan play @BournemouthIC now I am supporting @JamesBlunt - epic!!! http://t.co/uryO0o6UUz — 2 years 7 months ago
- RT @dorsetpolice: It's almost time! #boscombepolicebox http://t.co/K5cUrDeKLd — 3 years 2 weeks ago
- RT @WestBeachBmouth: Retweet this & be in to win a table for 2 at our legendary lobster and burger night next Thursday from 6pm... http://t… — 3 years 1 month ago
- Very pleased with the new site for #CaraDillon and best of luck @CaraDillonSings with the new album — 3 years 1 month ago
- @WildGreenBean Both! — 3 years 3 months ago