A quick Responsive Web Design reset: (updated 18/09/2013)
All default HTML elements have a default CSS attributes.
Sometimes these attributes cause common problems when creating the site thinking about cross-browser (to visualize “correctly” in all browsers). Sometimes the only solution is to reset your styles. It may be interesting and useful to reset our styles and start with a fresh common style:
In this case I’m using: reset (meyerweb.com) + box-sizing (Paul Irish) + clearfix (yuiblog)
DEMO:
http://jsfiddle.net/leolanese/BD8J7/
That’s it. Copy and Paste. Also I would like to recommend you: Remove unused CSS rules, Audit Tool on Chrome to remove those elements you are not using:
Chrome’s developer tools.
- Open the page in Chrome
- Open developer tools (Ctrl+Shift+I)
- Open the Audits tab
- click run. Expand the “Remove unused CSS rules” item to view a list of style sheets that contain unused style rules.
1) removing ‘table’, ‘tr’, ‘th’ and ‘td’ table Edited (05/08/2013):
not sure who still using HTML4.1 now. If this is your case, may be you want to keep these lines.
2)box sizing fix:
“box-sizing: border-box;” also *:before, *:after
1 2 3 4 5 6 |
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
Thanks:
@doodlemoonch
Edited (14/08/2013):(still on revision)
Also you can include the text-shadow to Hide Aliasing: http://www.elfboy.com/blog/text-shadow_anti-aliasing/ (thanks Philip Renich)
1 2 3 4 |
/* text-shadow to Hide Aliasing */ html { text-shadow: 0 0 1px rgba(0,0,0,0.3); /* rgba needs to be the color of your font */ } |
3) Including the WebKit Tap Highlight Color
, (18/09/2013) Thanks Kyle Peatt
This property obeys the alpha value, if specified. If you do not specify an alpha value, Safari on iPhone applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0 (invisible). If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.
Why we need this
To make your site feel faster, you need to make your buttons respond immediately to a user’s touch and give that user a great visual indication that something is happening.
There is a great property on the web for showing when a button or link is clicked; it’s the :active state. We use it all the time for desktop browsers.
Unfortunately, neither iOS nor Android respect this property when a link or button is tapped on mobile. To enable those active states, you need to add a simple event to the page with JavaScript:
1 2 3 4 |
/* Mobile tap highlighting */ * { -webkit-tap-highlight-color: #000; } |
You are just giving your users immediate feedback for their actions instead of making them wait 300ms to see if anything happened.
4) Including the Momentum Scrolling
, (19/09/2013) Thanks Mike Abasov
Fix the scrollable container and avoid to stuck and non-responsive scrolling. All we need to do is add this property to your scrolling containers
1 2 3 |
ul, ul li { -webkit-overflow-scrolling: touch; } |
Note
On Android 4, you do not even need this property. Every scrollable container has momentum scrolling
Borrowed from: Three Early iOS 7 Web Design Best Practices
2 Comments
For example, you may write several articles for Associated Content
that are related to each other. This could, however, estrange the relationship between the creators and the
strategists or SEO. * Specific text message – Promoting Graphical design.
Feel free to surf to my web-site – internet
Great weblog here! Additionally your web site lots up very fast! What web host are you using? Can I get your affiliate hyperlink on your host? I want my website loaded up as quickly as yours lol