Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
24th September 2012

Responsive design part 1

As the devices we use to access the web continue to diversify, with all manner of capabilities and screens to support, the need for adaptive websites has never been so pressing.

Responsive design part 1Only a couple of years ago, the concept of responsive web design exploded on to the scene in what had been considered at the time ‘the future of the web’. In the short amount of time since, so much has changed, and so much new technology has emerged. Now, it’s quite obvious that responsive design is no longer just the future of the web; it is the practical solution that developers and designers should use today.

The notion of responsive web design is a simple one: creating websites that seamlessly respond to the user’s environment, based on the device, size, resolution, technical capabilities, etc. If only the implementation were as easy as its ideal definition! Since Ethan Marcotte first introduced the concept into the mainstream web-design community in his May 2010 article in A List Apart (www.alistapart.com/articles/responsive-web-design), many articles, trends and new considerations have arisen. Debates are being held left, right and centre, and there seems to be a new best practice to adhere to or trend to follow for responsive design every week.
In this feature, we hope to fully discuss all of these modern considerations, see both sides of the debates and cover the most up-to-date methods for crafting responsive designs that work not only among today’s devices, but those that can be made future-proof as well.

The importance of responsive design

Several years ago, the 800 x 600 screen size was the most common, and the standard to design for. Shortly after, the 1,200 x 800 screen size seemed even larger, but is now one of the most common sizes. What the most common desktop or laptop screen size is today is only half the battle though, and rather irrelevant considering how often it changes. Plus, now we have tablets, netbooks, smartphones, large TVs and more that can all access the web.
The vast variation in screen sizes is likely what led the revolution of responsive web design to begin with, especially within the last few years. Of course though, along with all these new (and old) devices that are in use today, we have other considerations such as the technical capabilities of what these machines can handle.
Responsive design part 1
It seems as though we can already be considered ‘behind’ on adapting our design and coding to the various devices out there; our technology grew too fast for us to catch up, and there are far too many websites that are inaccessible to a large number of users.
Many websites, especially those of larger companies who had the resources, tried early on to ‘stay ahead of the game,’ by creating perhaps several mobile versions of their websites, and even used the early concepts of flexible layouts to meet a wider variety of user needs. However, with the range of device considerations growing, this method of designing for each popular gadget to hit the market is becoming untenable.
Responsive web design creates a new possibility where we can cover, for the most part, all of these various devices now, and hopefully those of the future too. As more technologies emerge, of course there will be new considerations and practices for responsive design to grow upon.
Surely we don’t have all of the answers now, but we can catch up our designs to meet modern needs, and improve the global user experience today. With responsive web design, we can also help future-proof our web experiences to an extent, and adapt far more easily when the new technologies do arrive.

Benefits for users and designers

As if we needed more incentive for us all individually to get rolling on the responsive design trend, perhaps the biggest motivator can be that it not only creates a better web for our users, but also ushers in a better web for us designers and developers as well.
We can, of course, see the positive benefits for the users almost immediately:

• Users with devices new or old can have the same great experience on a website, eliminating some
of the unnecessary frustration
• Users on the go or that would otherwise transfer their browsing to various devices can do so easily (eg a user that must switch from their desktop to their iPad while travelling)
• Locations in the world where technology is just catching up, and mobile devices are far more prevalent than any other for accessing the web,
can take advantage of more information
• Businesses benefit by reaching a wider audience, and a well-built website for all users can increase a brand’s trustworthiness. Also, businesses can save time and money in the long run on the maintenance of their website.
With all of these obvious advantages to the consumer in focus, we can often overlook the benefits responsive design can offer designers and developers too:

• More flexible designs mean less frustration, errors and bugs for different user situations. A design that adapts and, to some degree, ‘fixes itself’ from the outset means we can focus on the all-important user experience, rather than spending all our time correcting technical mishaps
• Complete design projects up front, rather than create new solutions for every new device size
and capability. Relatively future-proof projects –
at least, the near future
• The ability to improve our own design and development enterprises by being able to better aid users’ and businesses’ websites.

The above is only the beginning when it comes to the revolutionary advantages of responsive design. What’s better is that all of these benefits are not a thing of the future, but so many practices can begin being implemented today by simply adopting a new way of thinking.

Designing for ‘Content Out’

Design is as important on the web as it is in any other medium, as a proper design can increase brand loyalty, conversions and add value. Despite design’s benefits however, it’s been a long-standing fact that content is still king and design only comes second. A good design will flatter the content, and there is no reason why responsive design should be any different.
With the rise in responsive web design, we are beginning to see a new term: designing with the content out. By putting so much focus on content, we can create webpages that are easy to read and use, no matter what their constraint (ie the device). Traditionally, we may use grid systems, common layouts and preset guidelines to construct a website’s design. Later, we plug in the content. This isn’t putting value on the content, but rather putting far too much value on the aesthetics of the website. With design out, content in, the content is not a priority.
With content out, on the other hand, we create the proper structure, width, size, placement and other typographical details that would most benefit the text, and then fit in the design based on the content’s structure. Content out, design in.

Design and layout for devices

Designing for content out initially can perhaps be the simplest way to determine a proper layout for just about any range of devices. After we plan the content however, we still must think of where both the aesthetic design and other page elements will be placed. With responsive design, we are gifted endless possibilities. We can’t possibly design separate interfaces for each instance, so we have to create a standard set of guidelines for user interface techniques to help simplify the creative process.

Layout: Columns and width

Obviously, physical space will directly limit how many columns can fit into a webpage, but we shouldn’t only worry about what’s technically possible. Wider screens should use columns because it can be a great place for secondary content that will be noticed via our habit to horizontally scan pages. Even for smaller screens on laptops, netbooks and tablets, additional side content should be put to use when possible. On small mobile screens, beyond the physical space constraint, there comes a point where usability becomes a concern as well, and any side content should be rearranged.

FRAMEWORKS AND BOILERPLATES

GOLDILOCKS APPROACH
goldilocksapproach.com
The Goldilocks Approach is a responsive framework consisting of both CSS and JS files that tries to specifically step away from the responsive approach of designing for specific devices, and rather creates a fully flexible web design for each and every circumstance.

GET SKELETON
www.getskeleton.com
This is a minimalistic responsive boilerplate that has CSS and JS files to provide a flexible layout and highly compatible design elements, making it ripe for customising. There are several pre-styled elements included – all you need is your unique design flair.

YAMB
bit.ly/salAiW
Yamb is the responsive template from the Yet Another collection. The content-out boilerplate adheres to all the modern interface design methods for going from mobile sizes to larger screens. Features include a fluid grid, drop-down menus and responsive slideshows.

GRIDLESS
bit.ly/mRUHFs
Gridless is one of the most basic templates around. It comes with no predefined CSS grid classes or other designed elements. What it does include is an intelligent file structure, all the necessary CSS code and a JS file that increases compatibility in older browsers.

PART 2 COMING SOON

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.