How to approach mobile first design?

IDK if this is the right area of the forum to post. I have a small team and we want to know what the best practices are for approaching the design for mobile first.

Regarding designing for retina. If designing on the phone for retina is it best to resize shapes manually rather then use a action that does it for you?

When designing mobile first what is the best practice (bootstrap we use) is it best to comp out a mobile screen and see how that would look and a desktop comp at the same time. So there is some visual map of where you’re going? I have tried to find info on this but nothing that really talks about design approach.

[font=calibri]

I’ve moved it to the “Designing for mobile” section, that seems to fit :slight_smile:

When designing mobile first what is the best practice (bootstrap we use) is it best to comp out a mobile screen and see how that would look and a desktop comp at the same time. So there is some visual map of where you’re going? I have tried to find info on this but nothing that really talks about design approach.

The first thing to do is to start with the basic structure. You then work up a basic mobile design, and start layering on more design and features for larger screens and more capable devices, until you get up to a full size computer.

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu - the first part sets a bit of context around mobile internet, but slide 42 onwards gives you the meat about designing mobile first.[/font]

Thanks for the reply.
So if our website use large images like heroes and other imagery should we use optimized images for mobile? Not a 1image fits all approach? I am trying to convince them that we need to use optimized images for very large images but some images that are smaller can be reduced by code right?

I have heard that you should have a design asa reference meaning the reference could be a smartphone and from that the desktop version would be based of that as designers though who think pixels when we have the bootstrap 12 column template they seem to be stuck on the mobile design and don’t know whats the right way to lay things out in the desktop template?