In today’s world many people are utilizing mobile devices most, sometimes not even having a personal computer of any type. In the US, it is estimated that 61% of all web access was through a phone, up from 57% in 2019. That jumps to 68% worldwide in 2020. Tablets typically only account for 3-4%, but even without them, we’re clearly seeing more people utilize mobile devices to access the web.
On some websites that I have managed, I see 70% or more in the US using a mobile device. So the number of users who access it via a mobile device can vary based upon the specific website and the types of users it sees and how it is utilized. Either way, we can clearly see a pattern of web users utilizing their mobile device. And this pattern doesn’t seem like it will change anytime soon.
Therefore, one of the things we often want to do is design a website with the mobile user considered first. This is referred to as Mobile First design.
Alternatively you can also choose to focus on desktop, and “fix” your site to be mobile friendly. In both cases you might see the layout shift and change based upon what screen the user is using.
However, in a mobile first design, it will be guaranteed to work correctly on a mobile device, and then improved for larger devices.
The challenge web developers will have is due to the complexities of figuring out which mobile device they are developing for. Phones are different from tablets, which are different from laptops and desktops. And if it was only that difficult we wouldn’t have too much of a problem.
However, each phone and tablet has its own sizes, both in physical size and pixel dimensions. Additionally, while some people update their phone every few months to once a year, many people have older phones that are years old which still need to be supported. Trying to figure out exactly what size is therefore quite challenging.
The physical size for a phone tends to range from about 5.4 inches to 6.4 inches with the average being about 6.3 inches.
Additionally, many phones now have high resolution displays which means that the relative pixel viewport is smaller than the actual pixels, but they use some pixels to smooth out the display so it’s easier to read. This can lead to issues with understanding how to measure elements if we use pixels.
The final complexity in working with mobile devices is we don’t know if they are being held vertically (portrait) or horizontally (landscape). This will directly affect the visible area and can cause issues for our layout.
Luckily, there are a few options which we are given to make our life easier. We will consider the two biggest options to make our life easier.
The Meta Viewport
The first thing we can do is tell the browser to use the viewport dimensions instead of the physical pixel dimensions. A simple tag lets us do that.
<meta name="viewport" content="width=device-width, initial-scale=1">The initial-scale tells the browser what level of zoom, or scale, should it start with. If a user wants to zoom in, they can.
Be Careful of Widths
Large width elements can be difficult for mobile devices. No one likes to scroll side to side, and with the limiting size on a mobile device, it’s easier.
Therefore, many people will want to define a max width property on elements that can easily go larger (like images), or even all tags – like is shown below.
img, iframe, table { /* common elements that go larger the the screen size */
max-width: 100%;
}Or
* { /* do this for all elements */
max-width: 100%;
}Notice that we used a percentage size, and not a fixed size. This means we are not relying on a viewport to be a specific size. This is an important thing.
Finally, we will control how the site is viewed by using media queries.
Making Your Website Mobile Friendly was originally found on Access 2 Learn
