So what is mobile first approach?
Generally when people start the wireframing (designing) of a website, they started with how it’ll look in a computer monitor. But nowadays a lot of websites are browsed via smartphones, which have small screen size and lower bandwidth ability. So much so that inn advanced economies, 25% of the users are mobile only. Of course that means 75% are not, but they are getting there.
As such a website designer has to look at how a website will look in a mobile. With desktop as the design standard what you see is that sites are scaled down to the mobile screen’s size. But when somebody wants to find a particular word, he will have to look for it in the site, and that could take a lot of time.
That’s where its advantageous to start building with the mobile version. As you increase the size, you add parts to it. It also means that the site is concise1 and not overcrowded at desktop. People are comfortable with whitespace rather than a crowd.
When you get into prototyping, you can design how the hierarchy of information changes as the screen size change2. For example, you can show a video in desktop but use a GIG or JPEG in mobile.
In responsive web design, the site layout adapts to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries.
- The fluid grid concept makes for page element sizing in relative units, such as percentages.
- Images are flexible and are sized in relative units.
- Media queries allow the page to use different CSS style rules based on the device they’re serving.
- Server-side components in conjunction with client-side ones produces faster loading sites over cellular networks.
2. Meaning you can design what features come in when the size increases