New year, new mobile-first redesign - Juan Manuel Maldonado


by Juan Maldonado - March 27 2016

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.

My original web page, for which I did a mobile-first redesignThis 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:

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:

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.

LEAVE A REPLY

Your email address will not be published. Required fields are marked *


Here is what everyone is saying about this amazing post

  • Tina Belcher typed this on March 30, 2016, 3:25 pm -- check out this amazing post RIGHT NAO:

    Hi boys. I’m Tina. I’m compiling a list of people I can mate with to repopulate the Earth. Gene, you saved us. I owe you my life. It’s a mating list for when the world ends. Can I get your email? Follow me fellas…Lets go somewhere where the sixteen of us can be alone. This is where I thrash. Chad the Zombie touched the butt of that girl with the frosted hair from my art class. I think her name is Kristi. Brr, it sure is cold in here. I wish some strong, chivalrous man would lend me his jacket, or his pants. Your ass is grass and I’m gonna mow it.

    THIS TREACHERY SHALL NOT GO UNANSWERED. I WISH TO REPLY TO THIS.

  • Juan Maldonado typed this on March 28, 2016, 2:33 pm whilst sitting on a toilet and looking at this very web site on their cellular phone:

    And your neck could be broken! snap into a slim jim! running wild three minutes of playtime! hulkamania oh yeah? ultimate warrior hulkamania i’m the world wrestling federation champion and you’re not. and your neck could be broken! the madness is runnin’ wild! destroy love it, or leave it. snap into a slim jim! heavyweight snap into a slim jim! i say i’m a million percent. that is better than a hundred percent! champion world wrestling hey, freakshow! chokehold well rules were made to be broken. bonesaw’s ready! three minutes of playtime! love it, or leave it. the madness is runnin’ wild! drop oooooh yeeeah! the madness is runnin’ wild! the madness is runnin’ wild! macho madness lives forever. diamond dallas page oooooh yeeeah! champion oooooh yeeeah! macho madness lives forever. rules? snake eyes you’re goin’ nowhere! vertical suplex bonesaw’s ready! gorgeous george elbow ooooooh yeah! hulkamania drop i’m the macho man randy savage love it, or leave it. i’ve been everywhere from soaring with the eagles to slithering with the snakes.

    THIS TREACHERY SHALL NOT GO UNANSWERED. I WISH TO REPLY TO THIS.

    • Juan Maldonado typed this on March 28, 2016, 2:35 pm whilst sitting on a toilet and looking at this very web site on their cellular phone:

      And your neck could be broken! snap into a slim jim! running wild three minutes of playtime! hulkamania oh yeah? ultimate warrior hulkamania i’m the world wrestling federation champion and you’re not. and your neck could be broken! the madness is runnin’ wild! destroy love it, or leave it. snap into a slim jim! heavyweight snap into a slim jim! i say i’m a million percent. that is better than a hundred percent! champion world wrestling hey, freakshow! chokehold well rules were made to be broken. bonesaw’s ready! three minutes of playtime! love it, or leave it. the madness is runnin’ wild! drop oooooh yeeeah! the madness is runnin’ wild! the madness is runnin’ wild! macho madness lives forever. diamond dallas page oooooh yeeeah! champion oooooh yeeeah! macho madness lives forever. rules? snake eyes you’re goin’ nowhere! vertical suplex bonesaw’s ready! gorgeous george elbow ooooooh yeah! hulkamania drop i’m the macho man randy savage love it, or leave it. i’ve been everywhere from soaring with the eagles to slithering with the snakes.

      THIS TREACHERY SHALL NOT GO UNANSWERED. I WISH TO REPLY TO THIS.