About "mobile 1st" website

1

I’ve heard so many people talking about mobile 1st.
From my understanding the idea is that to keep the default CSS rules to the minimum.
And adding more parts and rules in media queries.
Therefore when your site loads on mobile, it will load a lot faster.

The thing that I am still confused with is how do we implement this kind of technique?
So in order to do a mobile 1st site, when I started I just need to resize my browser to mimic a mobile viewport?
Then start from there?

Screen Shot 2017-05-15 at 2.04.07 AM.png403×1014 180 KB

Like in the pic above?

Then what if I want to implement bootstrap into this whole site, when do I add in bootstrap’s elements in it?
From the beginning or after I finished my mobile version of the site 1st, then I add in bootstrap elements ?

If someone is more experienced please leave a comment below about how to efficiently use bootstrap to build a mobile 1st website. And which part of the site I need to create myself and which part of the website I just need to grab from bootstrap’s library. For example: the nav bar, do I go all in and write it myself? Or just grab the ones that are included in bootstrap and only use CSS to change its look.

I’m a newbie, so please be as elaborate as possible. Thanks! :wink: :blush: :sunglasses:

2

Hey there, Let me clarify your confusion.

What’s mobile first design

In short, philosophy behind this is you first design website for mobile devices.

On the other hand, Bootstrap Framework help us do this quickly when code.

Approach

When you design your website, first you wireframe for mobile, later tablet and then for desktop.

Wireframe or Mockup to HTML/CSS

This part is also known psd to html. Basically you convert design to html that’s what most front dev. only do.

  • PSD = the mockup you design on photoshop.

Scaffolding

at this phase first you scaffold your design using html and bootstrap grid system.

Using bootstrap component

Here you can use component as long as they fit your design.

For example if nav bar is okay for you design why you reinvent the wheel again by creating it by yourself?

Bootsnip - go beyond bootstrap components

For example, design has a timeline section. Why not search for it first?

tadaaa found something

btw I highly recommend you this website

Time to customize and make difference.

You can start customize This part where you exactly add something.

A tutorial series

Zurb Foundation has a tutorial series about this.

You can apply this workflow to bootstrap but you’ll see they don’t even have a mockup and this’s not exactly mobile first approach.

Most people don’t even approach mobile first when they code. They just use framework…

If design is easy. Bootstrap will already handle it for us only with little custom style touch.

Performance

For a small project this won’t make a huge difference but you can use bootstrap cdn.

What I can recommend about this.

Don’t worry too much.

Don’t worry too much if website is opening speed about 3 sec. If it is higher check your image first and optimize them.

Don’t use image for mobile design if possible.

PageSpeed Tools

Take a look at Google’s PageSpeed Tools and test your website. If your website is not live. You can even test any website to see important things for performance.

https://developers.google.com/speed/pagespeed/insights/?hl=tr

CSS Performance Tooling

Recommend this video

Lastly

keep on hacking!

1 Like
3

Wow, thanks for the in depth explanation there.
I will definitely look into those videos and sites later.

I think from now on I won’t be bother to create a website from its mobile form 1st, and just focus on using bootstrap framework and make a good use of it.

1 Like
4

btw let me give you some more tips.

If i would ask myself this question

How can I improve my HTML/CSS skills further?

My answer would be:

“be good at converting psd mockup to html”

The Ultimate Guide to Converting a PSD to HTML and CSS

This tutorial will give you solid understand about this.

Your Turn

You can go this site, download what you want and start covert psd template to html/css!

How I use them if i don’t have photoshop?

Gimp will help you.

Gimp is a free and open-source raster graphics editor used for image retouching and editing, free-form drawing, converting between different image formats, and more specialized tasks.

Time to design something

This part is UX/UI designer’s job.

if you want to start to design mobile first using photoshop.

It’s very handy to use these files for grid system.

I think, desiging something from a idea is much imporant than converting it to html/css.

There’s a quote I love a lot:

C_AwgK_XcAA5WD6.jpg1079×790 60.2 KB

2 Likes
5

Oh wow… thanks! Looks like there are a lot of work to do… :wink:
Stressed but at the same time excited.

NOw I am trying to clone single page static site that I find online. pretty challenging for me…

I will tag you if I have more questions!

Thanks!

1 Like