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?
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="desktop.css" media="all and (min-width: 768px)">
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
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?
I would download something like Ratchet and look at what they use.
@johnjf are you interested in Web or Native mobile apps?
I know
nothinglittle 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. Following writings of Luke Wroblewski and Ethan Marcotte.
Web, I'm just trying to create a normal simple site that will be able to fit in any screen.
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