It seems to be the craze right now. Websites, email templates, mobile sites – they are all mobile responsive. What is a mobile responsive website? And why should we have one?
Traditionally, web designers only have desktop browsers to be concerned about. So websites are designed predominantly for desktop browsers with wide resolutions. However, in today’s world, we use a wide variety of devices to surf the Internet. We have desktops, laptops, tablets, and smartphones. To make things worse, mobile devices come in different sizes – 4.5 inch, 6 inches, 7 inches and so on. So how should a web design set the width of the website?
If the width is set too wide, the site might not fit into a smartphone browser. If the width is set too narrow, the site may not look nice on a desktop browser. So web designers have to come up with a way to make the site fit into different sized devices.
One way to do this, is to use a different version for each device type. For example, if a desktop user comes to the website, he will see the wide version. And if a mobile user visits the site, he will see a narrow version. This solution works great if there is a lot of functionality built into the main site that can be easily ported over to the mobile version. So in this situation, a separate mobile site would be ideal.
If you are using WordPress, you can download and install a mobile switcher. The switcher detects the browser of the visitor and then redirects the user to the appropriate version. A separate theme (for mobile) will need to be installed for the mobile version.
Unfortunately, this approach has its own drawbacks. Additional time and resources need to be allocated to developing and maintaining a separate website. So for smaller businesses, this may not be a cost-effective approach.
Smart web designers immediately recognized that this is a essentially a browser “width” setting issue. So if the website has a fluid width, it will be able to respond to the different browser widths. A website that has fluid widths that fits nicely into different browsers is known as a mobile responsive site.
You can easily see if a site is mobile responsive by adjusting the width of your browser. Usually, traditional sites have fixed widths. So if you narrow the width, a portion of the website will be “cut off”. But if the site is a mobile responsive one, it will adjust the content automatically to fit into the new width. The site will adjust itself automatically even when the orientation of the device is changed. For example, the site will fit nicely into both the portrait and landscape widths.
You can imagine the amount of time this can save for the web designer. One version fits all devices. So the designer only have to come up with one template and the site will have a consistent look across all devices. Problem solved!
Is it difficult to create a mobile responsive site then?
There are two common approaches.
First, all the major web design software are evolving to allow users to create mobile responsive websites. In other words, designers can export themes and templates that are mobile responsive using their favorite tools.
Second, for those who prefer to hand-code sites, there are public frameworks (available for free) that help designers to create mobile responsive themes quickly and easily. Foundation1 is a well documented framework that is available for download. With the help of frameworks, web designers can create sites a lot quicker.
Is your website mobile responsive?
If it’s not, perhaps it’s time to consider converting the site to a mobile responsive site to capture the attention of mobile visitors.
Foundation – http://foundation.zurb.com/ ↩