11 Fairly Random Tips and Stumbling Blocks to Help with Your Next iPhone Friendly, HTML5/CSS3 Website
1. In HTML5, there is no predefined hierarchy for <header>, <section> and <article> tags. Each can be nested within the other.
It’s not one section per page or one article per page. Post stubs can be wrapped in <article> tags. Comments can be a <section> with each comment being an <article> with the author/date/time in a <header> tag, all within the main <article> tag.
Two very good resources:
http://html5doctor.com,
http://www.threestyles.com/tutorials/html5-rocks-my-socks-off/
2. Plan you HTML5 general layouts before you begin the CSS.
In light of the above, you can’t rely in CSS on ARTICLE referring to the main content block or HEADER referring to the logo and main navigation. Next time I’ll get it completely sorted before putting down any CSS.
3. The effect of position: relative on a display: table-* elements is undefined.
It makes me nervous when I see Firefox siding with IE and webkit alone doing what I’d expect. It turns out that Firefox and IE ignore the property resulting in dodgy layouts. You’ll need to add another wrapping inside to achieve the relative positioning. Read more at this link.
4. In CSS, don’t use the “>” connector when you don’t really need it.
When I corrected for the above, I had all kinds of styling go out since I’d relied quite heavily on the “>” in my CSS. I thought it might help performance, but I’d advise leaving it out as it forces structural dependencies that you may decide to break (unknowingly) later. Another problem case comes when you use the jQuery hack to support display:table in IE7 which wraps all display:table* elements in actual <table>’s.
5. Save some CSS graphic fiddling with these HTML entities:
◄ (◄)
► (►)
▶▶ (▶▶)
&x25A9;
They work best with embedded fonts where you can be assured the visitor will see them properly. Have a look at the icons below the main image on this page. Check out the slideshow stop button after you click it…cool! Here’s a useful reference: http://www.santagata.us/characters/CharacterEntities.html
6. CSS media queries ending in a comment will mess up the following media query block in IE8.
It took me a while to debug this one. It’s probably a respond.js issue as I don’t think IE8 supports MQ’s out of the box.
7. For CSS transitions to work in Firefox, you need to specify in initial value.
If your :hover state moves the item via left: 2px, then you need left: 0px in the non-hover block.
8. Webkit renders embedded font baselines differently from Firefox and IE.
In other words, vertical text alignments will differ. This is problematic particularly for UI elements like buttons. Use css_browser_select.js or the PHP version to work around this.
iPhone & Mobile Specific Design Considerations
9. Style <a> tags as inline-block with padding to make their hit area bigger on touch devices.
10. For flexible width layout websites, specify a fixed view port size in HTML meta rather than initial-zoom=1 or nothing
NickFleming.com has an absolute minimum width of 800px which means initial-zoom=1 doesn’t view the whole site for many permutations of phones and orientations.
Removing initial-zoom=1 results in a strange behaviour where the site is rendered at actual width (800px) and then scaled back to fit (480px on an upright iPhone 4), but the body element is scaled to the same fractional width of the initial viewport width (480px), meaning that BODY {width: 100%} will only cover half the screen! Very strange. It’s as if width:100% is calibrated and set in stone prior to the final rendering stage where the website is scaled to fit.
11. Avoid popups, lightboxes and overlays on mobile.
Have an alternative for these devices. They are very inconsistent and getting the actual zoom-aware viewport dimensions that the visitor is viewing is not straightforward.
Hope this saves someone out there an hour or two of headache!
