BLOG

Mobile First Design

by Ryan Wilson

Are you aware that more than half of all traffic on the internet is now on mobile devices? This is a fairly recent phenomena, as in less than ten years so many more people now predominantly surf the web on their phones than on desktop or laptop computers. This change presents a challenge to web developers, who must anticipate the performance of sites and web apps on much smaller screens.


One productive way to handle this challenge is to start developing a website from a mobile-first perspective. What exactly does this mean? Begin by designing and coding the mobile “version” of the site first. Most of the time, this does not mean a separate site that loads from a different set of files than the regular desktop site. It means that all of the css is responsively designed and coded to work properly on the mobile screen size first, then scaled up to bigger screen sizes.


There are positive outcomes of approaching things this way: first, it ensures that the site will not “break” and look like a collapsed mess when viewed on phones or tablets. Second, it is much easier to scale-up the design elements and code than it is to scale-down. Using responsive element units such as rems, ems, vh, and vw in CSS on conjunction with media queries will make sure the site consistently scales proportionally.


Looking into the future, it is inevitable that mobile and smaller screen sizes are going to continue to outpace desktop viewers on the web. No matter what your presence is on the web, whether a business, nonprofit, organization or individual, it is in your best interest to have a mobile-first designed website to stay current.

Please contact me to get a mobile-first, fully responsive designed website.