This question is related to this (What does "mobile-first" mean?).
I understand the philosophy behind Mobile First and in my new site, I'm using Bootstrap etc. to try to follow this. However, I was wondering are there any type of guidelines on how to make something mobile first?
I don't just mean technical guidelines but more like UX guidelines - like when I should use a dialog box or how to make my menus and navigations work well on a mobile etc.
Here is two examples, how mobile first and desktop first works.
Desktop First
.container {
width:980px;
}
@media screen and (max-width:420px) {
.container {
width:100%;
}
}
Mobile First
.container {
width:100%;
}
@media screen and (min-width:420px) {
.container {
width:980px;
}
}
To start with, I would design my whole web-site within a mobile-view port wireframe. If needed, I would create wireframe mockups for both Portrait and Landscape.
Next, I would create wireframe mockups for a desktop/ large view port. I would focus on reusing most of the compoments from my earlier mobile view mockups.
Finally, I would create the wireframe mockups for the medium/ tablet view port. I will mix and match components from my mobile-view and desktop-view for this. If needed, I would create tablet specific UX components from the desktop-view set of components.
The term "Mobile First", comes more as a mindset to design thinking as opposed to some of the technicalities that may be involved. When designers approach a project with the idea that they want to "design mobile first", it involves re-thinking the approach to the overall context and environment of the user and under constraints with which the medium allows.
Being cognizant of the constraints not only forces the designer to be selective of what features have more prominence and what mobile UI patterns they decide to use, but also involves the stakeholder/clients involvement and awareness of the limitations that mobile provides in terms of how many features they want to pack into the app. Obviously the more features that go with it, the more it may affect the user's experience and can work against them (i.e. clutter, no defined workflow, etc.).
So given business goals, users goals and any necessary requirements, it's the designers job to take all the above into account and use tools available to them to create the best experience possible.
Knowing where a majority of the user's likely are when they are using the app, what the most important features are and knowing what the typical flow of the users interaction with it, all will help when deciding how you want to design it.
Regarding your question "when I should use a dialog box or how to make my menus and navigations work well on a mobile etc." that is a decision that based on what common UI patterns you decide to use and what works well with the users potential workflow. Depending on how many features or screens you have, you may want to use the slide out navigation due to the amount of items that it can hold. You may want to consider a toolbar nav (bottom nav) for features that need more prominence over others. Finally, an awareness of the OS's patterns and conventions is always good to know.
