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 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.
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.
Google Docs on Mobile
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.
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.
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
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.
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.
/* 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.
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.
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!