Presidential Smackdown EditionSeparate Mobile Website Vs. Responsive Website

Advertisement

The US presidential race is heading into full swing, which means we’ll soon see the candidates intensely debate the country’s hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites.

It just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney’s dedicated mobile website1, and in the blue corner is incumbent Barack Obama’s responsive website2.

Mitt Romney and Barack Obama websites3

We’re going to see how well their mobile Web experiences stack up. But before we do, we need to ask a few questions.

Why Bother With Mobile?

Why are the candidates attempting to create mobile-optimized Web experiences? Well, the US population is sitting at around 311 million. Of those 311 million people, about half of US adults own a smartphone4. On top of that, for a whopping 28% of Americans, a mobile device is their primary way of accessing the Web5. So, for a candidate looking to reach potential voters, mobile provides a tremendous opportunity to connect with their constituents.

What’s more is that people are arriving to the mobile Web through more diverse channels than ever before. In addition to direct and referral traffic, candidates are using social networks, email campaigns, SMS campaigns, search and more. Because these activities are increasingly happening on mobile, creating Web experiences optimized for mobile makes even more sense for the candidates.

What Drives to Mobile Web?6
These are just a few channels that drive people to the Web on mobile devices.

The candidates see mobile as a big opportunity to turn visitors into voters. We can see the candidates’ incentive, but now we must ask another important “Why” question.

Why Would Anyone Visit A Candidate’s Website?

Who is visiting these candidates’ websites? What are they looking for? Why might they want on a mobile device?

Visitors are generally either looking for information on the candidates or looking to take action.

The Information-Oriented Visitor

The information-oriented user might be looking for basic information about the candidate, such as his biography, background or stance on issues. They might also be interested in regularly updated information such as news, locale-specific blog posts and information like myth busting (where the candidate tries to dispel nasty rumors circulating in the media). The official websites give the candidates a chance to deliver information straight from the horse’s mouth, free from news media bias and inaccuracies that arise from crowd-sourced information.

The Action-Oriented Visitor

The action-oriented user is looking to support the candidate in some way, shape or form. Both websites prominently feature calls to action asking visitors to donate money to the campaign and to sign up for their email newsletter. Action-oriented users might also want to connect with the candidates on social media channels, volunteer their time at an event, make calls on the candidate’s behalf or shop for merchandise.

The candidates have accounted for these use cases in their Web experiences. Let’s look at how they execute on mobile.

Criteria For Judging: Layon’s Theory of Mobile Motivation

The effectiveness of Romney and Obama’s positions on the economy, foreign policy, social issues and other important subjects depends on certain criteria. Likewise, we need to establish a set of criteria to determine the effectiveness of the candidates’ mobile Web experiences.

Mobile Web designer Kristofer Layon7 has a clever way of looking at the hierarchy of mobile needs. His “theory of mobile motivation8” is based on Maslow’s hierarchy of needs9, a psychological theory that identifies the various levels of human needs.

Maslow's Hierarchy of Needs10
Maslow’s hierarchy of needs.

Kristofer Layon has applied that theory to the needs of mobile Web users, where primary access and navigation are the most essential aspects of an experience, and at the top of the pyramid are HTML5 enhancements (such as offline storage and a boatload11 of other features).

Layon’s Hierarchy of Mobile Needs12
Layon’s hierarchy of mobile needs.

Let’s apply a simplified version of Kristofer’s hierarchy to evaluate how well each candidate’s website holds up.

My simplified version of Layon's Hierarchy of Mobile Needs13
My simplified version of Layon’s hierarchy of mobile needs.

Access

First and foremost, users need to be able to access an experience. The most beautiful design in the world will accomplish nothing if people can’t view it. Historically, the mobile Web has been viewed as the Web Lite™, whose users get served only a subset of content and functionality14. However, a whopping 28% of US residents use a mobile device as their primary way to access the Web15. With more people relying on their mobile devices to access the Web, achieving content parity16 and giving users access to a full experience regardless of their device or configuration are more important than ever. Let’s see how the presidential candidates’ mobile Web experiences hold up.

Barack Obama

Barack Obama’s “mobile” website has no “full site” link because it shares the same code base as the “desktop” website. Content on a responsive website lives under one roof, which gives the website a better chance of achieving content parity. And while responsive designers can (and do) hide content from small-screen users, responsive design affords less opportunity to fork the content and create disparate experiences, which would deprive certain users of valuable information and features.

Mitt Romney

Mitt Romney’s website uses device detection to route mobile users to a separate dedicated website. Creating this separate experience allows the designers to tailor the mobile Web experience, but a separate design and subdomain also opens the door to some serious problems.

The main problem with Mitt Romney’s mobile website is that only a fraction of the full website’s features are included.

Mitt Romney mobile site features vs desktop site features17
Only some of the features from the full website have made it onto the mobile-specific website.

It’s a myth18 that mobile users don’t want access to all of the information and functionality available to desktop users. The absence of key content on Romney’s mobile website leaves a lot of serious questions unanswered for potential supporters, such as “Who is this guy, anyway?,” “Where does he stand on issues?,” “What’s his plan for the economy?,” “What can he do for my state?” and “Where can I shop?”

Another common problem with separate mobile websites is URL management. Because desktop and mobile content live at separate URLs, device detection is required to route users to the appropriate site. Unfortunately, many websites don’t go deep enough in their URL redirection, so desktop users will get sent to mobile content and vice versa. This becomes apparent when mobile content gets shared by mobile users on social networks and then gets accessed by desktop users:

Romney's mobile site displayed on a desktop19
Issues arise when a mobile URL is accessed from a desktop.

As we can see, having Web content all under the same roof and URL definitely makes it easier to give visitors access to the content they’re looking for, regardless of the device they happen to be using.

Interact

Basic access to a website is essential, but what happens once the visitor is on the website? They need to be able to interact with the content and get around the website. Let’s start with one of the most common and important interactions: navigation.

Navigation

Navigation, especially on mobile, should be like a good friend: there when you need it, but considerate enough to give you your space. When navigation takes up a ton of real estate, it gets in the way and becomes that annoying friend who won’t leave you alone. When it’s inaccessible, hidden or just hard to reach, it becomes that friend who’s conveniently absent when you’re looking for help to move to your new apartment.

Barack Obama

obamanav20
Obama’s website serves navigation at the top for large screens and then transforms it into a left fly-out menu for screens narrower than 1024 pixels.

Obama’s website has Facebook-esque left fly-out navigation21 for small screen resolutions. Among popular responsive techniques22, this one is relatively complex and opens the door to problems. As Stephanie Rieger points out in her post “A Plea for Progressive Enhancement23,” Obama’s navigation fails on a whole load of mobile devices: “And the menu failed. Never even opened. Suddenly, the site was without navigation… at all.”

These situations, regardless of approach, can be avoided using proper progressive-enhancement techniques, but it’s a good example of the challenges that arise when creating adaptive experiences.

Mitt Romney

Mitt Romney Mobile Nav24
Romney’s mobile website has a dashboard home page and “Back” and “Home” links for inner pages. The full website has top navigation.

Romney’s relatively simple mobile navigation contrasts starkly with Obama’s navigation. It sits as a dashboard on the home page, and all inner pages simply include a “Back” button and a logo that links back to the home page.

This navigation technique certainly solves the problem of limited real estate and avoids complexity, but it creates other issues. Requiring a full page refresh just to jump to another section of the website isn’t very efficient. A logo as a button doesn’t exactly scream “Click me for navigation!” And the “Back” button does nothing if the visitor arrives at the website on a page other than the home page. It’s also worth noting that mobile browsers already have their own back buttons, so duplicating that functionality in the header could be regarded as wasted space.

Scrolling

Scrolling is an interesting interaction on mobile devices. The “fold” as a set pixel value is a myth25, but users still need to be able to access the core content as quickly as possible.

Mitt Romney

Romney’s mobile website has an acceptable page length. Not much chrome or clutter before you get to the core content, and for the most part the user doesn’t have to scroll much to find what they need.

Barack Obama

Obama’s pages contain a massive amount of content, often introducing entirely new sections far down in the flow. The result is extremely long pages that have serious problems.

Romney vs Obama's mobile page length26

Scrolling through disparate content types is not a good experience. How do users figure out that other content exists? Finding what they’re looking for becomes a scavenger hunt. While they might be all right with sifting through one or two content types (for example, a blog’s main article and subsequent sidebar), a lot of disparate types makes the content unfindable and the page impractical.

While content parity is essential for mobile users, that doesn’t mean websites have to be one size fits all. Techniques like lazy loading27 and conditional loading28 enable Web creators to provide access to full content without having to stuff it all on the page at the same time. And while those techniques can be extremely effective, there’s no substitute for subtracting supplementary content everywhere to focus on core content.

In addition to the annoyance caused by having to scroll through so much content, these massively long pages have another downside: terrible performance.

Perform

Performance has gotten the short end of the stick. Web creators have assumed too much about the user’s context (“Of course, the user has a fast connection!” “Of course, their machine is powerful!”). As a result of these convenient assumptions, the average page now weighs a whopping 1 MB29.

One MB might not seem like a big deal until we look at the mobile user’s expectations. 71% of mobile users30 expect mobile websites to load as fast, if not faster, than desktop websites, and 74% of mobile visitors31 will abandon a website if it takes more than 5 seconds to load. In other words, you have 5 seconds to get someone’s attention. Make it count.

To evaluate how well the candidates’ websites perform, we’ll use the excellent Blaze.io mobile performance test32 to capture performance results on real devices.

Mitt Romney

Romney Mobile performance33

A typical page on Romney’s mobile website is about 687 KB and, as a result, takes about 8.75 seconds to load. While that’s over the 5-second mark, the pages still weigh less than the average size.

Barack Obama

Obama performance results34

A typical page on Obama’s responsive website is a massive 4.2 MB, resulting in a 25-second loading time.

Despite the fact that only the most patient of visitors would wait 25 seconds for a page to load, such a large payload creates real accessibility problems. Some devices (such as my cousin’s company-issued BlackBerry) won’t even render the page because it’s too large.

Real BlackBerry trying to load barackobama.com35

While some of this is RIM’s or my cousin’s employer’s doing, it’s a legitimate constraint that we need to be mindful of.

Unfortunately, poor performance is prevalent among the current crop of responsive designs in the wild. Guy Podjarny, chief product architect at Akamai and CTO of Blaze.io, discovered that only 3% of small-screen versions of responsive websites36 are significantly lighter than their large-screen counterparts. This is all the more reason to focus on performance as a key component of adaptive Web design.

Enhance

We’ve talked about content parity and the importance of providing access to information and functionality regardless of device or configuration. But that doesn’t mean we have to settle on serving a one-size-fits-all experience. Many mobile devices and browsers can do things that desktops cannot. Making the most of these wonderful features will take the mobile experience to the next level.

Mobile Communication

Obama’s designers have implemented one huge enhancement: the ability to make calls on the candidate’s behalf directly from a phone. We tend to forget that mobile phones are, at root, voice-based communication devices and that mobile browsers can initiate a call when the user clicks a tel link37. By exploiting this enhancement, Obama is able to mobilize his mobile users into action, which could have a big impact on the campaign.

Obama Call functionality38
Obama’s call functionality enables users to make calls on the candidate’s behalf, right from their phones.

Besides enabling phone calls to be initiated from the browser, there are many other opportunities for mobile enhancement. Here are just a few ways that both websites could enhance the experience and make the most of the mobile Web.

Simple Form Enhancements

The great thing about form enhancements is that they require barely any effort. One enhancement for many mobile browsers is to specify an HTML5 input type to pull up the appropriate virtual keyboard39 for the user. While this enhancement isn’t particularly mind-blowing, anything that allows the user to complete their task more quickly certainly helps and could lead to more conversions.

Simple form enhancements can make an experience just a bit less tedious40
Setting these forms to input type=number would pull up the appropriate virtual keyboard, thus saving the user an extra step.

Geolocation

Detecting location is an extremely powerful way to provide users with contextually relevant information. Imagine dynamically displaying blog posts, news and upcoming events relevant to the user’s location. Obama’s website smartly allows users to choose their state41; perhaps they could take it further and add geolocation as a way to identify it. Geolocation can also save steps when filling out forms, and it creates opportunities for innovative new features.

Touch Events

The beauty of touchscreens is that they give users a way to interact directly with content and can add a layer of fun to the experience. These websites could leverage touch events to allow users to swipe through photos in a gallery or to thumb through a quick overview of the candidates’ stances on important issues.

Many More

This is just a small sampling of enhancements. Support for a ton of features can be detected42, and a ton of use cases emerge from the plethora of devices that access the Web. Ask questions. “Can I offer features that are useful to users on the go?” “How might I use offline storage to improve the experience?” “How can I take advantage of touch events?” Lay a solid foundation, and look for opportunities to enhance.

So, Who Wins?

If there’s one lesson to learn from analyzing these websites and techniques, it’s that this stuff is genuinely hard. A lot goes into making a great mobile Web experience, and I’m personally thrilled that the candidates have taken the important first steps toward making their websites mobile-friendly. Viewing the mobile web as a wonderful journey and not as a destination is absolutely essential. As we step into the deep end of multi-device Web design, we must strive to continually improve our websites and services in order to better serve our users — wherever they may be.

While the design of a candidate’s website might not determine the outcome of the presidential election, it will certainly influence how the world perceives the candidate. And for a Web-savvy voter like myself, a website’s design might just sway my vote. I know who I’m voting for in November!43

(al)

↑ Back to topShare on Twitter

Brad Frost is a mobile web strategist and front-end designer at R/GA and is based out of beautiful Pittsburgh, PA. He is the creator of Mobile Web Best Practices, a resource site aimed at helping people create great mobile and responsive web experiences. He runs a responsive web design newsletter and also curates WTF Mobile Web, a site that teaches by example what not to do when working with the mobile web. He is passionate about mobile and is constantly tweeting, writing and speaking about it.

  1. 1

    Good post. I believe the mobile version should be kept separate from the desktop version. With correct implementation, it’s a no brainer for your users.

    -14
  2. 2

    Responsive all the way, in my opinion.

    It’s up to the developer to reflow content in an effectively for mobile devices, and I’ve found that simply using CSS selectors to hide unnecessary cruft works well enough to keep mobile pages manageable.

    You can get an idea for what I’m talking about on brafton.com by resizing the screen (my company – I recently redesigned the site). It’s very important to tailor the experience for each crowd and I’ve found a great way to reduce the heaviness of pages is a little JS magic to render images (sized according to the viewport) after the HTML has already loaded, with fallback img elements in noscript tags.

    -30
    • 3

      Evan, that is a great job you have done with your site brafton.com. I have been sitting on the fence about the solution for our next mobile project. You have sold me on the responsive approach in just seconds. Thanks for the inspiration.

      4
    • 4

      Responsive is better option, and we noticed that we have increased number of requests in our dev center for HTML5/jQuery front-ends (BTW Google published book some time ago or it was mentioned that about 70% of Google visitors were coming from mobile browsers

      0
  3. 5

    I think this article proves that there isn’t one method that is the “best” for all sites. Why do the experts in the community tout their opinion as the “correct” way?

    40
    • 6

      I agree, but i think its tough for the experts in the community too as they are often out the front of these issues driving the discussion with their articles and talks before the rest of us chime in. I don’t think any of the most prominent thought leaders ( Ethan Marcotte, Luke Wroblewski, Brad Frost and others ) are in disagreement with this approach

      0
  4. 7

    I just checked out Obamas website on my phone and its a mobile version.. Not a scaled down responsive version?

    -7
  5. 10

    Great article, in future people will access the internet from their tablets and mobiles than their computers. So smart businesses should always move with the trend.

    though I was wondering why you don’t have a single social media share buttons?

    0
  6. 15

    Am I a Democrat if I like Responsive Design? – Great Article, really enjoyed it reading.

    One thing so strikes me about the start: I don’t think the debate about either responsive design or separate mobile site. Neither of them does solve all challenges and satisfies all needs. But both point into the right direction: Web Design needs to work across a large diverse variety of devices. Both approaches tackle those needs: The Responsive Design methodology does help a great deal with managing layout for a continuum of screen widths – mobile sites on the other do deal with the different user interactions and different browsing habits regarding way to present and the more spontaneous nature of browsing on a mobile.
    A remaining key problem for next generation web sites is the diversity of devices – and taken to the next level the diversity of context browsing occurs in. Gone are the old times of us sitting patiently in front a machine and doing comparison shopping, surf along for hours or even minutes. With the mobile browsing becoming the new normal browsing peoples habits changed and requirements for good web experience exploded: Users want their device leveraged to the best possible (thanks Steve Jobs to provide us with a new norm in UI – something I call “Apple Grade Experience”) and also take their current situation into account: location, time of day and ideally capture the intent often triggered from something “offline” like billboards, a bird raising the desire for an ice cream or holidays.
    It is this diversity that designers and technology vendors alike need to learn how to manage that will lead to the next generation web experience. If you are interested more: Please vote for the SXSW submission “In Mobile, Diversity is the next fragmentation”: http://ow.ly/cWSvE

    1
  7. 16

    Well illustrated article. Highly recommended for all the mobile developers! Look forward to reading similar stuff ahead!

    9
  8. 17

    Super article, Brad! It’s amazing how tone deaf Obama’s developers were in allowing such an enormous page to be served.

    One quick note: It seems that Blaze.io has (very recently) been acquired by Akamai, and is now Mobitest: http://mobitest.akamai.com/

    3
  9. 20

    Great article! Nice mix of psychology and design delivered with nifty pictures.

    This post has helped me better understand the mobile site vs responsive site debate.

    @Brad – When are you coming to PDX with your sage wisdom?

    0
  10. 21

    While the whopping page size of Obama’s site is abysmal, I tend to prefer to design Responsive websites. It just so happens that most of the content our clients have is more text heavy than image heavy. Still, a responsive image spec (which we know is in the works) could go a long way to making page size lighter by only downloading large images for devices that need them. Then, I think, Responsive might have more of an edge.

    0
    • 22

      Responsive websites don’t have to be heavy. There’s a ton of great techniques (including adaptive images that you mentioned) that allow us to create fully-featured web experiences that are still highly performant. I’d check out Southstreet by The Filament Group for a collection of amazing techniques: https://github.com/filamentgroup/Southstreet

      3
  11. 23

    Great article that shows the pros and cons of the two methods.

    I believe a combination of responsive web design (with feature detection) and device detection (RESS) is better then choosing one over the other. I’m experimenting a lot lately with Categorizr, where I’m able to serve snippets of optimized content for mobile, tablet, desktop and TV’s and the more I play with it the more I start to like it.

    5
    • 24

      RESS is certainly a viable and powerful option to fine-tune an experience when fitting everything under the same code base can’t work. Definitely check out Dave Olsen’s excellent work with RWD and server-side detection: http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the-evolution-of-responsive-web-design/

      -2
      • 25

        I’ve read that article indeed a while ago, Brad.

        The thing with RWD that is bothering me a bit is that tablets these days has the same screen resolution as laptops/desktops, so setting media queries that actually are intended for desktop are also gonne be served to tablets.

        I load now a global stylesheet with styles meant for all devices and then with Categorizr I include device specific stylesheets: mobile.css, tablet.css, desktop,.css and tv.css. The same I do with scripts.

        Categorizr together with Modernizr for feature detection to load my polyfills and CSS fallback solutions is as far as I can tell a great combo so far to me.

        0
        • 26

          It begs the question: does tablet design need to be drastically different from desktop design? Provided you’re making hit areas large, taking advantage of touch, making sure you’re addressing hover states, etc, there’s not too much reason to dramatically alter the design between the two.

          I’ve found that ‘mobile’ ‘tablet’ ‘desktop’ buckets fall apart. I tend to name things ‘small’ ‘medium’ and ‘large’ for a more agnostic approach to things.

          3
      • 27

        I’ve read that article indeed a while ago, Brad.

        The thing with RWD that is bothering me a bit is that tablets these days has the same screen resolution as laptops/desktops, so setting media queries that actually are intended for desktop are also gonne be served to a lot of tablets.

        I load now a global stylesheet with styles meant for all devices (such as css resets) and then with Categorizr I include device specific stylesheets: mobile.css, tablet.css, desktop,.css and tv.css which get only loaded by the device it’s meant for. The same I do with scripts.

        Categorizr together with Modernizr for feature detection, to load polyfills and to create CSS fallback solutions, is as far as I can tell a great combo to me.

        1
        • 28

          Sorry for the duplicate comment SM… I thought something went wrong, cause I didn’t see my comment appear.

          0
    • 29

      I’ve used Categorizr before too. It’s got awesome/accurate device detection. Pair it with Modernizr and you have a great way to find device classes and their capabilities. RESS seems like a great way to limit what is sent over the wire to mobile devices.

      2
  12. 30

    Well done. I’m barely a mid-tech person and yet your writing lays out the concepts so clearly that the post really flowed as I read. Thank you.

    2
  13. 31

    Interesting comparison.

    Though I would totally question linking to a PDF about mobile myths by Global Moxie (Seven Deadly Mobile Myths) where they blatantly state: “Everything about Nielsen’s guidelines are wrong and damaging.”

    Everything? Wow. Just… No words.

    1
  14. 33

    I truly believe that the way to go is responsive layout with adaptive content!

    0
  15. 34

    Haven’t read the article yet but I’m already excited based on the excellent examples chosen. Two extremely similar sites with near identical purposes, both trying to convey the same message.

    Awesome.

    -1
  16. 35

    Thank you Brad! I just started to study responsive website design and trying to make responsive templates and share with all. I believe that all internet websites will go to responsive. Because in our days we all use not just pc. I understand that in responsive sites we have have pluses and minuses. And i think everyone can make his/her own choose about his website. For some situations we can use responsive design and for some create separated web and mobile websites. I like create responsive website design with simple layouts, good css code and nice design. I share my works on http://www.free-responsive-templates.com. And I’m very happy that i stand in our time and have possibility to create websites for all devices:)

    Thanks again for good article and i waiting next good post from you!

    1
  17. 36

    CDN Design Studio

    August 23, 2012 1:18 am

    I appreciate that mobile website designing is good, but it doesn’t useful when we are going to surf on other digital platform and because of this i give vote to responsive web design, as it adaptable to all platforms.

    0
  18. 37

    Great that you picked the current presidential campaign as a case. Furthermore the article is well written, has a great variety in images, comments and figures. @Brad: imho one of the best articles ever written on SM.

    3
  19. 38

    Babasaheb Ladhane

    August 23, 2012 3:34 am

    Good comparison!

    I beleive the Responsive design is the better option. It automaticaly detect device, screen resolution, page orientation etc and render the content accordingly.

    -4
  20. 39

    Nice generic overview of “best practices” (speed especially) , but don’t read too much into it. You’re making a TON of dangerous assumptions that are OK for a mom-and-pop business but could be very expensive for sites of this scale.

    28% of Americans use mobile as their primary way to access the web.

    Who cares?

    Do people who primarily use mobile to access the web visit more or less pages than people who use desktops? Are they more or less likely to donate money? Are they more or less likely to volunteer?

    The real question is “How many mobile visitors do Obama and Romney get to their website and is it worth the cost to focus on mobile?”

    My guess is this is an EASY yes, but it sounds like you’re encouraging web developers to avoid hard data when it’s RIGHT AT YOUR FINGER TIPS.

    Again, I agree with most things you say here, but stop it with the 28%, it’s a distractor.

    0
  21. 41

    > It’s a myth that mobile users don’t want access to all of the information and functionality available to desktop users.

    You cite Clark here, but be sure to read Clark’s comments to my April article at NetMagazine:

    http://www.netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong

    I think you’ll find that the answer is much more nuanced than most engineers want it to be regarding this. You’re making an assumption that the Romney team is working without data. I honestly don’t know what they did, and I agree with your general assessment that “from the outside” it looks like they have some opportunities here BUT:

    What if they looked at their web users and found less than 1% looked at that information you cite as missing? What if they tested 10 different home pages using solid A/B testing methodology and discovered that they get 50% more donation and volunteer click-through by going with LESS in the navigation than everything as you propose?

    I guess what I’m saying is “this article is a good summary for someone who’s new to web and needs some sort of primer and a source to feel good about following “industry best practices”, but it’s a little dangerous for someone who’s making a career in web development.

    0
    • 42

      I have a strong hunch that they’re not working from data and are instead just treating mobile as an afterthought. I say this because the Romney desktop site just got a big redesign and now includes a whole host of new features, while the mobile site remained exactly the same.

      Now you may be right and they might have gobs of data that justifies including that limited mobile feature set even after overhauling the desktop site, but based on my experience (and the host of examples on http://wtfmobileweb.com/) it’s simply due to negligence.

      0
      • 43

        Brad,
        For Romney’s website makeover, they may have left the mobile version because its conversions are fine according to their analytic methodology, don’t be too quick to conclude that the site was neglected.

        0
  22. 44

    For input of a zip code, the right hint for mobile is not type=”number” but type=”text” pattern=”[0-9]*” The latter will also bring up the right keypad but without the +/- spinners that HTML5 supporting browsers will add to a number input field.

    0
  23. 46

    Great write-up. Pros and cons for each method. Sounds like in the end it all boils down to what the client’s needs are as well as their understanding of managing the content.

    -1
  24. 47

    Device Agnostic Responsive Layout (DARL) will continue to be the approach I take for responsive websites.

    As for the responsive vs. mobile website argument it is highly subjective and depends on a lot of different variables. In the end, “it depends” on these factors and what the client will buy into.

    0
  25. 48

    What about Ron Paul?

    3
    • 49

      hahahaha just checked out his site. It looks like he’s serving a desktop site to mobile users. Which isn’t as terrible as it might sound. Back to the hierarchy of needs: can the user access the content? Can they get around and complete the actions they came to the site to do? Are page loads fast? Are they taking advantage of any browser capabilities?

      A site doesn’t necessarily need to be responsive or dedicated in order to be more mobile friendly.

      4
  26. 50

    First, love your writing style – excellent job.

    To that guy who thought that Obama’s site wasn’t responsive and was actually mobile – ok, seriously? No mobile redirect, and open it up on desktop, its responsive. There are just some really good web designers out there tricking you –

    Did anyone view source on Obama’s site and see the easter egg in the header? Pretty cool – took me a second to realize what it was, at first I thought it was the IE logo….

    It is really annoying not to have any information about Romney or his campaign- that was a good point you made about limiting the user’s information on a mobile device. I wonder what his site is like on tablet – anyone?

    0
    • 51

      Romney’s desktop site gets rendered on tablets. This is true for most sites with separate experiences. Tablets in many ways can handle desktop designs better than handheld devices. It’s just not as big of a leap.

      A challenging question I get a lot is: “Where do we send 7″ tablet users?” Do they get the mobile site or desktop experience? That whole emerging gray area definitely shows the limitations of separate designs.

      0
      • 52

        I kind of figured that landscape tablets can be desktops – they are about small size desktops – but I personally create a separate experience for portrait tablets (somewhere between 480px and 750px depending on the design – ). Usually it comes up something similar to a cross between mobile and desktop.

        For me it just depends on whether or not I allow user zoom – if I don’t then dekstop sized graphical elements become pretty tiny on smaller tablets…

        -1
  27. 53

    I did a similar analysis about Obama’s iPhone app
    http://www.shunra.com/shunrablog/index.php/2012/08/01/mobile-performance-shorts-president-obama-and-the-case-of-the-redundant-downloads/

    TLDR – the app downloads every image twice, apparently due to malfunctioning predictive download algorithm.

    0
  28. 55

    Nice article..,

    0
  29. 56

    Great write up Brad! Now that their websites have had a smackdown you can make them have a smackdown too! http://itunes.apple.com/us/app/obama-vs-romney-fight-for/id543949986?mt=8

    -5
  30. 57

    We can see both presidents competing also in their convention apps this year, Both the Tampa 2012 (www.attrnc.com) and DNC 2012 (www.attdnc.com) web mobile apps really focus on the responsive approach besides bringing most of the features the native app provides.

    0
  31. 58

    “71% of mobile users expect mobile websites to load as fast, if not faster, than desktop websites”

    I guess that means that 71% of mobile users are stupid.

    -5
    • 59

      No, it just means that their expectations don’t change when they switch contexts. They don’t care about the fact that their device is less powerful than a laptop, or that connection speeds aren’t always blazingly fast. They just want to get what they’re after and get on with their day. If you don’t provide that to them, they will go elsewhere and many will never return.

      Or you can just call them stupid.

      4
  32. 60

    Responsieve image technic use à lot of http request. If you use proper png size reduction tools doesn’t it outweighs the extra http request?

    I did some testing myself and found the JavaScript powered solution slower than using one proper compressed image. Or do I miss something over here?

    Ps. I do think if their comes a standard built in to browsers that it is the best way to serve different images but i have my doubts at JavaScript solutions for this one.

    0
  33. 62

    If the initial intent of the analysis was to determine which of the approaches appeared superior, the result can only be considered as inconclusive.

    There are a couple of points I take regarding responsive design.

    1) It looks as if in practice, for many designers out there, “responsive design” is degenerating into “web page linearization” — basically a glorified update of what mobile browsers (like NetFront) or transcoders (like Novarra) used to do, except now it is implemented in a fancier way with CSS and media queries. Little thought seems to be spent on truly adapting the site for mobile — be it in terms of information structure, readability for small screens, simplification of navigation paths, or elimination of cruft. This is a worrying trend.

    2) At 4.2 MB, a Web page is unacceptably large for desktops as well. In the USA, the FCC considers broadband to correspond to 4 Mbps download speed — such a page would already take 8.4 seconds just to download. And according to the latest statistics, 119M citizens in the USA do not have access to that minimum level of broadband. I wonder what kind of demographics those campaign sites are targeting.

    2
    • 63

      1) There’s some truth to this point. It’s important to not just slap some media queries on a desktop site and declare “Hooray, we’re now mobile-optimized!” There’s a lot more that goes into creating a great mobile web experience. I made a site called Mobile Web Best Practices (http://mobilewebbestpractices.com/) that puts forth some considerations to make sites truly mobile friendly.

      2) 4.2MB is huge no matter how you cut it. The good news is that since the article was written, Obama’s homepage was redesigned and is now significantly lighter. It’s still a bit on the heavy side, but definitely not 4.2MB anymore.

      1
  34. 64

    Great article. I love the detail you go into comparing the sites and there are some great points about the kinds of issues one might consider when dealing with mobile sites. I think the future lies with responsive approach but today in my opinion it still depends on the site – for some responsive makes more sense, others should have a separate mobile version. Specifically, content rich/heavy site (as in, graphical content, not just text) I think benefit more from mobile-specific version. This is simply because there are still not enough tools for web developers to adjust content based on device, so a site rich with images and graphical elements, even with best responsive practices, will end up too heavy for mobile.

    In the specific case above, I think Romney’s approach in fact has better potential, it’s just that his web dev team made a few missteps and missed some opportunities for better layout/content along the way. Then again Obama’s camp could’ve done better job at their site as well. Still like you say, I’m glad to see these guys, who are often seen as being behind times, take advantage of modern web technologies.

    0
  35. 65

    Obama’s page length is actually ridiculous.

    *No innuendo intended

    1
  36. 66

    If Obama’s website fails to load on some Blackberrys (blackberries?), and its navigation fails to function on some devices — wouldn’t that mean that the primary objective “ACCESS” is a failure?

    2
  37. 68

    Obama’s site is responsive and by the typical page sizes they are not hiding anything form the user on small screen devices so this is an argument that a view full site link is not required.

    What I would like more developer think about though is that responsive web design as we know it is stil fairly new (I say as we know it because fluid design is nothing new) and although we may still present all or the majority of the content we are changing the experience dramatically. Although we hope to be improving the experience on small screen devices via RWD it could be that we have made a section harder to find or just that a user cant understand or see the where content has been moved or reworked.

    To try and gather this information I think it is nice to still provide a “view full site” link and then track if yours do toggle away from your optimized view and if they do if they do come back to it as well. This not only helps the user to find what they are looking for but it will also help us develop better experiences and pin point pain points for the users.

    It by no means is always necessary but I think in some cases it can be a nice way to learn about what your real users want and make quick updates to solve issues.

    Great write up Brad, been waiting for someone to do a comparison like this for awhile with two sites that are very similar taking separate solutions.

    2
  38. 69

    Responsive design vs separate mobile development will be an eternal struggle I think, however the point that each raise is that the *context* of viewer affects how the content is *used.* A great example is that of having a telephone link served to a mobile user where it would be mostly useless to a desktop / tablet user. Ultimately as a designer / front end dev / UI/UX you have to make a decision and be aware of the possible scenarios and make the most flexible solution (like instead of offering only a number keypad where you might need letters for a postal code). There probably will never be a perfect solution and in a lot of ways we’re working in a fractured ecosystem that’s arguably *worse* than the days of IE vs Netscape. Ahh the halcyon days of layers vs divs…

    2
    • 70

      “A great example is that of having a telephone link served to a mobile user where it would be mostly useless to a desktop / tablet user.”

      A telephone number *shouldn’t* be useless to a desktop/tablet user. Services like Skype and the ability for tablet users to save a phone number into an (often cloud-synced) address book are great reasons not to ignore a phone number’s usefulness on these devices. Arbitrary “people won’t ever do that” assumptions go both ways. I wrote more about this here: http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/

      -1
  39. 71

    It would seem that Obama’s site designers, developers, strategists, and writers are not on the same page, let alone same solar system. Else, this pithy, informative and indeed entertaining comparo should not have been so competitive.

    4.2 MB? Egads.

    -2
  40. 72

    So Mitt Romney created twice as many jobs for web developers as Obama. :)

    3
    • 73

      Hahahaha! More versions of website = more jobs. Your logic is sound. Let’s get the 10″ tablet and 7″ tablet sites up and running as well!

      0
  41. 74

    Oh here we go again with the separate mobile vs. responsive design debate. I predict in the future people will get sick and tired of using their mobile device as a primary means of using the internet and go back to a nice 27″ flatscreen monitor where they can see everything, interact with everything and actually type on a real keyboard vs. all this touchscreen nonsense. We’re cultivating a nation of slide-swiping screen surfing zombies.

    -45
    • 75

      I’ll point you in the direction of this excellent point by Karen McGrane (summarized by Luke Wroblewski here http://www.lukew.com/ff/entry.asp?1602):

      “Disruptive innovation is often led by more expensive and less capable products that create new markets. These crappy substitutes do only one thing better: they give people access to something they didn’t have before. This happened with personal computers, transistor radios, disk drives, photography, and now mobile.”

      Whether you like it or not, these “nonsensical” smaller, touch-enabled screens are where the world is going. It’s up to you if you want to come along, or get a job in a museum instead.

      8
  42. 76

    OMG! That was such an amazing way to compare things with real time examples. Personally, I use a separate mobile website design since they offer a lot more enhancements over a responsive theme.
    BTW, what’s your personal opinion?

    1
    • 77

      Hardik,
      Neither approach ‘offers more enhancements’ than the other; it really depends on how you construct things. Each approach has its own advantages and disadvantages, however as time goes on and more devices enter the scene (http://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422) it’s going to be increasingly difficult to create and maintain entirely separate experiences.

      0
      • 78

        Agree. Thanks for your reply though!

        0
        • 79

          Personally I think that responsive sites will become the dominant form of web design as we move into the future. I’m not saying that stand alone mobile sites wont have their place but we have to think about the future and what is currently happening. Everyday we have devices being created and thought of with varying sizes. Televisions are being utilized for tv browsing. We can surf the web on gaming systems. Fridges are now allowing you download apps for…I don’t even know what. Maybe to play angry birds while you fill up your cup with ice.

          Responsive design is also fairly new (sort of) and as more time and thought is placed into it, it will continue to get better and be seen as a more affordable option for multiple users across multiple platforms. Does this mean that responsive design is “better” than having a separate mobile website, well the article does a great job of supplying strengths and weaknesses. It does mean that your website becomes more accessible to a broader range of devices and screens while maintaining the brand. With the future being thrown at us by the hour, this could prove to be a valuable investment.

          0
  43. 80

    Outstanding article. You could have used any context as a comparison, but these two sites are perfect for their timeliness, opposing strategies and equally having room for improvement.

    Your arguments and points of analysis are a great tool for evaluating any site design and UX. I know I’ll be referring back to this article for my current projects.

    For the record, having a link to the ‘full site’ is congruent with having a link to the competition. With the percentage of folks browsing the interwebs via mobile, you had better feed them the full extent of your content. For the client’s sake, develop your experiences utilizing a single CMS if at all possible. There are certainly cases where having a separate mobile site makes sense, but far too often those sites miss the mark with lack of content and url issues. That being said, if it means stepping in the direction of serving a mobile experience – onward!

    In the end, it is all about the user and their experience. How are the conversions? Where are their exit points? If you have two sites, are you comparing client flow between the sites? How does the competition stack up? Are you asking the customer about their experience?

    I can’t always articulate what I like on mobile, but I can definitely tell you what frustrates me. Unfortunately, those things that frustrate me I run into far to often.

    4
  44. 81

    Good post. :)

    0
  45. 82

    Brad,

    I agree with most of the analysis here but in choosing the presidential candidates’ sites you risk conflating “separate mobile site” with “device detection”. It is worth clarifying that device detection does not imply “separate site”, though it can certainly be used that way if you want. In fact, most leading brands that use device detection don’t have separate entry points.

    When you set aside this potential conflation a more interesting debate ensues, which is how best to achieve responsiveness in to different devices and use cases, separate to URL schemes, third-level domains and so on.

    Ronan

    2
    • 83

      I hear you loud and clear. Serving up a separate experience from the server doesn’t necessarily require a separate subdomain.

      “most leading brands that use device detection don’t have separate entry points”

      I have been seeing more sites serve up separate mobile templates without URL redirection, but the majority of the separate experiences I see use a URL redirect. Can you point me to some good examples?

      Keeping everything under one roof is certainly a better strategy as URIs can remain singular objects and we can avoid jumping through a bunch of hoops to serve up the right experience.

      Server-side adaptation is still an extremely powerful and viable option, and I strongly believe client and server side solutions needn’t be mutually exclusive.

      Thanks for the clarification!

      0
      • 84

        @Brad – You can check out my personal site for an example of a site that optimizes markup and assets per device classes. I’ve just split the experiences detecting mobile and non-mobile using Categorizr. You can read more about my thoughts on this here. http://www.brettjankord.com/2012/02/29/hrwd-hybrid-responsive-web-design/

        Server-side adaptation can be a powerful tool, but client-side adaptation can be equally powerful in optimizing performance of you site for and being aware of what you are sending over the wire. Like you said, they don’t needn’t be mutually exclusive.

        Great article, you can tell a lot of research and thought was put into this. I was really surprised when I saw screen shots of both sites compared side to side.

        2
  46. 85

    I believe Jakob Nielsen’s research, which I take quite serious as it is based on data, suggests that a seperate experience (as a seperate mobile site or a native app) is generally better (if done right) than a single, responsive site.

    Having said that, I think over time most implementations will be responsive websites. Because they are more convenient to manage, because the end results will become better as we gain experience in building them, and for one other important reason: money. I am thinking that the majority of website owners simply cannot afford multiple implementations.

    Longer term I think this is also true regarding the discussion native apps vs web. It’s a huge drain in resources supporting multiple native implementations, and let’s be honest: a significant percentage of native apps are web shells only, not actually interacting with the device.

    -1
  47. 87

    Insightful and interesting discussion.
    From a users standpoint mobile lite doesn’t cut it. But speed is paramount as well. On a mobile device, all content needs to load much faster.
    I’d love to see the next generations too as it becomes easier to sift through or skim content rather than the monotonous scroll.
    Responsive design definitely has superior flexibility across multiple devices. That said, there are still a
    Handful of applications that warrant 3-5 simple action/info tabs incorporating that under one URL would be very cool indeed

    For example:
    Taxi or
    Restaurant need a map, hours, address, click to call and a brief description of service/pricing
    That’s all from me. I’m excited to offer RWD to new clients.

    0
  48. 88

    I think the best way out is to detect the device/browser, send it to the server and serve the required design (HTML DOM) to the user from server-side. This is possible in WordPress and even other Web Dev platforms like PHP, ASP.NET. That ways it will solve the mobile/desktop URL issues (like Romney’s website), and also the wastage of bandwidth in a responsive website (like Obama’s website). For switching between mobile/desktop, cookies can be used to serve content from server-side.

    0
  49. 89

    I personally love responsive design and also think it is the way to go for heavy content websites but I also like the option of “view full site” on sites like tigerdirect. Half the time when on mobile sites I don’t get the information I want and it’s usually on the desktop version so I have to view that version. I think Device.js would resolve a lot of url redirection problems and content parallelization.

    0
  50. 90

    This is a great article, and an even greater discussion piece – the comments in this article alone are a testament to that.
    When I try to make some conclusions about this myself, I try to imagine how Steve Jobs would have approached the Mobile Site V.S. Responsive site (perhaps there is some of his wisdom on this already recorded?). I would think Steve Jobs would favor the Mobile site: not because he didn’t understand or appreciate the logic involved with content being fluid inside a design (and the advantages that come with it), but because he would put so much importance on the user experience as it occurred on each device, he wouldn’t want to risk the responsive design not displaying exactly as expected.
    As a side, if you’re putting so much CSS/JavaScript/etc into your ‘Responsive Designed’ site to account for the various screen sizes (primarily: PC, tablet, smart phone) such that they all look very different and customized to those devices, you’re effectively just creating a mobile site anyways – you’re just leaning on code instead of establishing that more finitely during the design stage. To me Responsive Design entails a sort of ‘trust’: that the rules you’ve set out in code are generic enough to account for any content that should be added, removed, or edited in any way. When there are so many rules that you’ve effetely made distinct designs for each of the common devices, It’s no longer Responsive Design – it’s Mobile/device-specific-design masked as responsive design through way too many conditions/rules in code.
    That said, and as some others have mentioned, this probably brings into question the nature of design as its importance to both brand, and the user-experience as it relates to the content or data being queried. For example, perhaps Wiki makes sense for a ‘Responsive design’ because the information may be more easily ‘trusted’ to follow the established coding rules, whereas something like the Obama website needs to actually think about what information is most important to be displayed in such a small viewing area, and look at interactive/functional design methods to hide or contract the less meaningful/urgent information. My closest analogy to that, is to think about ‘banner’ style advertisements (in newspapers, magazines, or on the web): very few advertisers would ever think that some advertisement they used on a full page in a magazine could somehow be reorganized into a small banner on Amazon.com – their pitch may be identical, but the content and design in the smaller advertisement space has to be reworked. So for me, I don’t think either approach is a definitive winner – it’s more so a case of sensible application. However, if I was forced to pick one side of the fence, I’d probably put a lot of merit into Brad Frost’s reply above, “it’s going to be increasingly difficult to create and maintain entirely separate experiences.”

    2
  51. 91

    Excellent article!

    0
  52. 92

    thank you so much for this insightful piece! reminds me of the website comparisons made during the 2008 elections in the new york times re: obama vs mccain (http://campaignstops.blogs.nytimes.com/2008/10/09/whats-in-a-web-site/). always interesting to see how interactive strategies, be it mobile or desktop (or both! re: responsive) come into play during election time.

    -1
  53. 93

    I believe having a separate mobile web site is better, the nature of mobile users is different than desktop users. movilqr.com

    0
  54. 94

    Fantastic article. I’m working on redesigning a website to a Responsive site, and am thinking of a bunch of ways to cut out the clutter and get straight to the important info, rather than making the user scroll 2 miles to find something.

    -1
  55. 95

    This is a great article however, you have not alluded to the core reasons why websites are built, which is for businesses to be found and get traffic typically through search engine optimization. Its common knowledge that in the mobile world, dot.mobi domains rule just like dot.com domains in the ordinary computer environment. If you want your website to be found on a mobile device, I think its impractical to optimize your site for a PC and hope it will easily be found from a mobile device. Adobe, Microsoft, Google, Apple and so many other big companies have already gone mobile….(not responsive sites). I believe this battle is beyond website responsiveness esp when SEO comes into the picture. A responsive site is good if customers already know your website, otherwise a lot of effort will be wasted. In Google’s mobile search engine rankings for instance, dot.mobi is at the top of the pyramid…I rest my case.

    0
  56. 96

    Sorry about the double posting…

    0
  57. 97

    If you need to want to be a website designer, he / she should possess good communication and visual skills since he or she is working having a client. Whether you’ll need Enterprise Advanced Web Applications or Massive Social Networking Website Design, we of highly-motivated can help you in meeting or exceeding your expectations in relation to developing a dependable and high-end website. Besides every one of the normal functions may also create interactive fireworks sophisticated rollover effects through software,

    0
  58. 98

    What a great comparison of the two websites and their mobile counterparts. I wrote an article that answers four frequently asked questions about responsive web design. http://www.responsivewebdesignblog.com/2012/09/four-frequently-asked-questions-about-responsive-web-design/

    0
  59. 99

    Our company is looking into designing more for responsive design thank you for the information!

    Stacey

    gotostudio7.com

    0
  60. 100

    Well, I totally agree with you about the fact that people’s perception of any person or company or any concept is greatly influenced by the way they perceive it. In this everyday expanding world of IT web development and business, providing quality service stands second. Whats matters most is how you represent yourself before people or your customer. Be it Separate Mobile Website or a Responsive Design Website, you got to be sure that people perceive you the right way and exactly the way you want them to see you.

    0
  61. 101

    Why do you need a mobile website when you have a responsive website ?
    I made my Avatar Simple template with mobile first. But Since I try Bootstrap and implement responsive to my template, i did not use mobile website. And i consider to remove mobie function from my template.

    0
  62. 102

    Jonathan Thaler

    July 10, 2014 4:19 pm

    You may not realize it, Brad, but you answered you question above about which is more effective, separate mobile or responsive:

    “One MB might not seem like a big deal until we look at the mobile user’s expectations. 71% of mobile users expect mobile websites to load as fast, if not faster, than desktop websites, and 74% of mobile visitors will abandon a website if it takes more than 5 seconds to load. In other words, you have 5 seconds to get someone’s attention. Make it count.”

    I have never seen a HTML5/JQuery-heavy responsive site that opens in 5 seconds or less, even on a 4g Verizon connection. Responsive sites, as you point out later in the post, are in the vast majority of cases, thin long versions of the desktop website, with the same amount and type of content and functionality that is optimized for the computer experience, not the mobile device and connection.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top