Screen Shot 2013-06-17 at 20.56.34

A simple fresh reset

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.

Screen Shot 2013-08-05 at 11.53.45

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

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)

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:

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

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

  • internet commented on June 6, 2014 Reply

    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

  • tử vi java commented on July 28, 2014 Reply

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *