responsive website image

Mobile Websites For All Devices

“All of my websites are mobile friendly ‘responsive’ sites. To create them any other way would be a disservice to my customers.”
– Adam Cooper, MCP

Many millions of people are now accessing websites every day via their mobile device. Regular desktop websites are designed for exactly that, desktop monitors, they are not designed to be viewed on smartphones.

For this reason, most ’regular’ websites are incredibly difficult to navigate from the relatively tiny screens that mobile devices come equipped with.

Kitchener Waterloo responsive website designBrowsing a desktop website on a smartphone or tablet can be incredibly frustrating and more often than not leads to the customer simply giving up after finding it incredibly difficult to find the information they need.

A mobile ‘responsive’ website delivers a customized layout that is optimized for the size of the particular mobile device that the site visitor is using, making it very easy for them to find the critical information they are after and leaving them with an enjoyable browsing experience. This makes you look good.

Critical information such as phone number, email, location etc are presented clearly to the user without forcing them to zoom and scroll around the regular full-size version of the site.

How Do Responsive Websites Work?

Prior to the need for responsive functionality. websites were created to set dimensions (in pixels) in order to display as required on a desktop computer. The monitor resolutions may have varied but the general shape of the site would stay the same.

A 500 pixel wide left column would always be a 500 pixel wide column regardless of what type of device was being used to view it. If the dimensions of the site meant that, on lower resolution screens, portions of it would display off-screen and horizontal scrolling was required to view it, then so be it. Most websites however were sized to fit nicely into the average users desktop monitor.

With the massive popularity of smartphones and tablets, came the need to drastically change how websites would display on these devices. The standard 4:3 and 16:9 screen ratio monitors that sites were commonly displayed on were now no longer the norm.

Kitchener Waterloo mobile website designWebsites were now needing being displayed on small handheld devices that could be held in either portrait or landscape mode (vertically or horizontally). These devices could be small phones with a screen width of only 400 pixels, or tablets that were maybe 1200 pixels wide. Again, these tablets could be held in portrait or landscape mode.

Phones came in an ever increasing range of sizes and resolutions as did the tablets and laptops, all of which that were rapidly overtaking desktops when it came to their use as a portal to the internet.

Along with these new requirements, websites still needed to be perfectly usable on desktop computers. Something had to change. This is where ‘responsive’ layouts came in.

Websites created with a responsive layout implement a a fluid grid layout that uses percentages of viewable space in place of absolute dimensions. Images are set to be flexible and are also sized in a relative way so that they never ‘break’ the site by displaying outside of their container.

‘Media queries’ are used in conjunction with the main layout to set rules and percentages based on whatever particular device is being used to view the site. These media queries allow for differing layouts to be enacted even when the device is switched from landscape to portrait mode.

This fluid concept basically allows a single site to automatically morph itself into differing sizes and layouts while generally retaining the same content. The result is one site that works across all devices.

All of my websites are designed using responsive concepts and technology and will display correctly on all mobile devices and desktop computers.

Don’t let your customers go elsewhere because you haven’t catered to their mobile needs.

Get your mobile site now!