June 23, 2015

What is Responsive Web Design? Part 2

More and more companies are recognizing the importance of having a website that not only works on desktop computers, but one that loads properly on mobile devices as well. Eighty percent of internet users own a smartphone, and more than a billion people access the internet primarily from their mobile devices.

More and more companies are recognizing the importance of having a website that not only works on desktop computers, but one that loads properly on mobile devices as well.Eighty percent of internet users own a smartphone, and more than a billion people access the internet primarily from their mobile devices. Having a website that’s optimized for smartphones and tablets allows you to reach the widest audience possible –no need to exclude someone simply because they’re on a mobile device.While there are a few different ways to design your website so that it’s compatible for both desktop and mobile users, not all options are ideal.Let’s look at the three main options when it comes to website design, and see some of the benefits of responsive design.

Pinch and Zoom

The pinch and zoom option is where the user views a full-sized page on their mobile devices, but it requires the user to resize the page with the pinch and zoom feature. The pinch and zoom feature renders a full-page site in a mobile phone and requires the user to pinch and zoom to view parts on the page.[caption id="attachment_181" align="alignnone" width="401"]

Here’s an example of a website as it appears on a mobile.

Here’s an example of a website as it appears on a mobile.[/caption][caption id="attachment_182" align="alignnone" width="1024"]

Using the pinch and zoom feature allows you to navigate the site, but it’s not an optimal browsing experience.

Using the pinch and zoom feature allows you to navigate the site, but it’s not an optimal browsing experience.[/caption]

Mobile Version

The second option is to create a second version of a website. This is a specific website that is designed for mobile users. It is considered to be the ‘dumbed-down’ version that works on mobile phones. The catch is that some elements must be hidden or removed in order for it to be rendered on mobile devices.

Responsive Design

Responsive design optimizes content for both desktops and mobile devices. Responsive design allows viewers to see content across all different browser sizes –everything from portrait and landscape view on an iPhone, to different views on iPads and desktops, all with one design. Here are a few benefits of responsive design.

How to Test a Site to See If It is Responsive

Think responsive web design doesn’t matter? Think again! Here’s how you can test a website to see if it’s responsive. View a site on a desktop computer with the browser opened to full width and height. Then click and drag one of the corners of the browser window to a different width. You will see the text blocks, images areas, and navigational menus adjust on the fly.

Scaling a website to see if it’s responsive.[caption id="attachment_184" align="alignnone" width="800"]

Here’s an example of how a responsive design website appears in a standard browser.

Here’s an example of how a responsive design website appears in a standard browser.[/caption][caption id="attachment_185" align="alignnone" width="171"]

Now, that same website as seen on a mobile device.

Now, that same website as seen on a mobile device.[/caption]With mobile users on the rise, it makes sense to enable your site for smartphones and tablets. Responsive web design allows you to ensure that you’re reaching everyone –no matter which device they’re on.At Town Web Design, we specialize in website design for municipalities. We offer our clients responsive web design. To learn more about responsive design, contact us today.Image: European Parliament

Town Web services are approved for use with ARPA funds!