Premium Themes at your Fingertips!
 
Home / Blog / Responsive Web Design – an Emerging Design Trend for 2013
Responsive Web Design

Responsive Web Design – an Emerging Design Trend for 2013

Responsive web design is by far one of the most emerging and discussed topic in the web design community. It is meant to define a similar visual representation of a web page and to facilitate web browsing across a broad range of screen sizes.

So, what actually responsive web design is?

It is the design that fits ideally and looks accordingly on a wide range of screen resolutions (from desktop computers to laptops, tablets, smartphones, etc.). The content of the responsive layout is adjusted, rearranged and resized according to specific resolutions. It offers a great user experience of a web page on every screen size, providing “one website for many screens”.

Where it came from?

Responsive web design became very prominent when the mobile devices market and mobile web browsing met a tremendous popularity. The use of Internet is shifting fast to mobile devices, consequently websites are accessed via a lot more screen resolutions than before. According to recent statistics mobile browser usage increased to 14,55 % of all web activity, it is expected that in 2013 tablets will outsell notebooks for the first time ever and the total number of smartphones in use is 1,03 billion (Impressive, isn’t it? It’s around 15 % of World’s population). It is just a matter of time when mobile activity on web will surpass desktop Internet usage. Responsive design is the future of web browsing as users are switching to mobile environment and publishers are willing to reach their audience across all possible devices.

Mobile Devices

How it’s implemented?

Responsive design is rather a set of techniques than a single directive. It is mainly related to the usage of Fluid Grids: a frame system that uses percents for column widths, in this way the elements of the fluid grid layout are adjusting according to certain resolutions; and CSS3 media queries: that are used for applying custom CSS styles for different resolutions, thus manipulating and changing the layout and its content accordingly. In other words, these techniques are used to detect users’ devices, resolutions and output the most appropriate design for them, providing a positive browsing experience and a beautiful visual representation of the site.

Fluid Grids

What are the advantages of responsive web design?

The advantages of responsive web design are obvious:
1) The website adjusts perfectly to different screen resolutions and looks great on all PCs and mobile devices
2) It offers a great usability and positive user experience to all visitors, regardless of their device
3) The URL of the website remains unique, so all the marketing efforts can be consolidated to promote it
4) It is a good SEO practice, Google recommends responsive web design, as it solves the duplicate content issue, consolidates the rankings for mobile search and link building efforts
5) Having a responsive website means an unified analytics and reporting activity for it, facilitating the tracking activity
6) Better conversion rates and sales, as it eliminates the deviations of conversion paths and performances
7) And much more..

How to see if a website is responsive?

Just resize your web browser and you’ll see how the layout of the site is adjusting while you are minimizing the browser size. It’s that simple! If the elements of the design are not changing their position or scale: the site is not responsive.

Give it a try, run the live demo of this Responsive WordPress Theme and resize your web browser to see the amazing effects. Click on the image below to see it in action.

AXA WordPress Theme

You can also see how a website will look like on different screen resolutions, using built in features of web browsers or additional extensions. Most of modern web browsers have implemented a responsive view feature. Here is how you can access it on major browsers:

Chrome: Open the Chrome Console (press F12 on your keyword), click the “Settings” icon in the bottom-right corner, select “Overrides” option. Chrome offers a powerful set of options to emulate the site appearance, you can select different user agents, screen resolutions and even simulate touch events for a website.

Firefox:  go to “Web Developer” -> “Responsive Design View” – select the resolution you want, or rotate it to see the effects. Very simple to use and intuitive feature (our choice indeed :) ), still an essential one.

Internet Explorer: Open the Console (press F12 on your keyword), access “Tools” -> “Resize” select from the list of resolutions or set up custom ones. Note: IE 8 and older versions doesn’t support CSS media queries, so you’ll be able to see a responsive design only starting with IE 9 version.

DID YOU KNOW THAT?

* The term “Responsive Web Design” was mentioned for the 1st time almost 3 years ago by Ethan Marcotte, in an article describing the theory of responsive design.

* Responsive Design was named the 2nd Web Design Trend for 2012 by .net magazine after progressive enhancement.

* Mashable called 2013 the Year of Responsive Web Design. Note: Currently, 30% of Mashable’s traffic is mobile. By the end of 2013, it may exceed 50%.

12 RESPONSES TO Responsive Web Design – an Emerging Design Trend for 2013
Garret March 15, 2013 Reply

Very nicely structured post. Interesting what this year’s trend will be. I’d say flat design…

    Winithemes March 15, 2013 Reply

    Thanks Garet, we’ll keep an eye on the latest web design trends and let you know, stay in touch!

Dave March 15, 2013 Reply

Great article, responsive design is a “must-have” these days, I think the future of web will be focused on mobile devices.

    Winithemes March 15, 2013 Reply

    Hi Dave, it’s an irreversible process and is just a matter of time :) Regards!

Anatolii March 15, 2013 Reply

Nice article ! As i noticed Axa theme has a good responsive layout since it’s based on twitter bootstrap , which I also use and recommend in development.

    Winithemes March 18, 2013 Reply

    Thanks Anatolii, you have a good spirit of observation, it really is based on bootstrap (another good topic to cover) ;)

Francesco Cirrincione March 15, 2013 Reply

Nice. My current website is not responsive, is there a possibility to make it? Can you recommend a good developer? Thanks indeed

Mike March 22, 2013 Reply

Any good place for a hotel theme that is responsive?

Torstein April 18, 2013 Reply

Your blog post gives a good and quick introduction to responsive designs, but I’m going to be a bit of an ass here.

You do present what responsive sites are, and the industry’s hopes. But there is as of yet a lack of actual empirical data to back up the advantages you present.

“It offers a great usability and positive user experience to all visitors, regardless of their device” This isn’t necessarily true. I’ve heard people talk about how they want the desktop version of websites because they are intimately familiar with the full version of the interface. (this includes both old and young users).

“Better conversion rates and sales, as it eliminates the deviations of conversion paths and performances” Isn’t this only true if the responsive levels are all well designed and consistent? Do you have any data backing it up (I’d be very interested)?

“Having a responsive website means an unified analytics and reporting activity for it, facilitating the tracking activity” Doesn’t this actually complicate the gathering of analytics data, since you don’t have explicitly different versions for different devices? I mean, in responsive designs (today at least) you would serve the same version to a desktop user who has changed the browser size as you would to a phone user. How do you take this into account when collecting and analysing data?

We’re both in an industry who has moved away from empirical studies (HCI and usability) and towards “gut feeling” (Ux). While gut feeling is often a good metric it does not prove things, neither is it without its faults.

Leave a comment