Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Posts Tagged ‘Mobile’

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:

A Paradigm Shift

Posted on: June 11th, 2011 by alemieux

I’ve been musing lately about how technology is shifting into the ‘mobile’ age. In Steve Jobs’ recent keynote speech at the WDDC, he heralded the end of the desktop era as everything shifts to tablets and mobile devices. Of course, desktops will be around for a long time and everything he says lately, needs to be taken with a grain of salt.

On my morning commute to work, I see people of all ages walking around the city of Lowell, MA with their devices in hands, glowing screens in their faces, mesmerized by whatever they are engaged in – thumbs blazing on the miniature keyboards. Seems that everywhere I go, in fact, someone has a device of some sorts that they are constantly looking at. In traffic on the highway after work, I see people in their cars – despite the recent laws against texting while driving – doing the same thing. I’m sure you’ve all experienced the frustration of standing in a checkout line while the person in front of you is carrying on an enthralling conversation while totally ignoring everyone around them.

The immediate gratification of the internet throughout the 90’s has paved the way for this paradigm shift. At work, my co-workers walk through the hallways with their Blackberries in their faces. In the bathroom stall next to mine, someone is checking their email and responding to it. That immediacy of information is changing the way we work, the way we learn, and sadly, the way we interact with each other. People feel more inclined to tweet something or email, poke, or Facebook a quick message to an individual with, surely, sincere intent, but without that human contact. It’s safer, dare I say more sanitized interaction.

How will this change us as a people? I was talking with a co-worker about the explosion of tablet and mobile devices and pondered on the impact it will eventually have on education. Students will no longer need to open a book. Their entire curriculum will be loaded onto their iPads. How will it affect the way a class is conducted. Instead of a student raising his/her hand, they can just text the teacher or some other digital form of hand raising.

Touch screen displays and devices will change the way we order something at a restaurant, or interact with a kiosk at a gas station. Apple has already changed the entire retail experience. Instead of walking up to a register, an employee can process your transaction with an iPhone. Who knows, maybe eventually, all we’ll have to do to vote in an election is download a voting app.

The implications here for design though is what I’m getting at and what this paradigm shift will do to design education. With the release of CS5.5, Adobe has made authoring for tablets and mobile devices from its entire Creative Suite much easier. Of course, this falls in line with Adobe CEO Shantanu Narayen’s vision of design once, deploy everywhere. How will this impact design?

I believe most designers are receiving traditional print design training through their college careers. It’s graphic designer’s and typographer’s that are teaching these classes. The basic principles of design are explained and experimentation and appropriation are used to propel the students through their portfolio classes. What’s the end result? Usually, a print portfolio. Surely, there are design schools who do have the ability to use technology and produce students with a portfolio that is something more than print. A website or an interactive Flash piece.

If graphic design training continues to follow the same principles, how can students be expected to incorporate more UX design practices into their portfolios? Are we at a point where the term Graphic Design is outdated? What should a design curriculum encompass these days to ensure that students have the right foundational competencies, but yet have all of the technical competencies to meet the ever changing technological landscape?

The big question is, now that we all have the tools that we need to produce mobile and tablet content, are all designers expected to just know how to do that type of development? Are they prepared enough to wade into the murky and unpredictable waters of mobile development? When someone is trained to be a fireman, they learn everything they can about fires and fire hazards and safety. A lawyer goes to school and learns everything about the law. These fields are focused and direct. In contrast, designers (in order to thrive in the current environment) need to know how to design for print, for web, for mobile, for tablet, and whatever else is in the realm of graphics (without a salary differential, mind you). They may have to understand HTML, CSS, JavaScript, ActionScript, and possibly other technologies that will allow them to do their jobs.

Another possibility is that students learn specific, narrow topics in design school to prepare them for a niche career? So one student could focus entirely on website design for the desktop. Another student could focus on mobile development. They would be acutely aware of all of the aspects of their respective fields and would be prepared to troubleshoot problems as they arise. Is this feasible though? Probably not. The thinking might be, ‘you can design a website, so you must be able to do develop one for mobile use?’ Maybe graphic design curriculum becomes more of a liberal arts study. More exploratory in nature until the student finds their interest and holds on to it.

There’s no question though, that as with the rise of desktop publishing changing graphic design behavior, tablet and mobile development will change it again. Are we ready for that change?