The web landscape has changed by leaps and bounds. Its constant evolution is a matter of pride and yet, the source of consternation for website designers. The numbers of means through which a website can be accessed have multiplied. From large screen computers to portable screens and from tablets to smartphones – users’ access websites on the go and it is important to deliver a sound web experience irrespective of which device the user chooses. The solution to the problem of website fluidity is Responsive Web Design that allows website designers to create multiple website templates and web page design options which are designed to respond to any screen size.
In the Beginning
So what exactly is Responsive Web Design? It all began with an article titled ‘Responsive Web Design’ written by Ethan Marcotte on A List Apart. In this article, Marcotte brought forward quite a few interesting points and ideas. He proposed battling the problems of meeting the needs of a never ending list of devices by creating adaptive websites which flexible and fluid with website templates, mobile web templates and more. Instead of working from the top down, he proposed working from the bottom up. Every brand has to deal with two things – creating a web page design that adapts to the most common screen resolution and how to design a mobile website that will be compatible with at least one, preferably more, mobile devices. Instead of creating multiple versions, responsive web design suggests the use of templates and layouts that are flexible and fluid enough to adhere to the needs of almost any screen size.
In order to understand why responsive web design using HTML5 and CSS3 is fast becoming the de facto standard in the worlds of mobile and web page design, it is important to understand the core concepts behind it.
- Responsive Web Design is basically the design of a website that is flexible and fluid in responding to any device that accesses it.
- HTML5 is the fifth revision of the indispensable HyperText Markup Language. HTML is the core language that is used to display content on the World Wide Web. It includes multiple components catering to graphics, multimedia, real-time, communication, file and hardware access, offline work, storage, semantics, and markup.
- CSS3 is the latest implementation of HTML5 and it is primed to enable the most responsive markup. Not using CSS3 and HTML5 to create responsive web design is akin to building a ship in the 21st Century but using wood as the building material!
Responsive web design templates allow you to adapt to the user’s needs and their device capabilities. In today’s fast paced world, the need for seamless and satisfying user web experiences cannot be undermined. For example, there are many web design examples that are clean, clear and confident but if this does not translate to an equally efficient mobile website design, you will be disappointing an incredibly large number of smartphone and small tablet users. Keeping in mind mobile device users, you may want to make changes to the mobile version of your website by changing fonts, adding or removing interaction areas and more. In the past, this would have necessitated the creation of several complete versions of the website. Responsive web design templates solve this problem and save plenty of money and time too!
One of the reasons why responsive web design is gaining popularity is that it is centered on these three core technical features:
- Use of media queries and media query listeners to find out the resolution of the accessing device
- Relative sizing through the use of a flexible and fluid grid-based layout
- Dynamic resizing of flexible media like images
With the foundation of these three core features, responsive web design allows you to develop different templates for the same website. The responsive web design templates need not just be device specific (created for large screens, computers, tablets, smartphones, etc.), they can also be orientation specific because you will have a broader area to work with in the horizontal orientation as compared to vertical orientation.
Depending on the device that the customer is using and the specific orientation of that device, a different template will be displayed. Creating a responsive web design using HTML5 allows you to access added functionalities like sliding which will help you recreate an app-like experience. A site that looks like an app has an added advantage of concentrating all transactions within the site. This means you will not need to go through the additional step of accessing an App store. Responsive web design with HTML5 is undoubtedly a smart combination and the increase in its popularity ought to be expected.
Types of Templates
Responsive web design with HTML5 is a popular option because it allows for the development of many different types of template. In fact, the sky is the limit, you can design as many responsive web design templates as you like. It is just a matter of creating one back-end and using CSS to design templates that meet the needs of all devices.
For example, you could develop these types of templates:
- Smartphone vertical orientation display with one small column
- Smartphone horizontal orientation display with one medium column
- Tablet vertical orientation display with one large column
- Tablet horizontal orientation display with two columns
- Regular sized computer screen display with 3 columns
- Large screen displays with 4 or more columns
Responsive web design is primed to be a winner because maintaining several versions of one website – mobile, desktop, tablet and maybe even TV, is cumbersome and too expensive in the long run. Websites like Mashable, British America Household Staffing, Evolve, Designed to Move, Fhoke, Digital Atelier, and Financial Times are a few of the examples of sites that have embraced the future with responsive web design. Are you still trying to develop and maintain desktop websites and mobile apps? Responsive web design and HTML5 offer you a single platform that will work equally well on every device. 2013 is the year for intuitive innovation – it’s the year for Responsive Web Design.