36

I was discussing a new web application project, for deployment at a client site, and talking with a web guy about how "mobile first" is so great when someone asked "Why?"

It got me thinking, as responsive design was all about catering for low resolution mobile screens, but modern phones and tablets seem to have much higher resolution now. Some modern phones have greater resolution that most desktop monitors in common use at my client sites.

So, it must be about more than just pixels. Phones (and tablets) have very different interaction modes, compared to desktops. But, then the real question is, how do we create a complex web application that works across all devices, hopefully without having a version for each device?

Edit: Thanks for everyone for taking the time to answer my question. It seems that my question might be a rookie one, but I'm still not clear what the answer is. Perhaps that's because there is no answer.

In the scenario of a complex line of business application that should work for desktops, laptops, tablets and mobile, is it even possible to create a single site, without making a lot of crazy compromises?

I've been told that having a separate "mobile" site (m.whatever.com) is déclassé, but it seems to me that it'd be a lot simpler to implement and easier to maintain.

Anyway, thanks again for all the great feedback. I wasn't expecting such a huge response. If anyone has anything else to add, regarding my business application scenario, I'd love to hear it. Thanks again.

| improve this question | |
  • 9
    Responsive design isn't really about catering for low resolution mobile screens. It's about delivering the best experience for each device from very big too very small. – msp Sep 15 '14 at 11:51
  • 21
    Tablets and Phones may have a higher resolution, but the actual dimensions are still smaller. You have to keep in mind that the content must be readable and "tapable", therefore you still have limited space on mobile devices. – Kweamod Sep 15 '14 at 12:15
  • 2
    I thought the entire "mobile first" thing was a slogan created by smartphone enthusiasts to make themselves feel more important because by far most people still use actual computers to browse the web (the whole "mobile exceeds PC" thing is about native apps, not websites). Only do "mobile first" if your userbase has a mobile majority - which is not true for most websites. – Matti Virkkunen Sep 15 '14 at 15:19
  • 3
    @JonW That's based on data by one provider (Shopify) of one type (e-commerce) of websites. Cannot extrapolate to the entire internet. – Matti Virkkunen Sep 15 '14 at 15:55
  • 2
    @JonW: cnn.com puts mobile browsers at 8% and desktops at 45% by total time spent in the US in February, and that stat counter everybody always cites seems to show similar data. Of course one should check the stats for whatever region/target group they're aiming for. – Matti Virkkunen Sep 15 '14 at 17:36
61

Yes and no. Of course Mobile First is still relevant.

It's not about pixels. It's not even just about screen size. It's about context and location and attention and convenience and portability and constraints and content and strategy and organization and relevance and lifestyle and much more.

Responsive design can end up being nothing more than a new coat of paint. After a while the flakiness underneath is bound to show through. A responsive website doesn't automatically mean you're all done on mobile. It helps a bit for sure, and it's part of the process, but if you put lipstick on a pig, it's still a pig - a responsive website does not automagically make responsive content.

There was never meant to be a mobile silo. It's a mistake to think that 'Mobile First' means you go and design your website or web app for mobile first - as if in some kind silo that says on the door: "we're doing mobile in here". Mobile First is very much about removing those silos, not creating one for mobile.

Mobile First is a methodology – a mindset. It’s about designing with the constraints and capabilities that mobile provides. Designing with constraints forces you to focus and prioritise while designing with new capabilities attracts innovation. Hopefully with the result that what you learn from the process benefits your content everywhere - not just on mobile.

While 'Mobile First' is relevant, it's not the whole solution - not by a long shot.

Personally I think the word Mobile in 'Mobile First' has been taken a bit too literally and maybe with a bit too much tunnel vision - as a command rather than a mindset.

So don't take 'Mobile First' as your only design strategy - don't focus too much on mobile, but don't ignore it either.

Perhaps a better term for the approach might be "Content Everywhere".

This is kind of backed up by Joe Stewart whose design company Work & Co redesigned the Virgin America website:

In terms of the overall way to think about design and design process or responsive, some people like to say there’s a mobile-first way of looking at things but with responsive it’s everything first. It actually is sort of relieving to be able to think about all of it all at once.

To respond to the edited comments in the question:

It's worth trying to find case studies of how others have approached mobile for complex lines of business - such as the article or slideshare of Neil Turners experience working with TUI.

Below are a few relevant slides from my own slideshare on mobile UX

enter image description here

enter image description here

enter image description here

The fact is - mobile is here to stay. In fact, let's forget the word mobile for a moment - content can be consumed on a multitude of devices. Somewhere you feel you want to draw a line that says big screen experience on one side and small screen experience on the other. That line doesn't have to be your decision to have a m.whatever.com site.

More and more, the question is not about delivering different content for a big or a small screen, it's about how to make a consistent experience when moving between devices.

Having a long term content strategy that includes small screens is critical. Having a different strategy for mobile vs desktop is a road to disaster.

Think not about delivering different content, but about delivering content differently.

| improve this answer | |
  • 5
    Fantastic answer (as I would expect from you!). I had someone recently ask me if I design 'Mobile First'. My answer was - I design for content and then decide how best to display that content on whatever device is appropriate. Don't have any one/two/twenty screensizes in mind to start with, think of the content itself and how best you can serve that up. – JonW♦ Sep 15 '14 at 15:49
  • 1
    Make sure to take into consideration your proposed demographic for the project. I recently completed a web site for a company whose analytics showed that less than 10% of the current users visit the site on mobile devices even though the site already had a decent mobile adaptation. In this case using a "mobile first" mindset would be a mistake. I think the first question to ask yourself when preparing a responsive design is (like so much of life), "why am I doing this and what is the evidence to prove why I should be doing this"? – Jasper Sep 15 '14 at 17:13
  • 1
    This answer managed to explain that "mobile first" isn't about mobile, and it isn't about first. Mind blown. – Alan Shutko Sep 16 '14 at 16:43
  • 1
    @JimmyJunior Here's another excellent, interesting and very relevant slideshare from Soeren Engelbrecht at Tryg - a Scandinavian insurance company: User-Centered (Mobile) Device Strategy who had very similar issues. It's true - most users don't really want to fill in claim forms etc on a phone, and it's not worth trying to support the few that do. So you provide the tools - tools for different purposes, and delivered on appropriate devices. – Roger Attrill Sep 19 '14 at 13:20
  • 1
    I guess that means I was right all along, when I said it seemed like there wasn't an answer that fits all scenarios. Once again, I appreciate you taking the time to help me. – Steve Jones Sep 19 '14 at 13:49
8

Responsive web design isn't about catering to low resolution mobile screens. It's about catering to all physical device screen sizes--be they high or low resolution.

In other words, just because mobile screens are much higher resolution now, they are still small physical screens. The extra resolution isn't there just for us to cram more data into it, but rather to provide a crisper, clearer display.

You are correct in that it's also about interaction. Touch vs. click, for example. As for your last question, how do we create complex applications that work across all devices...well, there's no stock answer to that. Mobile First is still a prudent option, but there are other options as well. It will all depend on the particularities of your project.

| improve this answer | |
3

I agree that mobile first is a good starting point. It is much easier to start with a minimalist design and build out rather than start with a desktop and strip items out.

But like anything else Mobile First is a bit of a fad as everyone rushes to tick the 'mobile viewport' box while forgetting that the desktop (and tablet lets not forget) are also important platforms.

More than once I have been asked to fix desktop designs which have clearly been built with a mobile first mindset and have ended up delivering a poor desktop experience - think un-necessary accordions and acres of white space as the content is crammed into left alignment.

Mobile First is one tool among many, not the whole set.

| improve this answer | |
3

There are some very good answers here regarding "mobile first" from a UX perspective (which makes perfect sense, since this is the UX SE). But it's important to realize that "mobile first" is a hugely important phrase from a programming perspective as well.

The programming aspect is based on two basic principles...

  1. When coding for responsive design in CSS, you will be required to use some (often many) media queries. Media queries check for things like screen resolution, and determine whether or not to apply the next block of CSS. Keep in mind, media queries build on top of all of the CSS which has come before it.
  2. Bandwidth is a scarce resource on mobile devices. While it's easy to load a complex web page on your desktop computer at your office with a T1 line, it's much more laborious to load that same page on your old smartphone running on a 3G connection.

Combine those two facts, and here's what you get... If you build your site "mobile first", then the mobile device will only need to load the bare minimum CSS in order to render the page properly. When that same page is viewed on a larger device (presumably with a better internet connection), that device will have the luxury of loading as much CSS as needed to render properly.

Basically, a "mobile first" approach will give you the simplest CSS for the smallest devices.

I'd also like to briefly address this quote:

I've been told that having a separate "mobile" site (m.whatever.com) is déclassé, but it seems to me that it'd be a lot simpler to implement and easier to maintain.

Unfortunately, you are greatly mistaken. When you build a separate mobile website (completely avoiding responsive design), you end up with two websites. This is certainly not easier, it gives you two full codebases to deal with... double the chances for bugs, double the places to add new features, double the code for devs to become familiar with.

In summary, "mobile first" is still relevant (to programmers), and responsive design is awesome!

| improve this answer | |
  • Thanks for your great response. Regarding the "two websites" issue, I'm wondering if creating all the CSS infrastructure to support mobile, tablet, laptop and desktop screens really is easier than creating two sites. I'm talking about a complex line of business application, rather than a traditional website. Seems like there isn't really a good solution, or if there is, I can't discover it yet. – Steve Jones Sep 17 '14 at 8:35
  • Short answer: yes. Managing a long train of CSS is definitely easier than managing two full websites. And these days, there are some great tools which make it easier to break the CSS up into smaller, bite-sized pieces. Take a look into Sass... It makes CSS a much more manageable (and almost fun) language to interact with. – Lindsey D Sep 17 '14 at 8:49
  • And tying (slightly) back into the original UX theme... If your "mobile" site and your "desktop" site really look & feel like they are from the same family of design, then the differences between your "mobile CSS" and "desktop CSS" should be minimal. You can actually accomplish a lot with relatively simple media queries. – Lindsey D Sep 17 '14 at 8:52
  • Thanks, I get that media queries and CSS are a great help. What I'm really struggling with is that interactions are very different and media queries/CSS don't help with that. – Steve Jones Sep 17 '14 at 14:10
2

While overall screen size, device power, and interaction methods are clearly important considerations, "Mobile First" has just as much to do with where the user is and what they are doing while viewing your site on their mobile device.

Example 1

  • A desktop visitor to an airline website may want to leisurely browse fares & perhaps book a flight. Maybe they want to select seats, check frequent flyer miles, or print a boarding pass.

  • A mobile visitor to the same site rushing to catch a flight may be more concerned with flight status, gate info, a map of the airport they're currently lost in, or the ability to show a boarding pass with a QR code.

Example 2

  • A tablet visitor to a restaurant website might want photos, directions/contact info, online reservation or reviews.
  • A phone visitor to the same site might want all of those plus social "check-in" features, geolocation to tell them about local specials, or the ability to order and pay from their device.

In both cases you can have the same underlying content and data model, but the focus on key functionality is very different. This affects the layout, structure, etc at least as much as screen size and "tap vs click", if not more.

Paring down your app/site to consider these situations and provide users with what's most needed (& therefore likely to keep them coming back as a happy customer) is the real key concept of "mobile first." The question of "how to fit small touch screens" is just one component of achieving that real goal.

Creating a universal "responsive" site that rearranges/shows/hides various things, or deciding to create/maintain an entirely separate "m.domain.com" mobile site may depend on how different and complex the user scenarios are for your situation. If features and content are built in a more modular way, it may be easier to pick & choose which components are shared or prioritized for a given scenario/device class.

| improve this answer | |
-6

My answer is a little different but I think it's also being missed by a lot of the current answers.

Mobile first is important because it reflects customer/society trends. The bottom line is that most people are no longer accessing web sites from a desktop a high percentage of the time - they are accessing it from their mobile phones!

Just look at the analytics behind email campaigns. The clicks that you do get are no longer from desktops, they are from mobiles. A customer is highly likely to get your email, read it on your phone, click from your phone and make an initial visit from their phone too. Or your at lunch with a friend that tells you about a nice site. Are you likely to say "I'll check it when I get home" or are you likely to pull out your mobile phone and see it right then and there?

Subsequent visits may (or may not!) happen from a desktop. But more likely than not, their initial visit will be to your site via mobile and that's why mobile first is highly relevant and unlikely to change over time.

| improve this answer | |
  • 3
    Re: "Just look at the analytics behind email campaigns. The clicks that you do get are no longer from desktops, they are from mobiles." Are there any particular email campaign analytics you can cite to support this assertion? – Graham Herrli Sep 15 '14 at 17:04
  • 3
    Then link to one. Otherwise your post reads as unsubstantiated opinion. – Graham Herrli Sep 15 '14 at 17:31
  • 5
    You should support your posts with evidence from the start rather than relying upon others to provide counter-evidence. Since you ask for such evidence...how about the Pew Mobile Technology Fact Sheet for January 2014. Only 58% percent of American adults have a smart phone and those are concentrated among the upper class and younger age groups. You are not your user. Don't assume that because you use the internet predominantly on mobile all of your users will. – Graham Herrli Sep 15 '14 at 18:48
  • 4
    -1 for "you can't disprove it, so it must be true" and "because you (probably) visited lots of sites on mobile, so must have everyone else". As @3nafish mentions, please provide references and citations -- else, there is no evidence that they are factual. – Evil Closet Monkey Sep 15 '14 at 22:14
  • 1
    @JimBeam It is incumbent upon the person stating a claim, in science, research, debate, etc., to substantiate their claim; the audience is not responsible for refuting it. – Stephen P Sep 15 '14 at 23:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.