unit36

Mobile Site vs. Responsive Design

Forget UFC! Check Out DFC: Mobile Site vs. Responsive Design
Ladies and gentlemen, welcome to Digital Fighting Championship
Tonight’s main event we have two courageous fighters.

Both a mobile site and responsive web design will optimize your site to be more appropriate for smaller screens; both will offer simpler navigation and faster load times.

In the blue corner – A mobile site is essentially a copy of your website, where the server does the work to deliver an optimized page that’s smaller and easier to navigate. The solution can really customize a unique experience for mobile users.

In the red corner – In responsive design, the device does the work and automatically adjusts according to a device’s screen size (large or small) and orientation (landscape or portrait). It switches between these options on-the-fly.

Responsive – A very good and flexible solution. Mobile site – A good choice when it might be too expensive to redesign responsively.

Which one will win the battle? Let’s look at the fighter stats to begin with :

Responsive Web Design – Fight Stats

Responsive web design allows you to have a single website that automatically fits the screen size of the device on which it is being viewed. This is achieved by adapting the content, design, navigation and method of interaction to deliver the same comfort and usability to the mobile user as to the desktop user.

This means that you have just one website that looks equally well on all types of devices.

Total Wins

Total Losses

Mobile Site – Fight Stats

A mobile website is designed specifically for mobile devices considering all the limitations and opportunities of the platform. While developing a mobile website you should keep in mind the small screen size, interaction methods (touch) and limited connection speed (2G/3G). Content must be easily accessible, fast-loading and readable. As there are a bunch of mobile devices with different screen sizes and interaction types, it is impossible to create a website per device type. So even your mobile website has to be a little responsive to fit every screen.

There are also a few principles to follow when developing a mobile website, like organizing your content into one column layout for a more ergonomic user interface.

Total Wins

Total Losses

The Referee – SEO

Tonight’s referee is called Search Engine Optimisation – many have accused the ref of being slightly biased towards responsive design but this is simply not true.

There is a widespread belief that Google wants everyone to use responsive design and that Google will list responsive websites above mobile ones. This is not true. Google actually said it prefers responsive design if it is better for the user and if it suits you and your infrastructure better. It also said it is perfectly happy to see and index mobile sites. It has never said that responsive designs will be listed above mobile sites.

Experienced search marketing consultants will tell you what Google says you should do does not always match what Google rewards. My research reveals Google is listing mainly mobile sites in mobile search, not responsive designs. The Google mobile database uses different ranking rules from the main system. For example, Google has stated that it considers speed much more important for ranking sites in mobile search than for the main database. This is perfectly logical, as speed is more of an issue for mobile users than for desktop users. While Google might prefer responsive designs, sites still need to meet the criteria Google wants for mobile users. In practice, mobile sites are meeting Google’s requirements much more than responsive designs. Perhaps as a result, having a mobile site is strongly correlated with having a high listing in Google mobile search.

Ding Ding, Round One – Domain Protection

Mobile

Responsive

Link Equity

Mobile

Responsive

Design

Responsive design is much more complicated than traditional design or building dedicated mobile sites. Navigation can also be an issue in responsive design. Pop-out navigation tabs can be a problem because they might be too big for a mobile screen. Such designs often have their functions locked to very specific sizes, which means it’s impossible to resize them so they work for smaller screens.

Responsive design usually requires a complete redesign of the main site from the ground up. Designing and coding responsive design is much more complex than simply building two different sites. As a result, responsive design is much more expensive if you want the guarantee of a good mobile user experience. If you are happy to accept lower performance for mobiles, it might be cheaper than building a mobile site, but even that is not guaranteed.

Conversion rates

Mobile sites perform better in terms of sales. Typically mobile sites have conversion rates three times better than those using responsive design. This is because mobile sites are almost always faster and better designed for small screens. Mobile sites are faster for users because the work is done on the server, not the phone. Responsive design requires the device to do the work of calculating layout for the screen and resizing graphics. This can be processor heavy and slow on mobile devices. It’s not uncommon to see a mobile device take four or five seconds to process a responsive design page before it can display it. A desktop device, with more memory and a faster processor, might take only one second to process the same page. With a mobile site, you can load only the elements that your mobile users need, resulting in faster download and processing times.

Mobile tech

Mobile sites allow the inclusion of features unique to mobile devices that make no sense for desktop computers. For example, mobile sites also allow for the incorporation of phone calls into the design, where visitors can click a button on the design to make their phone initiate a call. This cannot be done on a responsive design since desktop devices cannot make sense of the click-to-call functionality and lack phone capabilities. Mobile design also allows for easy inclusion of mobile-only HTML, touch events (such as using a finger to scroll through images), or features such as location-based services.

Ding Ding, Round Two – Future-Ready

Mobile

Responsive

The Judges Scorecard

If your CMS system is up to it, adaptive design offers the best of both worlds. If you’re not ready for adaptive design, then a dedicated mobile website might be your best interim solution. Responsive design is viable only if you have the best designers, with significant responsive design experience, and are happy to completely redesign your existing websites.

A Quick Word from Our Sponsors

Just a note to our readers that DFC is an extremely dangerous sport involving complex digital techniques and technological advancements aimed at professional digital athletes. This is not for amateurs and therefore please DO NOT try this at home! Attempting to do so may cause serious harm to your online presence and your overall digital being.

Just kidding! DFC is of course made-up and we do not condone any form of violence whatsoever here at Unit 36. Joking aside though, if you require some assistance with your responsive design elements, please do not hesitate to get in touch!