Mobile-First Thinking and Adaptive/Responsive Design

What is "mobile-first thinking"?

With more and more people viewing websites on mobile devices and tablets, it makes sense that our websites should be able to respond according to the device with which it is being viewed.

When we add content to our websites, we should think in terms of "what would someone using a mobile phone need to find?" and "how can I make sure this page loads quickly on a mobile device?" This helps us keep our sites from being weighed down by out-of-date, unnecessary text and images, and this is beneficial no matter how we're viewing a site -- should someone have to scroll through too much text just because they're using a desktop computer? We don't think so.

Instead of designing for the desktop or laptop computer, we want to design for the mobile device first. After we have a good mobile design, we'll move to the tablet, then the desktop/laptop. This does not mean that websites can not have a "cool" look and feel! It simply means that developers should keep in mind that a lot of their users will be viewing it on a mobile device.

Content Choreography

Content is the most important part of any website. This is especially true when thinking of things from a mobile-first perspective. With our layout system, regardless of the layout type you choose, the content at the top left of your page will always show up first in mobile, and other content will "stack" underneath." So, when we add content to our pages, we need to think about what will show up first, second, third, etc. if we were to view a page on a mobile device. View the graphic below for an example of how this works:
Content Choreography

Load Time

In addition to content, we should also consider load time from a mobile perspective. Load time on a mobile device will be slower if the website has a lot of pictures and/or very large picture files to load. Images should be size appropriately, both in terms of pixel height and width, and file size. Video files should also be kept as small as possible and should not auto play when the page loads.

Testing

If you would like to see an example of this, try resizing your browser:

  1. Click the button that looks like two boxes at the top of your browser window (next to the close button).
    Resize
    1. Mac users, click on the green button.
      Resize
  2. This will shrink your browser window.
  3. You can now grab the side of the window and adjust the widths.
    1. Mac users, grab the bottom right corner of the window.
  4. As you are doing so, your browser will recognize that your screen is getting smaller and adjust the website's content accordingly. If you shrink your window all the way down, you can see what the mobile view of your website will look like. Try it on this site right now!

What to keep in mind when thinking mobile first

  • What does the user really need to view?
  • Keep files small in size.
  • Try to keep slider photos the size they will be viewed at desktop size (the browser will shrink the photo for mobile devices).
  • Do not have videos auto play on load.
  • Keep the most vital information in the top of the left column when working in a two column page. (One column pages should have the most vital information at the top.)