{Carrer web log}


Blog about web design & development

CSS Mobile Reset

Wednesday, November 17, 2010 { 12 Comments }

I’m not sure if the title of this project should be called CSS Reset or CSS Set or CSS Mobile Base. The goal is to provide default CSS for mobile devices.

I started with this objectives:

Few years ago I build Hartija CSS Print Framework, the great thing about Hartija is that you have very fast print ready page. The same thing I want to achieve with the Mobile Reset to have content ready fast solution.

It should be small

Internet connection for mobile phones are still expensive and slow so smaller CSS file will provide faster download and better user experience.

Reset only the necessary HTML elements

All the browser implement CSS reset by default. I don’t think that is always smart to reset the reset. If you building complete CSS Framework is OK to reset everything but in many cases it is better to reset just the main HTML elements or the critical HTML elements.

Set only the necessary HTML elements

After resetting some elements it would be nice to set some HTML elements optimized for mobile phones.
We want to images not to be bigger than the mobile screen or if one word is bigger than the screen the word should brake.

We should provide meaningful base typography solution

Have you tried reading from mobile phone without zooming? I suggest to start with bigger font size. I implement 16px default font size. Feel free to change it. I also picked Arial like default font. Sans-serif can work well in some older low resolution mobiles.

And here is CSS Mobile Reset:


/* CSS Mobile Reset */
html, body
{
margin: 0;
padding: 0;
border: 0;
}

body
{
font-family:Arial, sans-serif;
line-height:1.5;
font-size:16px;
background: #fff;
padding:5px;
color: #000;
word-wrap: break-word;
-webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

table { width:auto; border-collapse: collapse;border-spacing: 0; }

Download on GitHub

Demo1

Demo2



You can use CSS Mobile Reset with combination of Bulletproof CSS3 media queries.

Here is a Demo.

Any suggestions how CSS Reset can be improved?


12 Responses to “CSS Mobile Reset”

  1. // Blogger Mikko Ohtamaa // 11/17/2010

    Using pixel size fonts with mobile device is a hazard.

    I suggest you put in font-size: 1em and the font is not too small on high DPI displays.  

  2. // Blogger Vladimir // 11/17/2010

    @Mikko: I chose px because I'm not sure how the older phones work with ems, otherwise em are better.  

  3. // Blogger Unknown // 11/18/2010

    If older phones can't handle 'em' then they would just be ignored. So in theory what you could do is define both making sure the 'em' font size rule is defined last. However, I don't know if that starts to introduce complexities that breaks the core focus of your css reset for mobile devices.  

  4. // Anonymous nLL // 11/18/2010

    There is no need to use
    font-family:Arial, sans-serif;
    as it doesn't exist on mobile phones  

  5. // Blogger Vladimir // 11/18/2010

    @nLL: I read somewhere that the older Opera mobile browsers doesn't support font family and they few default fonts. So the older browsers will ignore the font and use there fonts and that is not a problem. Newer browsers will render the font properly I hope. Unfortunately I have possibility the solution on few mobile phones.

    @all: I will appreciate your help if you could test this solution on your mobile phone.  

  6. // Blogger Beben Koben // 11/19/2010

    demo2 maybe is good...hihihi
    thanks my friend^^  

  7. // Anonymous joneorange // 11/26/2010

    What about adding

    label,input,select,table,textarea,button {
    -webkit-appearance: none;
    }

    this clears mobile safaris own styles on form elements. That line has fixed issues for me with submit buttons.  

  8. // Blogger Vladimir // 11/29/2010

    @joneorange: I should make some tests first. But definitely can be useful. Thanks.  

  9. // Anonymous Web Design Firm NJ // 12/12/2010

    Its very nice and amazing post..
    Thank you for the post..  

  10. // Blogger Hannes // 2/14/2011

    body,input,textarea,select,button { font-family:Arial, sans-serif; line-height:1.5;font-size:1em;}

    and remove it from body. Otherwise on desktop browsers, form elements don't get font settings.  

  11. // Anonymous Brett Widmann // 2/25/2011

    This was really interesting! Thanks for posting.  

  12. // Blogger Unknown // 6/11/2012

    how about ading:
    body { text-rendering: optimizeLegibility; }
    html { -webkit-font-smoothing: antialiased; }

    and maybe:
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License