Any advice on mobile first workflow

[blaja]

Hi guys,do you have any advice on mobile first workflow.

I try to find some smooth workflow,but it’s really hard.

My CSS is too much bloated.How do you approach mobile first,any advice?

[Senff]

Desktop First approach: what you basically do, is assign lots of fancy styles to your elements (so it looks good on desktop), but then later you remove those styles again for mobile.

Mobile First approach: assign some basic styles to your elements (so it looks “simple” and not too fancy on mobile), and then later you add more styles to fancy it up for desktop.

A Mobile First approach doesn’t necessarily result in less code (though often it does), but it definitely makes more sense to first declare “basic” styles (for all devices) and then add more (for desktop) to fancy it up — as opposed to declare fancy styles first and then take them away again (for mobile) later.

Simple example of Desktop First:

.button {
    /* Desktop styles */ 
    background:#ff0000; 
    color:#ffffff; 
    text-shadow:1px 1px 0 #000000; 
    border-radius: 5px; 
    border:solid 3px #00ff00; 
}

@media screen and (max-width: 600px) { 
    .button { 
        /* Overriding desktop styles */ 
        text-shadow:0; 
        border-radius: 5px; 
        border:none; 
    } 
}

Whereas a Mobile First version could be like this:

.button {
    /* General styles for all devices */
    background:#ff0000;
    color:#ffffff;
}

@media screen and (min-width: 600px) {
    .button {
        /* Add more styles for desktop */
        text-shadow:1px 1px 0 #000000;
        border-radius: 5px;
        border:solid 3px #00ff00;
        }
}

Less code eh! :)

[blaja]

Do you use Photoshop(or similar) or do you prefer designing in browser?

[Krish1980]

“A Mobile First approach doesn’t necessarily result in less code (though often it does), but it definitely makes more sense to first declare “basic” styles (for all devices) and then add more (for desktop) to fancy it up — as opposed to declare fancy styles first and then take them away again (for mobile) later.”

These days, I find that often the opposite is true – mobile components, such as mobile navigation components and accordions have a lot more styles being applied to them in comparison to desktop styles, where , aside from a few changes in margins/padding and colors, most elements are readily available in most css front-end frameworks – but because this is such a buzzword, we are forced to code in a specific fashion even when it means code bloat and redundancy. Desktop layouts are ‘wider’, but are often simpler and straightforward – they just have a lot more floats applied top them, which , frankly, any decent grid system could cover 80% of the work.

[I.m.learning]

I am designing my website for RWD (Responsive Web Design). This is a mobile-first design. This means my pages “should” look good on any device.

Bootstrap is created for RWD. They have pre-made code that saves a lot of time with basic designs, and reduces code. I read a lot of people having issues why their footer and headers don’t stick, or why something doesn’t respond to the screen. I don’t have too many issues with Bootstrap, as long as the right code is used.

Just like JQuery, you can link to sites that have it installed on their servers, or download it yourself.

[Author]

Posts