A ‘mobile website’ is created in addition to a pre-existing website. After detecting that it is being accessed via a mobile browser, the existing website will automatically redirect to the mobile version. Mobile versions of websites are designed specifically for mobile devices and will look the same on whatever mobile device they are being viewed on, i.e., mobile phones, tablets, iPods, etc.
Generally speaking, they are a cut down, simplistic version of the ‘desktop’ site, with the content usually being limited to the bare essentials. This can be quite frustrating for viewers when they are searching for a specific page or product on a website, only to discover that it is in a completely different place, or not there at all.
Not only is the content simplified on mobile websites, the visual elements of the design layout are also stripped back dramatically. In fact, the imagery and company branding on a website are almost completely removed, except for a few key colours and a business logo. This may assist in load times, but it detracts from the aesthetic appeal of a website, which is often its main selling point.
Because a mobile version of a website is separate to the desktop version, it also has to be updated separately. This can cause some issues when updating content; every time that content needs to be changed, it needs to be changed on two websites rather than one. This can not only become a quite tedious process, it can also have quite a negative impact on the main website’s search engine optimisation.
In contrast, a ‘responsive’ website is a single site that adapts or ‘responds’ to the size of the screen that it is being viewed on. It is specifically coded so that the key elements of the layout change and adapt to perfectly suit whatever device the website is being viewed on. This works the same from a large widescreen monitor, a laptop, notebook, tablet, or phone. With a responsive website, there is no detrimental impact to the design layout when it is being visited from a mobile device, and no loss of content. Because it is a single website, all navigational aspects stay the same across all devices. This ensures that viewers always maintain their feeling of familiarity with the site, no matter how they are viewing it.
An excellent example of a responsive website is the Auldington Hotel site. When viewing the site, use your cursor to click and drag the side of the web browser’s frame, shrinking the viewport. Notice how the content shifts and adapts, and the images scale down, so that the design always looks amazing? Also, as you can see, no matter what random size you make the viewport, the website retains its core design elements and branding. This means that the site is not only coded to suit all existing computers and mobile devices, but also any future ones that will enter the market.
With a responsive website, gone are the days of scrolling left or right when viewing it from a computer, or pinching and zooming on a mobile device.
Furthermore, because it is a single site, all search engine optimisation is consolidated with a responsive website. The risk of accidentally putting different content on two versions of a website is eliminated.