Mobile-first responsive design

There is so much information being forced into my head. I’d tell you if I hated it but, the thing is, I don’t. “School” is amazing. I’ve never laughed this much in a long time; I wonder if our instructor moonlights as a stand-up comic.

Our project for week two was to build a multi-page site. Very straightforward. I, however, decided to try out an idea I’d heard and read about—mobile-first styling.

I had a really hard time with this because designing for the desktop is the first and only thing I’d ever done. I would often forget that I was designing for smaller screens and completely screw up my layout. But I pressed on.

Responsive design is implemented in sites so that they display properly on any device with a browser. Generally, a (good) responsive site will not require visitors to zoom in/out, scroll horizontally, tilt their heads, and/or squint in order to view its content. When it comes to desktop devices, there is usually quite a bit of real estate with which to work, so there shouldn’t ever be any of the same issues that mobile users face.

When I first heard about it, I didn’t think much of it. But then I learned about performance concerns (loading time, in particular) and our increasingly short attention spans, and then the mobile-first approach made (increasingly) more sense to me.

Our CSS is leaner

Since desktops are such large canvases for sites, there’s a ton of complex things that could be done in terms of style. On smaller devices, element styles are much more simple; this usually means optimizing the use of precious space by reducing the number of columns, giving elements a full width and stacking them on top of one another.

Because mobile layouts are simpler, fewer selectors (and with those, properties and values) are required. As the browser size increases, styles can be added as required to jazz up the layout. This is in contrast with “desktop-first” design, where styling must be un-set and/or stripped away as browser space decreases. Because desktop layouts are for the most part more complex, it could take quite a few lines of code to reset the look of our elements for mobile.

Consistency

Believe it or not, there are sites out there that hide content because you happen to be visiting on a smaller device. Why aren’t you able to view the same amount of content as a desktop user? It’s because your device is too small, and those things were too hard to fit on such a small screen. It’s your fault.

Kidding!

It’s not your fault; device display size and/or performance is not a good reason to hide content from users. Mobile-first design isn’t only about looks. The mobile-first philosophy encourages you to evaluate your content to determine whether or not it’s worthy of existing on your site. Because your mobile content is nice and lean and streamlined, the desktop incarnation will inherit that as well.

Shorter load time

If you have a mobile device and use it to browse the web, it’s safe to say your connection isn’t ever as fast as if you were browsing on a desktop. Since we’ve gone through our content and kept only the important stuff, and since we have less code, our site load time is reduced. Less fluff = less work = less code = less styling = shorter load time = less banging head against wall = better quality of life.

Consider the mobile layout your base. Since your base content is consistent on all devices thanks to the mobile-first approach, it’s now cool to add bells and whistles for larger screens because those are just enhancements.

Learn more about mobile-first design at:
LukeW
Brad Frost Web

Project two can be viewed here. Images and copy are not mine.

Week calc(9 − 8)… done!

This past week was great; I met my classmates and learned about their unique backgrounds. We got a refresher on basic HTML and CSS, learned about personal branding, and even bought hosting for our future sites. Our instructor, Wes, is a very funny man. And the environment in general is pretty cool. It really doesn’t feel like school.

With week 1 all wrapped up, I can tell you I learned two big things: 1) I need to start using social media more often and with purpose—not just for retweeting Seinfeld quotes, and 2) the magical CSS calc() value.

We’ve been encouraged to use relative units (percentage, em, etc) to define the dimensions—especially the widths—of our elements (vertical scrolling is cool, horizontal scrolling not so much), and it makes sense to use dynamic values to style things that’ll be viewed on screens with unknown dimensions and proportions.

With that said, I was faced with a challenge while completing our first week’s assignment of building a one-page site. In my header, there is a h1 of fixed width (ie. the content here will never change), and to the right of it is my nav. I want the left edge of my content to align with the left edge of my nav, and I want my background image to be exposed in the empty area directly underneath h1.

I’m sure there are other ways to solve this; but I can be stubborn at times and I wanted my one-pager to look exactly the way I wanted it to look. No compromises for this guy.

If I assign my content wrapper a width of, say, 75% (pictured above), it looks great.

But what if I shrink the browser window (pictured above)? The content spills out into the space underneath h1 and it is no longer aligned with my nav and the layout is broken. That’s a shame. Essentially, the layout will look perfect only when the browser is a certain width, and that is ridiculous. I needed to mix a relative value with an absolute one. I had to make my content wrapper span the full width of the browser (100%), and then pull it back by subtracting the width of h1 and its surrounding padding (345px). Could it be done?

You bet!

I guess it could be said that calc() is a relative, or dynamic, value; its computed value is calculated on the fly as variables (such as browser width) change.

.content-wrapper {
	width: calc(100% - 345px);
}

calc() can be used whenever a number-based value is required. It can handle addition, subtraction, multiplication, and division. It’s got pretty good browser support, too.

Learn more about calc() at:
Can I Use
Mozilla Developer Network
CSS-Tricks

The finished product of my roommate’s site can be viewed here.