Posts Tagged ‘responsive’

May 24 2013

Key Differences Between Responsive and jQuery Mobile Websites

Responsive and jQuery Mobile Websites are Different

There is a lot of discussion about which approach is better, and lots of opinions on the subject; however, one fact is true… mobile-friendly doesn’t automatically equal user-friendly.   This article will clarify some of the key differences between responsive and jQuery mobile websites.   Strategically, developers should always think from the perspective of the user to help them better identify user-expectations.   

If a business owner thinks that all users of their web site expect a similar experience, a responsive site might be better.  However, if mobile users might want only specific information or to see specific features, a custom JQuery mobile website might be better.  Here are some of the key differences in how the two types function. 

The main difference is in the structure and design, which determines where the work is performed.  

  • A responsive site is a website created for both desktop computers (larger display) and mobile devices (smaller display.)  All the content is in one location under one domain name, but there is additional coding in the website style sheet.  That coding guides the receiving device to  fluidly change and fit the displayed content to any device or screen size.  The device does the work by determining how to show the content, and since each device has different characteristics the display will be different on different devices.
  •  A customized jQuery mobile website contains only content that was customized for mobile devices and small screens.  It is located in a sub-folder under the desktop website so that it can be reached from the same domain as the desktop website.  When a mobile user with a smartphone goes to the desktop URL, they will be redirected to the sub-folder (domain.com/mobile) and the device will only download the mobile site. A tablet user will not be redirected to the sub-folder, but will see the desktop site just like the desktop user.   The server does the work by delivering a smaller page optimized for a smaller display when the user has a smart phone.  The display will be the same regardless of which of the smaller mobile devices receives it, and each of the navigation buttons and feature controls is customized in advance for an attractive and engaging user experience.  

Other key differences are:

  1. Speed:  Many websites were built for mostly desktop access and have accumulated resources on the home page that comprise many megabits of data.  When you display the homepage on a mobile device, it has to download all those resources before the information appears on screen.  With mobile users, slow downloads result in fast departures, so slow load times can be a serious problem for responsive sites, especially those that are rich with images.  Optimized jQuery mobile websites contain minimal resources to speed up load times, which is expected and well received by mobile users.    
  2. Updates to existing sites:  If an older desktop site exists, adding responsive code to it so that it will work on mobile devices can be complicated and expensive.  It is generally better to start with a new design that incorporates responsive templates, since each template is targeted to a different device, screen size and resolution.  So, instead of starting over to rebuild the desktop site with responsive code, it might make more sense to leave the desktop site alone and simply build a custom jQuery mobile site. 
  3. OS and Browser differences: In standard website design, developers need to test the site with each Operating System (OS) to make sure they won’t mobile website provim enerate error messages. They also test for several older versions of each of the key browsers (Internet Explorer, Firefox, Safari, etc.) so that users who still have older computers and browsers will be able to use the site.  Responsive websites have that same requirement during development, but jQuery mobile sites don’t.  Instead of writing unique code for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.
  4. Text control: The text in a jQuery mobile website will always break at the same location because the break point is determined by the server and is customized for a small screen, as this 1st image shows.  Look at  “… mobile is a lifestyle… .”  On a responsive website like the 2nd image, it is more difficult to get a consistent break point because the device decides how to display the site.  Sometimes the text breaks at the wrong place or isn’t aligned properly.  There are programming tools to overcome this, but it is more complicated and time consuming to overcome the inconsistency.  
  5. Entrepreneur screen shotFinger-sized Buttons:  With a responsive web site, different mobile devices may display the buttons in different sizes because they have to scale every element to fit their screen.  If there are multiple buttons, they could all be scaled down and hard to use.  With a jQuery custom mobile website, button sizes are fixed and they display the same size on any mobile device.  Apple, Microsoft and Nokia all recommend different minimum sizes for buttons, but a good web designer will make the buttons large enough so that each one can be touched without touching another one.   The average index finger is 45-57 pixels wide and the average thumb is 72 pixels so buttons need to be large and well-spaced to avoid “fat fingering.” In the 2nd image, notice all the small hypertext. If you wanted to press one of those words to go to the link, could you do it without a stylus?  Probably not, so linked text isn’t a good idea on a responsive site.  For more detailed information, you can read this article: http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/
  6. SEO considerations: Google has said that it ranks sites optimized for mobile devices higher in mobile search results.  They also want people to only use one domain to get all the information.   If a company has a mobile site with a different domain, such as m.domain.com, and a desktop site at domain.com, they will be penalized in the rankings by Google.  Both the responsive and custom jQuery mobile sites discussed in this article use a single domain, so there isn’t much difference in the SEO results as long as the bots can crawl their site and recognize it as a mobile site.

In general, when trying to decide which is the better route:

  • If aesthetics are a major part of users experience, the consistency of JQuery mobile is best.  
  • If increasing conversion rates on targeted tasks, such as signup forms is important, the finger-sized buttons on JQuery mobile are best. 
  • If price is the only consideration, simple jQuery sites start at just a few hundred dollars.  
  • If consistency and speed are important, jQuery mobile are a great choice.


A
 responsive web site with good .css rules will give you a mobile friendly website, and there are some advantages to using them.  The most important thing is whether every user gets a good user experience from your mobile website.

Call us at 317-299-5150

We can help you make the decision! 

 

Signup for our Newsletter