Responsive Design Versus Mobile Redirect
Today, I wanted to tackle a fairly controversial topic, and one that can be a very important factor in your web design. With the prevalence of mobile devices that are able to navigate the web, the pressure is on for designers to make sites that are compatible with a huge number of devices. The two options available for a website to expand to these potential users is to have a responsive layout versus code to redirect these users to a custom-designed mobile site.
Responsive
A responsive site is one that uses percentages and specific layout configurations to make a full size website scale, resize, rearrange, or otherwise change based on the size of the browser window. This can be simulated on a desktop by using the mouse to drag the corner of your web browser in and out to see how the elements move around. Some of the benefits of this design style are a one-size-fits-all page that is going to be usable on almost any device. Load times can be somewhat quicker since the device is not pulling another mobile-specific site. Also, making changes to the website is quicker since it automatically encompasses this branch, instead of updating a mobile page too. The drawbacks are mainly design-based; while the website may look fantastic on a full-size desktop browser, some concessions always have to be made to make the same page ‘work’ for a smartphone or other mobile device, and in many cases, content can be lost in order to accommodate all users. Customers also typically don’t have the option to see the full size website.
Mobile Redirect
A mobile redirect website is a completely separate website from the main site, typically containing the same information but on a mobile-optimized platform. Using a platform such as Jquery Mobile, the mobile redirect site is designed to be fully responsive to all devices and browsers. Code is inserted onto the homepage of the site which automatically directs mobile browsers to the mobile site. Some benefits of a mobile redirect page are that mobile-specific code can be utilized; buttons can be set up to directly dial a phone number instead of navigate to another page. For customers that would rather see the full website on their mobile browsers, links can be created to bypass the homepage redirect code, taking them directly to the full website. Also, since all the content on the mobile redirect page is intended for mobile devices, you have much more freedom design-wise between this page and your main website, so that neither is trying to do ‘too much’. Some drawbacks are that there is more data to load, since the mobile browser has to partially load the main page then fully load the mobile page; also all updates have to be done twice. In my experience, we tend to recommend mobile redirect websites in most customer circumstances based on end-user experience and design quality at the point of contact. This gives our clients the most versatility and options for their specific needs.
Keep up with us at Ink and Link Creative with more useful articles to help you navigate the net; www.inklinkcreative.com
By utilizing these best design practices, you can ensure that your website will be easily viewable and accessible to many users.
Connect With Us