Responsive Design versus Mobile sites

by londoncoffee

Posted: 13 years ago 16 replies

INTERNET MARKETING

Hi guys,
I am looking to move into Responsive web design for business owners. I then researched the mobile web design market and it seems the 3 top frameworks for developers are Jquery Mobile, JQTouch and Sencha Touch 2.
There are also many FREE mobile site builders offered by hosting companies and other service providers that even grandma could use. Some require payment for extra features.
I am a little confused as to when it would be more appropriate to have a dedicated mobile site using one of these frameworks or to simply design and build one site (responsive) for 320px to 24" browsers. And i also know that the line between mobile and app can be rather blurred depending on client needs.
Also, if i charge a client say £300 + for a mobile version with the usual bells and whistles, wouldn't they get a bit miffed if they discover that some online services can set you up a mobile version for free. I guess this can apply to websites in general as designers compete with 1 & 1 website builder, Wix, Weebly and Godaddy builder etc. Yet established companies pay big bucks for professional web and mobile design and development.
Can any warrior enlighten me please as to what my best course of action would be, and the best sales pitch to would be clients.
Thanks in advance!

#design #mobile #responsive #sites #versus

Jay Moreno 13 years ago

Whilst responsive design looks great its not truly optimized for mobile, more often than not it will be slower and more bloated in terms of file size than a specifically optimized mobile website. Additionally a responsive design will not function or be as compatible on the broadest range of mobile devices. It's certainly good for tablets that typically connect to the internet via wifi. However on tablets like the iPad is typically not needed either as the main website usually displays just fine - just care and attention is needed for navigation/menus.

Responsive design could possibly be a good solution in the future (am thinking 18 months from now) but for me its just not for the current market. Download speeds and data bandwidth limits simply do not support it for the broadest range of mobile devices.

Personally we use an adaptive approach - basically what that means is depending on the phones user agent we present the visitor with the most optimized content for their type of phone. This design approach enables us to take advantage of both HTML5/Jquery for smartphones and also gracefully degrade so the content renders correctly on phones that dont support it.

Over the next 18 months as phone carriers expand their networks to include high speed connections such as the true 4G LTE network or better and remove the data transfer limits, and as smartphones totally dominate the marketplace then it will be time to move forward again - but for right now and right here i dont want to be frusrating or alienating ANY of our mobile phone users from being able to access content.

This is just our point of view and how we determine what type of mobile site to create

Whilst we still use jquery mobile and HTML5 we are still able to produce 100% valid XHTML MP code when not using those resources, even including them we are able to get a mobile ready score above 85% - Valid XHTML MP designed code is still a requirement for Google to be ranked in the Google.com/mobile serps with a green handset. We currently do this using our own Mobile framework for Wordpress.

Am hoping that google expands the criteria for mobile site recognition sometime in the not too distant future... they recently added the Google Mobile Smartphone Search Bot which is based on user agent detection to their list of mobile searchbots. Whilst this is good the only thing it currently appears to do is reduce the speed it takes for a mobile visitor to access the mobile site from the google serps when searching from a smartphone - no other indication is given in the serps that the site is mobile.

In reference as to when would it be good to use those other services... i wouldn't, we prefer to host our own sites, and have full control over how the sites are designed, function and validate.

I think for most people using those types of services it comes down to fast $$$ and technical know how... or perhaps the lack of it...

If you really get into mobile design going beyond quick moms and pops mobile sites you can easily charge x10 what you are looking at charging right now.

Cheers,

Jay
- [ 3 ] Thanks
Signature

Sorry, I am too busy helping people to think of a cool signature!
{{ DiscussionBoard.errors[6079347].message }}
londoncoffee 13 years ago

Many Thanks Jay.
I appreciate you lengthy reply and will heed your advice. I am still a little confused as to how to stand out from the cookie cutter mobile makers. I just dont want clients saying "Hey! I can get a mobile version of my site for $10pm kiddo. I'm not paying you $500".
As a marker, how do you explain the advantages of your service over FREE and cheap? I am hoping that Responsive Design could also be an opener for dedicated Mobile Site design using a better scaled down experience. I know that sometimes a website cannot scale down to 320px without looking feeble. A good custom user interface would be more user-friendly experience.
Thanks again!
- Thanks
{{ DiscussionBoard.errors[6084309].message }}

silko

12 years ago

Responsive design is completely different to the separate mobile site and I think thats where you can stand out from the mobile makers.
The advantages of one site, minimum maintenance, not having to rely on updating your user agent detection, not having to update the mobile site to keep inline with your main site, reduced cost in just one upgrade instead of two and that Google prefers responsive sites for mobile.
You can tell i prefer Responsive to separate mobile sites

Thanks
1 reply

{{ DiscussionBoard.errors[6907805].message }}

Jay Moreno

12 years ago

Originally Posted by silko

An optimized mobile site does not need to be separate if you are using an adaptive approach, unlike a responsive design an adaptive approach does not just hide content by hiding the visibility of it with css, nor does an adaptive approach just squash content to fit a small screen - a good adaptive design will display the most compatible content for that device.

Many people do not realize that user agent script do not all function the same. In reality a good user agent detection script would get updated less than you would normally have to update a Wordpress, or Joomla installation anyone saying it would need to be updated every time a brand new mobile device comes out needs to do some research, that is simply not the case.

Google only recommends responsive design because the content is delivered on the same URL it does not take into account the end user experience. A responsive design will typically load a page thats upwards of 5x larger than a mobile optimized page. An adaptive approach will also serve the content on the same url, will be often 5x lighter and always faster to load than a responsive design. The different content is addressed by the VARY Header which is also recommended by Google.

Responsive is great for desktop and tablets, and new sites... you can not just make an existing site responsive. Also bare in mind the content on a full size desktop is often bloated and overkill for someone on the go wanting to get quick information. Not to mention that CSS3, Javascript, HTML5, large file sizes are also not supported by all phones either. An adaptive design addresses all of these.

From our standpoint if you are at all bothered about the end user mobile experience you will understand that responsive design is kinda the "easy" and "lazy" approach to mobile.

Responsive maybe considered mobile ready but it is far far FAR from being mobile optimized and the best end user mobile experience that you can provide.

Want to know more about the performance implications of responsive designs being used for mobile than take a look at this:

Performance Implications of Mobile Design

If your responsive design is taking longer than 4 seconds to load on a 3g connection expect higher bounce rates,especially so if this is just a basic page - also remember not everyone right now has the luxury of 4G LTE 15mb connections.

Also take a look at top 500 sites in Alexa and you will see that an overwhelming majority of them have a specific mobile optimized site and do not use a responsive approach, ask yourself why? My answer would be because they want the best end user experience for their mobile visitors.

At the end of the day use what you thinks best but understand what other options are out there and the pros and cons of what you are implementing... i know we will continue with responsive designs for new sites so as to address desktop and tablet users, and always do either a standalone or an adaptive mobile optimized site for mobile visitors.

[ 1 ] Thanks
1 reply

Signature

Sorry, I am too busy helping people to think of a cool signature!

{{ DiscussionBoard.errors[6909340].message }}

silko

12 years ago

Overview of Google's recommendations

Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.
If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.

Thanks
2 replies

{{ DiscussionBoard.errors[6909907].message }}

silko 12 years ago

ADAPTIVE VS. RESPONSIVE, WHAT'S THE DIFFERENCE?

"Responsive design" is a subset of a larger concept which is called "Adaptive design". When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries).

"Adaptive design" on the other hand includes much more than just fluid layout. In practice it means the same thing as progressive enhancement, which means in short, that we aim to deliver the best possible experience to the widest possible audience. Also: "Adaptive design" shouldn't be mixed with "Adaptive layout" which is a completely different thing.

Finally, "Adaptive layout" means a layout done by combining multiple fixed widths. Right now, I feel that Adaptive layout -- when done right and when fixed widths are combined with fluid widths -- is one form of responsive design and not just an alternative to it. Zeldman shared a bit similar idea in his blog post from 2011.
- Thanks
{{ DiscussionBoard.errors[6909965].message }}

Jay Moreno

12 years ago

Originally Posted by silko

If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.

Silko look at what you just quoted Google as saying... "if responsive design is not the best option to serve your users..."

Responsive design is not typically the best option to serve your users if you want your users to have THE BEST mobile experience. With that there basically is nothing more that needs to be said.

Our definition of an adaptive design is not the same as what you stated above, our approach of an adaptive design is that we have different html layouts that are not fixed width in any way, but instead they are dynamically rendered to be the most compatible for the type of browser accessing the content, the html layout is based on a number of variables one such factor being the type of browser user agent accessing the website.

Thanks
1 reply

Signature

Sorry, I am too busy helping people to think of a cool signature!

{{ DiscussionBoard.errors[6910667].message }}

silko

12 years ago

Originally Posted by Jay Moreno

Responsive design is not typically the best option to serve your users if you want your users to have THE BEST mobile experience. With that there basically is nothing more that needs to be said.

My point is that its Google's prefer'd method is Responsive FACT ! and yes not all sites suit this method but before choosing your chosen method it should be considered.

If your definition of adaptive design is different to what I have found then I must be missing a different story on all results that come up on a google search.

Why have the extra coding for user agents ($12), Vary HTTP, etc if its really necessary.

We could go on forever re the subject Responsive vs Separate mobile site but both methods play a part and each has its selling point.

Thanks
1 reply

{{ DiscussionBoard.errors[6912135].message }}

Jay Moreno 12 years ago

FACT Google's recommendation is based on whats best for them to crawl - not whats best for the end user. They recommend responsive because it serves the content on the same URL, which is obviously less resourceful for them to go off and search the mobile equivalent. Our adaptive approach also serves the content on the same URL too - this type of approach is done to please both Google and the end user and is also recognized and recommended by Google too.

Most people don't use our approach because they aren't able to quickly deploy such a method or just don't have the technical know how.

Our use of the term adaptive design has the same principles and goals as what you are seeing but we have a unique approach to it - at the end of the day you can call it whatever you want, what it's called is not really my concern - what i do know is that our goal is to provide the best end mobile user experience for the broadest range of mobile devices period.

I know personally from experience i have yet to come across a responsive design that doesn't leave room for improvement from a mobile standpoint.

As i mentioned before we use responsive design but for desktop and tablet users. And go that extra step to produce something that is mobile optimized not just mobile ready.

Like you said its imperative to understand all the pros and cons before implementing a mobile solution as well as take note the difference between mobile ready and mobile optimized.
- Thanks
- 1 reply
Signature

Sorry, I am too busy helping people to think of a cool signature!
{{ DiscussionBoard.errors[6915729].message }}
- Fredbou 12 years ago
  
  I've been a Web developer for 15 years and 12 months ago started looking at responsive/adaptive site building.
  
  It appealed to me as an alternative to building different sites for desktop and mobile devices I've now built or converted 15 sites and have found a number of cons, but the pros still outweigh having 2 or more sites that need to be updated, etc.
  
  Placing adverts is one major hurdle with responsive design, getting them to shrink/expand to fit the screen sizes.
  
  Maximum optimization of images is necessary to prevent slow downloads and excess bandwidth charges/costs.
  
  My clients certainly appreciate the fact that their sites can be seen on a large number of devices without visitors having to zoom in and out scroll horizontally, etc.
  
  Yes, there are some necessary adjustments to be made by using adaptive menus, reducing the number of images etc, with the use of @media screen, discontinuing the use of pixels for sizing and a few more items, but basically responsive/adaptive sites are very easy to build. Bloated sites are going to become a thing of the past, with simplicity becoming the norm.
  
  I feel that the mobile user should be given the same browsing experience as the desktop user whenever possible. I often feel totally cheated when I go to some sites on my tablet or mobile and I'm served with a cut-down version of the main site. It's a good standard to aim for even it it's not always achieved.
  
  Any doubters, please look at the site The Boston Globe , which is often seen as the Holy Grail of responsive/adaptive design. Clean, simple and very adaptive.
  
  [ 1 ] Thanks
  
  Signature
  
  {{ DiscussionBoard.errors[6915946].message }}

Nexstair 12 years ago

Hey, mobile site is totally different market and it is certainly emerging.As for the cheap solutions, lets say you go online and get mobile version for free or say $10.You see what you would get? a messy layout and no user friendliness.Rather in case of custom design, everything would be scaled properly considering user friendliness.
- Thanks
Signature
Custom Website design | Affordable Theme Development | Special Discount for Warriors
{{ DiscussionBoard.errors[6909276].message }}
UMS 12 years ago

silko, if you are going to copy/paste stuff, please ensure you include an attribution.

Jay, thank you very much for your excellent points. I've been doing a bit of reading recently about mobile design and your is the most lucid I've seen.
- Thanks
- 1 reply
Signature

SECockpit - Get the world's most POWERFUL Keyword Research Tool for ONLY $1

Grab a LIFETIME Discount off Elegant Themes

Grab a LIFETIME 40% Discount off The Best Spinner
{{ DiscussionBoard.errors[6910029].message }}
- silko 12 years ago
  
  UMS , I tried to but it would not let me post links yet.
  
  My sources were Google and Viljami Salminen blog post, both of which give easily understood points.
  
  Thanks
  
  {{ DiscussionBoard.errors[6910044].message }}
silko 12 years ago

So I guess Google are totally wrong then.

Fredbou, good and valid comments. Thanks
- Thanks
- 1 reply
{{ DiscussionBoard.errors[6921466].message }}
- Jay Moreno 12 years ago
  
  Originally Posted by silko
  
  So I guess Google are totally wrong then.
  
  Fredbou, good and valid comments. Thanks
  
  Your looking at this completely out of context with what you are quoting that is Google talking with their "Search Engine Hat" on - they are specifically looking at it from a search point of view not an end user point of view.
  
  If Google was so struck on responsive design then it will make their entire How To Go Mo campaign an utter waste of time and money... Why would they team up and promote Dudamobile to create standalone mobile sites if responsive is the best option for the end user...
  
  So baring that in mind take a look at GoMo by Google Ready To Go Mo? Google's own mobile initiative - this is Google not with their "Search Engine Hat" on but with their "Mobile Web Development for The End User" hat on... look for one of their publications called the Publisher Guide - How to Optimize Your Content for Mobile.... you will see that Google does NOT mention once anything about responsive design but instead talks about how and why a mobile optimized site is the best option for mobile users.
  
  At the end of the day you know whats available - so use whatever you think will give you or your client the best mobile end user experience.
  
  @Fredbou - you might want to raise your fist at Google for feeling cheated! lol It's actually one of the suggestions that Google makes "to prioritize content" which is not usually the same approach you would do with a desktop site. However most mobile sites i have been on still give you the option to visit the desktop layout... if that happens to be responsive than you have the best of both worlds. Which is how we see things and what we typically deliver.
  
  Thanks
  
  1 reply
  
  Signature
  
  Sorry, I am too busy helping people to think of a cool signature!
  
  {{ DiscussionBoard.errors[6921757].message }}
  
  silko 12 years ago
  
  Originally Posted by Jay Moreno
  
  At the end of the day you know whats available - so use whatever you think will give you or your client the best mobile end user experience.
  
  Took the words right out of my mouth
  
  [ 1 ] Thanks
  
  {{ DiscussionBoard.errors[6921783].message }}

Responsive Design versus Mobile sites

Trending Topics

Why My Website is Not Indexed in Google?

I didn't know this - am I the only one?

How to sell ebooks if your legal entity in the country which which publishers doesnt work

An Amazon fail

Facebook Ads CPM skyrocketed as purchases increased. What can I do?