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 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:
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.
If you would like to see an example of this, try resizing your browser: