By Amy Hood
01/16/2014
Tutorials

What is a responsive website?

Heading graphic of explaining what a responsive website is

What the hell is responsive design?

Without getting too technical, a responsive website detects the device you’re using, be it a smartphone, a tablet, a laptop or a giant desktop computer, and resizes itself to best fit that screen. Responsive websites are built in such a way that the scale and layout of the website elements can easily adjust, reformat, and even resize, according to the size of the screen accessing it. Users who view the site on large desktop monitors will see the site one way, while users who view the site on mobile device screens will see it another way – but no matter which device they use, it will be optimized for easy navigation and readability. This is important because the increase in mobile web browsing has brought a wide variety of screens into play over the past few years. On larger screens, websites can display large quantities of text, detailed navigation menus, multiple distinct text columns and sidebars, and a variety of images. But try cramming all of that onto a mobile phone screen; The text won’t be readable, the navigation buttons will be too small to see or push, and the columns will be too narrow. Responsive design solves this problem.

How it works:

Responsive websites reformat to fit the screen sizes of virtually every device on the market today. You can see this in action by visiting a responsive website such as, well, our website! You can manually resize the window of your web browser by clicking and dragging the corner of your browser window to make it smaller or larger. Watch how the appearance of the website changes. If you’re viewing this on a computer monitor, you’ll notice that the layout and overall scale of the website reformats and reorganize as you shrink the window width smaller and smaller. The columns of text and images become smaller as you make the browser window smaller; and once you downsize the window to about the size of a smartphone screen the sidebar becomes stacked below the main images and text boxes and the navigation bar becomes a drop down menu to take into account that users on this screen size are most likely viewing on their phones and using their fingers for navigation. Other great responsive sites are www.ironandair.com and www.barackobama.com.

Why responsive design is important:

The presence of mobile web browsing is at an all time high. Reports show that nearly 50% of mobile subscribers use their phones and/or tablets to access the internet. Mobile web browsing is predicted to surpass desktop web browsing by the year 2015. Responsive design may be one of the most important aspects of your website, especially with the increase in mobile web users. If you want to make your website accessible and optimized to the greatest number of possible visitors (and potential clients), it needs to fit all screen sizes. Responsive design is the most efficient and effective way to accomplish this. So, what is a responsive website? The website to rule all devices. Check out the infographic below for some interesting stats on the fast rising number of different screens and why responsive design is important.

Responsive websites explained in a strip of info