As I have done a number of times in the past, I have redesigned my web site; this time around, I went with a mobile-first redesign. The process wasn’t daunting. I do this every few years to allow me to do new things; I don’t often do this on client web sites because they don’t pay me to learn, they pay me to design a site that their end users will enjoy using.
A personal site redesign is something I also do so that I can gauge the level of my own design abilities. One should constantly improve their skills after every site done and I always push myself to create something that’s in the “state of things” so that I know where I’m at.
This isn’t a huge redesign, as you can see. It’s more of a simplification, a restatement, of the previous design which I am quite fond of even if it wasn’t implemented in the best way. As I constantly tell my students, web design is something you continually improve on, little by little, to the point that an evaluation of the code you wrote in your previous project should cause embarrassment. My sins were many: I used <div> tags and CSS classes like my life depended on them. My PHP code contained a lot of procedural code mixed in with some of the object-oriented code, which is referred to as “spaghetti and meatballs” code. That got fixed and quick.
This time around, I also implemented some social sharing in the form of Open Graph tags + the sharing widget from my old stomping grounds, Janrain. Since I now teach CSS pre-processors, I gave up my reticence about them and now I just can’t stop using them. So, I used LESS as my pre-processor as I’ve done in my last couple of projects and I am a convert. I also created a responsive web page but certainly not one that was designed with mobile-first design principles. Ironically, I adopted this design philosophy right after my last site redesign, and with total consistency.
How to do a mobile-first redesign
The answer is simple: you don’t redesign for mobile-first; you have to design mobile-first from the beginning or not at all. You can’t magically sprinkle magical mobile-first fairy dust on a site with left and right floats and fixed widths. Mobile-first means just that: you have to design your web page in a mobile resolution first, and then once the design is locked down, you then can increase your resolutions and see what elements of the mobile design work for your new resolution (usually this is for a tablet in portrait orientation, or for a very large phablet).
These are some loose guidelines for designing mobile-first:
- Use em/percentage sizes for everything. Only your body tag should have a fixed size. This way, if you increase your body tag’s default font size in a later media query, all your em heights will increase accordingly.
- While we’re on the subject of font sizes, make sure your text is easy to read on a mobile phone. This is a no-brainer. If your end user has to squint to see anything, you done goofed.
- Images shouldn’t have width and height attributes in the HTML anymore. Nope. No more. Why did you really use those, anyway?
- All major structural elements should be 100% wide. No more columns in your designs, at least not in a mobile resolution.
- If a navigational element is too small to be tapped on with a thumb, it’s too small. End of story. Make those navigational elements bigger. No, bigger. Bigger still. There you go!
Once your site is locked down for mobile, you use media queries at the end of your CSS cascade that build on the mobile CSS you wrote for larger resolutions. What kinds of things do you change up as the resolution increases? Well, there are some fair consistencies that you can account for. When you design for a mobile-resolution width, your 100% wide structural elements create a good amount of vertical scroll, which is a completely OK user experience since scrolling is something you can do with a simple flick of your thumb. When you increase the width of the screen, you now have a lot of horizontal stretch. You need to do several things to bring your vertical-to-horizontal ratio back in check:
- Increase the default font size just a touch, usually from 16px to 18px. If you used em sizes for all your font/padding sizes, and you should have, then they will fall into place accordingly.
- Increase the amount of padding in your structural elements. Maybe 1em was enough for mobile, but you may want to try 2em or even 2.5em and see how that goes. Increasing your default font size will help, but maybe not enough.
- Increase the line-height of your main blocks of text. Usually this is just your paragraphs and your list items.
- Finally, if needed, use a responsive grid to set breakpoints and get your structural elements smaller and next to one another so that you don’t have so much wasted whitespace on your page. I highly recommend Responsive Grid System with a 12 column grid, since it presupposes no styling and it doesn’t require a big bloated CSS framework to get up and running. 12 is a good number because you can generate 12, 6, 4, 3, 2 and 1 column widths to approximate 100%, 50%, 33.333%, 25% and 12.5% columns widths and everything in-between very quickly.
Your CSS right after your initial mobile CSS should look a bit like this:
@media screen and (min-width: 481px) {
/* add exceptions here... */
body {
font-size: 18px;
}
header, footer, main {
padding: 2em;
}
p, li {
line-height: 1.8em;
}
}
Your responsive grid CSS should also kick in, moving any elements next to one another comfortably.
View the source of this web page to see what I mean. It’s all there… one thing that you might find interesting (humble-brag incoming) is the relative lack of HTML and CSS to achieve the page’s design. Mobile-first design allows you to write simpler user interfaces using less code. Less code means less things that can get goofed up and cause headaches. Less headaches means more time to make your web pages beautiful.