If you work in the digital industry you’ll most likely have heard of concept called responsive web design. If not, then this article will dispel any questions you may have about the value of responsive website design (RWD) and why RWD is set to become the next big trend in website design.
Responsive web design is a screen layout concept which focusses around delivering more usable and device friendly website solutions to the user via a single design. Instead of creating a separate mobile friendly website and then having a standard website design for desktop and laptop computers, a responsive website design takes note of the available screen space and provides you with the best possible (as determined by the website creator) website design per your device and browser width.
How do I know if I’m viewing a responsive web design?
An indication that you’re browsing a responsive website design can be seen if you resize the browser window you’re using and the content either changes shape to fit the screen, or elements of the website either disappear, or change their display format to give you the best possible view.
Recently you may have noticed that Job Stock converted our website to a responsive web design handling an array of popular screen sizes to suit devices such as smart phones, tablets and laptop and desktop computers with various higher resolution display capabilities. Because available screen spaces can range anywhere from 320px wide for say an iPhone, to well over 2000px wide for a retina ready desktop with a high powered graphics card, web developers have a fantastic opportunity to deliver highly usable website content that you don’t necessarily have to zoom in on to read on a mobile device like a smartphone. Using responsive web design principles, you can deliver extra content to a user you may not necessarily have been able to deliver in the past when using a typical 960px grid system which has been the trend for some time now.
How does responsive web design work?
Responsive web design primarily uses CSS3 media queries to process the “on-the-fly” visual capabilities of the concept. The first thing to note here is that responsive web design will only work in the later versions of modern browsers, most prominently Internet Explorer 9 and above, and Google Chrome and Firefox which all support CSS3. In the case of Internet Explorer 8 and below, you will need to take into consideration using an “IE specific” CSS file which handles the lesser capabilities of these older versions of the browser.
CSS3 media queries in a nutshell allow developers to make changes to screen layouts when a certain CSS condition is met. For example, if we wanted to change the font size of a H1 title tag style when the available screen space is less than or equal to 768px wide, your CSS code may look something like this:
font-size:24px;
color:#333;
}
@media(max-width:768px){
H1{
font-size:18px;
}
}
The above example will simply change the font size from 24px to 18px when the browser viewport is 768px in width or less. Any other time, and you’re H1 tag will be 24px in size. Easy right?
Why responsive web design?
In the coming 12 months tablet sales for the first time are expected to exceed that of 100 million sales globally, meaning that if you’re website is difficult to browse for mobile users, and does not deliver a positive user experience, your user’s time on site is likely to drop, and bounce rates are highly likely to rise. What does this ean for you, well that’s pretty easy…bad business.
In addition to the global tablet sales projections, PC sales projections for the coming year indicate that for the first time since 2001, we will actually see a decline in the number of PC’s sold when compared to that of the previous year. With this in mind, now more than ever it’s incredibly important to deliver content via the browser which is device ready. Not just an app or a website, but a multi-device and platform capable solution.
What if I want to develop an app?
No problem, go right ahead…but remember that a mobile application is a completely separate project to a website. If you have a website to accompany your mobile app (which most app builders do), then choose your content wisely. It is recommended that if you’re trying to drive users to a website to provide additional support or more information than your app page provides, then you develop a single accompanying website that is mobile friendly, search engine friendly, and supportive of your mobile application, rather than building a website which provides more information on a mobile app which a user can only really enjoy on a PC?
Even worse, you build a completely separate mobile website as well as a standard desktop version which requires twice the maintenance. It just doesn’t make sense?
Conclusion
For the last few years many organizations have struggled strategically with the notion of whether to build a mobile friendly website alongside a standard website, just build a standard website, or maybe even just an app? With responsive web design becoming more and more common practice amongst media outlets and creative individuals, RWD really ticks a lot of boxes for organizations. If you want to improve affordability, ease of maintenance, take into account more consideration of browsers and devices, and improve user experience, then responsive web design is the way to go.
With only positive feedback received thus far regarding our responsive web design, and having had only solid experiences using other responsive websites, I can strongly recommend considering this concept for your next website project.
The post Responsive Web Design – The Next Trend in Web Design appeared first on .