Mobile Design

[johnjf]

I’m going to create my own simple website project because I want to learn how mobile design works. Was wondering if anyone can help me out real quick? When I create a site I put in all my css and name my css file main.css.

Do I link it to my css but for media put screen?
Then I have to create a new css file and call it mobile.css, then link it to that css and change media to handheld?

When I create my main.css instead of using pixles I use percentages?

[chanman]

I would download something like [Ratchet](https://github.com/maker/ratchet “”) and look at what they use.

[Alen]

@johnjf are you interested in [Web or Native mobile apps](http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/)?

I know nothing little about Native apps!

As for the Web apps, I’ve learned a lot about building mobile first responsive websites by looking at the [Andy Clarke’s 320andup boilerplate](http://stuffandnonsense.co.uk/projects/320andup/). Following [writings of Luke Wroblewski](http://www.lukew.com/ff/entry.asp?933) and [Ethan Marcotte](http://ethanmarcotte.com/).

[johnjf]

Web, I’m just trying to create a normal simple site that will be able to fit in any screen.

[Emil]

Johnf,

If you want to go mobile first you could do this:

For desktop first the other way around of course.
I personally prefer to put everything into one css file, especially for a small site.
For the desktop view you will probably want to set the wrapper width in pixels, or a max width. For small screens I recommend 100%. Look into responsive grid systems to make your life easier.
Oh – and the polyfill if you go mobile first: <https://github.com/scottjehl/Respond>

[Author]

Posts