menu

Developing for Mobile First


  • Author: The Konverge Team
  • Published: 8/29/2022 10:11:48 AM
  • 5 minute read

Mobile First Layout

The importance of mobile compatibility

The internet is now primarily accessed by mobile devices. Actually this has been true since 2017 when mobile internet access first broke over 50 percent of site visits. See Percentage of Mobile Device Traffic Worldwide.

So it’s obvious that the websites we build will be used on mobile devices as well as desktop computers. However there is generally a mentality for programmers to focus on larger screens when building apps. Partly because websites are usually built by programmers on computers themselves, and partly because internet browsers were used on desktop computers for years before smart phones even existed.

Never the less, this mentally is a little bit of a trap and can lead us into design issues.

Mobile First

Mobile first development is a pretty straight forward concept. It means that the code you write is made to run on a mobile device, first. And then second, you will write more code specifying how it will function on a larger screen.

If you are building a page you may first style images to be the full width of the screen which works well on mobile, and then add code which moves content to the right side of the image on a larger screen.

Design Considerations

Maybe we should start with a disclaimer. Building a website that only works on a large screen is not out of the question. Let’s see an example.

Google Docs on Desktop

This is the clean layout we all know and love.

Mobile First Layout

Google Docs on Mobile

Mobile First Layout

This is the same app on mobile, which doesn’t look very user friendly does it? But obviously Google has a mobile solution, the Docs application (downloaded from the app store instead of visited on a web browser). Let’s see how that looks.

Mobile First Layout

Much better.

My point is that the application available at docs.google.com on the internet doesn’t have the engineering built into it that supports a great mobile experience. It certainly isn’t a “Mobile First” design. But the app does have a solution for mobile users and if you open the website on your phone, it will direct you to download the native app instead.

Now you may be thinking that this is a little extreme for most cases. Which is true. If you’re building a website for your local dentist office, then you’re not going to plan on building a native app to go along with it just for mobile users.

Screen Size

Let’s talk about more design considerations. How many pixels do we have to work with, and how much physical space do we have.

The width of a screen can be thought of as the amount of pixels wide divided by the pixels per inch (PPI) of the screen. The iPhone 4 has about 330PPI while the iPhone 11 Pro has about 455(PPI).

The iPhone 11 Pro is about 2.7” wide and therefore has roughly 1200 pixels to work with (1242px to be exact).

Now if you are a programmer you know that typically 1200 pixels represents quite a large screen when writing code and would definitely be considered a Desktop screen width when writing media queries (which we’ll talk about shortly).

This is because the iPhone 11 Pro has a high “Pixel Density”. It has a high amount of Pixels Per Inch. This is important to understand when we start designing HTML containers like a

to be a certain width in pixels.

When a programmers styles something with a 50px width, that doesn’t actually means it will take 50px on all screens. A 50px width may be represented on a phone screen with 100px if its scale factor is 2. This makes for a cleaner look on the display.

Knowing this makes our lives easier when programming since you won’t need to think so much about details like the PPI of an iPhone 4 vs an iPhone 11.

Pixel Density Represented

This image shows how a circle that is the same physical size can be represented by different amounts of pixels. You can see the advantage of higher pixel densities representing less distorted shapes.

Mobile First Layout

Media Queries

Media Queries are used in CSS stylesheets to apply styles only to targeted device types. The most common use is to apply styles only to certain screen sizes. But aside from Screens, Media Queries can also provide targets to Print, and Speech where specific styles can be applied. These options are called “mediatypes”.

For this blog we’ll dive into media queries applying styles to certain screen sizes only.

Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature ) {
   /* CSS-Code; */ }

See https://www.w3schools.com/cssref/css3_pr_mediaquery.asp for a full list of “mediatype” and “mediafeature” options available.

So let’s say we’d like to hide something completely on a mobile device.

@media screen and (max-width: 600px) {
  div.hiden-on-small-screens {
   display: none;
   }   }

Here we’re using ‘screen’ as our mediatype, and ‘max-width’ as our mediafeature. Our max-width is set to 600px therefore the following styles will only apply to devices with less than 600px of width.

Remember, pixel density is factored in by the device itself and doesn’t need to be considered for every device. Assuming the iPhone 11 Pro has a Scale Factor of 3 and is 1200px wide, then as far as the CSS is concerned the device’s screen width is 400px and would therefore fall into this media query.

Choosing a web app or a mobile app?

Many software clients are interested in building mobile applications when it may not be necessary. We’ve mentioned that it may be overkill when building primarily informative/static websites for small businesses. But it may not always be such an obvious choice. Maybe you’d like to make use of certain finger interactions on a small screen or use a device camera and you assume it’s time for a mobile app.

Another common question is “What about users that don’t have an internet connection? How will they access the site?”

These are good questions. Native apps will have certain benefits over web apps. But here are a couple things to consider if you’re on the fence about it.

Think about the resources that it will take not only to build the application for both iOS and Android, but to maintain these apps and build new features. Will your team have the resources for that?

Also think about the experience for users who will need to download another application on their phone to access your app. This can feel like a lot of commitment for some people. Lastly there are Progressive Web Apps to solve the “No internet connection” issue if you need a web app to be accessible offline.

Conclusion

Applications on the web will certainly be accessed by users on mobile phones and should therefore be thought of in the design phase. It’s common for larger companies to build Native Apps which provide a very specific experience for mobile users, but this is usually unnecessary for most apps available through browsers.

There are many helpful features that CSS provides to us to build layouts that change fluidly based on the screen size that is being used. Media Queries are the primary example of this and should be understood and utilized. There are libraries available like “Bootstrap” that abstract the use of Media Queries and make it very easy to set up styles and grid systems for different screen sizes.

Web development can be complex: whether you decide to build a site for desktop only, a responsive site, or a phone app, you'll need a software partner with years of experience to ensure that you get the best experience. Contact Konverge Today!

Subscribe and stay updated with our FREE newsletter.

Recent Posts

Let's Talk

To learn more about Konverge’s ultimate custom software solutions, please contact us for your free consultation.


We take your privacy seriously and will never share your information. For details see our Privacy Policy.

Busy Office Banner