Building Mobile Optimized Layouts With CSS + HTML
Optimizing your website layout for mobile browsers is hard. There are no quick tricks to transform the beautiful layout you’ve created on your laptop/desktop screen into a mobile-specific layout. The details of how you do this really depend on the individual project itself.
But, luckily, there are a few basic CSS and HTML tools you can learn to get you started in the right direction. Before I discuss those tools, though, let’s first look at why mobile optimization is difficult.
The difficulty stems from two major issues:
- There is no definitive way for CSS to detect whether your website is being accessed from a laptop/desktop or a mobile device. Instead, we have to really on screen size.
- Mobile browsers have a very large pixel density. As a result, fixed sizes (
px,pt, etc.) will be appear much smaller on a mobile device with a screen width of 300 pixels than they will on a laptop browser window that is also 300 pixels wide.
Now that we know why optimizing for mobile is so frustrating, let’s take a look at what we can use to overcome these difficulties.
CSS Media Queries
Media queries are a great place to start when optimizing for mobile. They allow you to set different CSS properties based on attributes of a specified media type. You can dig deeper into everything that can be done with media queries here. We’re going to focus on just one media type: screen.
Media queries are how we’re going to detect the screen size and change our layout accordingly. There are a lot of different mobile devices available with varying screen widths, and which screen sizes require layout changes will depend on your individual layout. But I think the following ranges are a good place to start:
Media queries are really just conditional statements within your stylesheet. If the screen size meets this criteria, include this CSS code in the stylesheet. The basic rules of CSS still apply. Namely, if you have conflicting CSS declarations, the declaration located closest to the bottom of your stylesheet will be used.
As a result, you will need to place your media queries after your ‘base’ CSS (declarations outside of the queries) so that the declarations placed within the queries will override the ‘base’ declarations if the screen width meets the condition.
Relative Units
The next bit of weaponry in your mobile optimization arsenal are relative units. They allow you to set the sizes of HTML elements, fonts, margins, padding, etc., based on the size of something else.
The most commonly used relative units fall into one of three categories: percentages, font-size units, and viewport units. I’ll focus on height in the following examples, but these units can be used for any CSS property that accepts units as a value.
Percentages determine the size of a property based on the parent element. In the above example, we’re telling all <p> elements to be half the size of their parent element.
Font-size units (I made this term up because I couldn’t find an official umbrella term for these) determine the size of a property based on a certain element’s font size. em uses the element’s font size, and rem uses the root element’s font size (the <html> tag).
In the example, each <p> element’s height will equal five times its font size and the width will equal five times the font size of the root element.
Lastly, viewport units determine the size of a property based on different attributes of the viewport (a.k.a. browser window). 100vh is equal to 100% of the viewport height, and 100vw is equal to 100% of the viewport width. You also have vmin and vmax at your disposal, which allow you to base the size on either the viewport height or width depending on which is smaller (vmin) or larger (vmax).
So, in the above example, the height of all <p> elements will equal 10% of the viewport height and the width will equal 10% of the viewport width.
If you’re like me, you might be thinking that the combination of media queries and relative units is all you need to optimize your site for mobile devices. But if you play around with them a little, you’ll notice some problems.
Relative units, especially viewport units, change dramatically. You can try to temper them with complicated formulas using the calc() method like this one I got from CSS Tricks:
But you’ll still run into problems because the mobile browser is using a much larger viewport size than it should be. What we really need is a way to standardize the viewport to our specifications.
HTML Meta Elements
<meta> elements allow you to take some control over the environment in which your website is accessed. We can use a <meta> element to tell mobile browsers (and only mobile browsers) how to calculate viewport sizes.
The initial-scale is the ratio between the device’s width and the viewport size. So setting it to 1.0 standardizes our viewport across devices, allowing us to really harness the power of relative units and media queries to optimize for mobile.
Like I said at the beginning, where you go from here depends on the specific layout you’re working with. You might find that a different initial-scale ratio suits your site better, or you might dig beyond the scope of this article into CSS preprocessors like Sass. But the combination of these three tools will get you a long way toward mobile optimization using just HTML and CSS.
