Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Posts Tagged ‘Em’

RWD – Media Queries Introduction

Posted on: December 19th, 2014 by alemieux

Media Query Basics

No, I’m not going to start in on the history of the @media usage in HTML. I’d rather focus instead on the practical uses of the @media property as it relates to Responsive Web Design. But first, a practical tip.

In Luke Wroblewski’s now famous Mobile First approach, we start by designing a site with the smallest screen in mind first. What that really means is that you develop all of your content in such a way that will engage mobile users who, most likely, are on devices that are on slow networks and might not be able to support all the whiz-bang that a desktop browser might be able to handle.

There are some pretty staggering statistics of mobile phone usage in third world countries. Most internet activity is achieved over mobile networks with an array of devices that aren’t that sophisticated and can’t handle most modern website features.

There’s also an important movement to improve website performance for such devices and platforms as illustrated in Scott Jehl’s new book Responsible Responsive Design. Certain design trends offer huge, full-width imagery or video. Learning what’s served best on the mobile platform is trial and error, but the basic idea is the limit the use of heavy graphics, video, and JavaScript effects for smaller devices. More importantly, the content needs to be tailored for small screens so that what’s hierarchically most important is easy to find and is most useful.

With those limitations in mind, start by building the site in a mobile view. You can resize your browser to its smallest width possible. In Firefox, you can use the Responsive Design View and choose the 320 pixel width, which will be the smallest screen size. Load up your page and start coding.

One handy tip that I learned straight away was to include all of the essential styles outside of any media query. You’ll want to establish your font sizes, colors and navigation first, working towards what will work best on the small screen. I thought that I would only put those styles into a media query that targets small screens, but that’s not the Mobile First workflow.

Once you’ve established your base styles and things in the mobile view are looking good, you can now start to resize the browser or switch to a wider layout (possibly to target Tablets).

Max and Min Width

The key components to a media query are max-width and min-width. Let’s define what those mean:

max-width Anything less than the value you have after it.

Ex.

@media screen and (max-width: 780px)

What this query is targeting is anything less than 780 pixels.

min-width Anything greater than the value you have after it.

Ex.

@media screen and (min-width: 1920px)

This targets anything greater than 1920 pixels.

It seems backwards, but this is the way that media queries work.

In Responsive Web Design, your HTML structure and CSS styles should be flexible enough that when the layout changes to accomodate different screen sizes, that the text reflows and images and videos scale. What it doesn’t account for is when layouts break. Say for example, you have a 4-column section on your site that has the bios of 4 different speakers for an event. Those columns are floated to the left and sit right next to each other in a desktop layout, but what should they do on a mobile screen? The floats should be removed so that the columns become stacked. That’s where you’ll need a media query.

Targeting and Breakpoints

The whole idea of using a Media Query is to change the layout at a certain point where it’s no longer viable on a certain device, as in the example above. When that happens, we define a breakpoint. This is your target and now you’ll need to write your media query. Following the example given, we may want to reduce the 4 columns long before we come down to a 320 pixel width. You might target anything under 480 pixels like this:

@media screen and (max-width: 480px) {
.bios { float: none; }
}

So, anything below 480 pixels and the floats are removed from the Bio section and those columns now get stacked.

See the Pen Media Query Example by Al Lemieux (@alemieux) on CodePen.

Using proportional units is best, so we can convert those pixels into ems:

480 / 16 = 30

So our media query now looks like this:

@media screen and (max-width: 30em) {
.bios { float: none; }
}

The exercise continues — resize the browser, find points that break your layout and then add breakpoints to adjust.

Base Font Size

One final consideration is base font size. We already talked about font sizes and line heights in this series. We’ve established that the base font size is 100% or 16px and the line height is 1. You can adjust the base font size up or down in your media queries. 16px body text and 36px headlines might be too large on a mobile device. You may have your base font size reduced in your body declaration to some percentage as it is comfortable to read on a small screen:

body { font-size: 70%; }

Then, in your media queries, you can increase that base font size for larger screens:

@media screen and (min-width: 80em) {
body { font-size: 90%;
}

@media screen and (min-width: 120em) {
body { font-size: 110%; }
}

I hope you’ve enjoyed this primer on media queries. We’ll get deeper into it next time, but this is a good foundation and is common practice these days. Be sure to check out the other articles in this series:

RWD – Typography: The Almighty Em

Posted on: December 1st, 2014 by alemieux 1 Comment

In Ethan Marcotte’s tome Responsive Web Design, he begins setting a simple typography example with the following explanation:

Finally, you’ve probably noticed that the font-size has been set to 100%. In doing so, we’ve simply set our base type size to the browser’s default, which in most cases is 16 pixels. We can then use ems to size text up or down from that relative baseline.

There’s not a lot of explanation about why the base font size is set in a percentage and why ems is the unit of choice. Published in 2011, the book may have come at a time where this was standard practice or just the way Ethan went about doing his thing. There was a pretty popular method of setting the base font size to 62.5%, which makes the base font size 10pt – a nice round number that can be mathematically managed better than 16pt. In order to explore Ethan’s method, we need to understand a few things about the baseline type set in percentages and why ems are better than other units of measure.

Units of Measure

You can specify type sizes in CSS with pixels, points, inches, ems, percents, and other units of measure. It would seem at first glance that when working in a web-related dimension, that using pixels as the primary unit makes the most sense. The reason why we don’t use pixels or points is because they are not scalable – meaning they can’t be resized in all browsers. In IE6 & 7, it was particularly a problem. Most modern browsers can scale pixel-based text, but there are problems with it on mobile devices. If the base font size changes, say from 100% to 120%, pixel-based font sizes will stay the same. Another reason we can’t use pixels is that pixel sizes “aren’t constant – or at least the display of them isn’t. 16px text on an iPhone can be ~60% the size of 16px text on a Macbook.”1

Why not use percentages as the choice unit of measure? Ems and Percents are essentially the same, but scale differently depending on what the base font size is set to. Em-based font sizes tend to become exaggerated when resizing in IE6 & 7 when the base font is not set to percentages. When we define font sizes in percentages, it is a percentage of the body font size. So 150% is 150 percent of the font size, whereas 1.5em is 1.5 times larger.2

About That Em

Em Units Are Scaled

An Em unit is defined as the point size or classically, the size of an uppercase M in any font or slightly larger. Robert Bringhurst, author of the Elements of Typographic Style defines an Em as such:

[t]he em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.3

Perhaps that helps us to visualize the Em unit a little better, but it’s the flexibility of Ems. Setting up our baseline font size as 100% and then setting all other elements in Em-based font sizes makes that text relative. If you have all of your type set in pixels, changing the base font size doesn’t cascade and makes the rest of the text relatively update. If you set your text in Ems however, and change the base font size, you don’t have to touch your Em-based font sizes because they are relatively affected by that change.4

In Media Queries, this is pretty powerful. Instead of making individual changes, you can simply change the body font size and be done with it. The scaling that Ems employ allow for quick global changes.

Mathematical Operations

I never paid attention in Math class. In fact, some of the best doodling I ever did was in that class, much to my chagrin. To be perfectly honest, the first time I went through Responsive Web Design, I didn’t fully get the calculations and struggled with understanding why I had to use Ems. Of course, I – like many others – were using pixels for everything. If we can’t use pixel values for responsive design and Ems are a better unit, how do we use them? A handy dandy formula:

target ÷ context = result5

The target is the size of text that you want to use. The context (although it can change) is the base font size, which for our purposes is 1em or 16px. If all of our body text is 100%, which is 1em, which is 16px, what if we want text that is smaller or larger than that? Let’s start with a headline for example. If I have a 24px headline in my design I need to convert that to ems. So, I use the formula above and come up with the following:

24px ÷ 16px = 1.5em

Let’s say that I have some copyright text in the footer that needs to be 10px. Again, using the formula, we get:

10px ÷ 16px = 0.625em

See the Pen Calculating Font Sizes with Ems by alemieux3 (@alemieux3) on CodePen.

Other Considerations

The Rem unit is said to be more reliable than Em, but since Marcotte and others specifically advocate it, I’m sticking with that unit of measure for now. One thing about base font size is that the default 16px browser font size is not a given. Anyone can change their browser preferences and set the font size to anything they want. If they have a hard time seeing, for example, they might set the font to something a lot larger. The ability to zoom text or the viewport in most modern browsers will also alter the look of your type and that’s just a bit of control that you have to give up. One other note is that most web design templates have this system built into it already, like Twitter Bootstrap and others, so if you’re using one of those systems, it’s already built in.

Next time, we’ll look into setting a baseline grid and creating a vertical rhythm.

Footnotes

  1. The Goldilocks Approach to Responsive Web Design. Front design agency. http://goldilocksapproach.com/demo/
  2. Font Sizes in Responsive Design: px vs. pt vs. em vs. percent? Eclipse Web Media. https://www.eclipsewebmedia.com/font-sizes-in-responsive-design/
  3. The Elements of Typographic Style As Applied to the Web: 2.1.1 Define the word space to suit the size and natural letterfit of the font. http://webtypography.net/2.1.1
  4. Why Ems? CSS Tricks. Chris Coyier November 8, 2012. http://css-tricks.com/why-ems/
  5. Fluid Grids. Ethan Marcotte. A List Apart. March, 2009. http://alistapart.com/article/fluidgrids