July | 2013 | saumyazero

As part of GNOME Outreach Program for Women 2013, my project is responsive design implementation of GNOME main website. I wrote an article summarizing my research work of the past few weeks .It describes what responsive design is and how it could be achieved.

What is Responsive Design?

Responsive web-design is a technique which essentially uses Cascading Style Sheets 3(CSS3 media queries with fluid proportion-based grids, to adapt the layout of the website to the viewing environment (that is, the device it is viewed in) and minimize user adjustments of resizing or scrolling.

The term responsive web design was originally coined by Ethan Marcotte in an article on A List Apart in the year 2010. In his words, “Responsive design is not a single piece of technology, but rather a set of techniques and ideas that form a whole.”

Need of a Responsive website:

Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013, according to a forecast by research firm Gartner(“2013 Gartner Tablet Forecasts”). For the first time since 2001, in 2012 PC sales were projected to be lower than they were in the previous year. Before responsive design came in, the solution was to create a mobile version of your site, but the solution is useless when you have a large number of available screen sizes- you cannot keep creating a website version to accommodate each of the devices.

To make a website consistent across all devices, it is better to have a single responsive stylesheet than having its separate mobile and desktop versions. Not only does it help them keep costs down, but it also ensures that their websites will be compatible with the recent and future trends.

2013 is being dubbed as the year of responsive web design. Responsive designs solve the problem of making a website work for the endless number of new devices and resolutions being used to access the web.

In words of Jody Resnick, CEO of Trighton Interactive – “With a responsive website, businesses can be in front of consumers at every step of their online journey. People who search for a business’ site, begin reading content and viewing videos from their desktop computers at work, and then look for the same business on their smartphones during lunch are able to continue their research into products and services uninterrupted.

“In contrast, if the business has a traditional website and a mobile site, someone investigating products and services online can become frustrated by the lack of complete content on the mobile site or the inability to navigate through the full site on her smartphone. She might give up the search altogether,” Resnick warns.

“Responsive websites provide continuity between different viewing contexts, remaining completely agnostic to the type of device used and the size of the screen it has. What this means is that the same website will present an optimized layout regardless of which device it finds itself being loaded in.”

Responsive websites simplify internet marketing and SEO. Instead of having to develop and manage content for multiple websites, businesses with responsive sites can take a unified approach to content management because they have only the one responsive site to manage. The same applies to analytics and strategy development and deployment. A responsive website means there is only one set of analytics to examine and a single strategy to develop and deploy.

“In addition, responsive websites are easier for consumers to find than traditional or mobile sites because they come up higher in search engines’ rankings,” explains Resnick. “In fact, Google recommends responsive web design because having a single URL for desktop and mobile sites makes it easier for Google to discover content and for Google’s algorithms to assign indexing properties to content.”

Framework and technologies

CSS3 media queries :

CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print. Style sheets with media queries attached to their <link> tags will still download even if their media queries would return false (they will not apply, however).

Example : < Another blog on this >

Media queries do more than just define different font sizes. Often, you will actually move entire sections of the page depending on the available screen real estate. For example, using a three-column layout might look good on a laptop screen, but it won’t work on a small device like a smartphone. In this case, you might want to move one or more columns or elements on the page to adjust to the available space

Frameworks : Using an existing framework reduces the initial work as they promote grid based design and deal with cross browser compatibility issues. Such frameworks cover all bases and you do not need to start from scratch. It ensures you have the responsive grids setup in a standard and best practice fashion, which saves your time for coding and testing. It further allows you to focus on the specific design and content needs for the website.[http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html ]

The trend now seems to be either creating custom fit for purpose responsive layouts or using Twitter Bootstrap

Twitter Bootstrap : http://twitter.github.io/bootstrap/

12 column responsive grid
endless components: Dropdowns, buttons, button groups, button dropdowns, thumbnails, typography, media objects progress bars, alerts and many more,
JavaScript tool-kit or individual plugins
download customization to take only the most important

Helium is a frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3. In many ways it is similar to both Twitter Bootstrap and ZURB Foundation but is designed to be much more lightweight and easier to play with.

Other frameworks:

Responsive Grid system
Foundation 3
Less Framework 4
Titan framework
Gumby

Additional Libraries: These libraries can enhance the look and feel of your responsive website.

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.
Scrolldeck.js
impress.js is useful for good transitions between the grids
Bootstrap.js
fittext.js is a jQuery plugin that allows text to scale according to the device it’s being viewed on.
lettering.js makes letters fit properly in a container of given size and gives more control over typography.

Deciding the type of responsive layout according to site’s existing content and its presentation is the initial step towards building a responsive design.

The ultimate key is to keep it simple, in the early stages of Responsive website development – making only fluid text and images and once the basic design is done find the specific points where you can improve the media queries and implement the above said options.

Testing Responsive Design

Web developer tools

(Firebug and chrome developer tools extension) : Using this you can not only alter the screen sizes, but also can configure the browser to emulate as ‘handheld’ media , ‘print’ media etc.

Using testing frameworks

Matt Kersley developed one of the most popular responsive design testing tools on the web. http://mattkersley.com/responsive/
http://www.studiopress.com/responsive/
Wirefy is a reponsive testing framework which requires a basic knowledge of HTML and css to fully utilise its potential. Simple and elegant in its presentation, Wirefy lets you plan and structure your content and to build the plan of your responsive site.

Use different physical devices to test : One major problem will be to do the testing while you are still in your development stage on your localhost. One possible solution could be making an Ad hoc-connection from your laptop and connecting the various physical devices to that network.

RESPONSIVE DESIGN IMPLEMENTED:

BOSTON GLOBAL : Largest responsive website to date. It does a wonderful job of presenting an extremely rich and varied collection of data in a clean, pleasant and consumable format across devices.

SMASHING MAGAZINE : The website expands beautifully on maximizing and adjusts the content accordingly.

FOOD SENSE: Clean looks, use of bold and big fonts, easier to navigate and pleasant to the eyes .

New Adventures in Web Design

Challenges:

With responsive design the HTML is the same for every visiting device and each time a page loads on mobile it also loads all of the HTML elements including images & scripts intended for the tablet and desktop sites. Every time a user visits your site they download the full page content by default – no matter which device they are using.

The kind of CSS we use should ensure that the information which is more relevant should be more easily accessible to the user.

These challenges are addressed in the article http://socialdriver.com/2013/06/10-tips-for-web-designers-designing-responsive-websites/. Establishing a good content hierarchy and CSS optimization with tools like Sass can help.

Good Tutorials

http://www.onextrapixel.com/2011/09/12/create-a-responsive-web-design-template/

http://socialdriver.com/2012/06/a-responsive-web-design-tutorial-for-beginners/

http://www.jannahagan.com/2012/05/responsive-web-design-resources-for-absolute-beginners/