G5 Framework – HTML5 Front End Development Framework

Search Engine Optimization

• robots.txt / robots meta for the search engines
• canonical tag + 301 via htaccess to ensure all content is indexed under one domain
• hidden CSS class – the SEO friendly way (negative margin instead of display none)
• GZip for faster page load (speed affects rankings)

CSS

• Prevent CSS caching
• Cross browser border radius, box shadow, and opacity classes
• Shorthand CSS / some basic reusable classes
• Sticky footer (footer always stays on bottom of page – read: section.content must have a bottom padding equal or greater than the height of the footer)

CSS // Via Reset

• Eric Meyer’s Reset Reloaded + HTML5 Baseline
• Font normalisation
• Webkit font smoothing
• Force scrollbar
• Formatting quoted code
• Aligning Labels
• Clickable inputs
• Screenreader access
• IE7 image resizing
• Print styles

X(HTML) / Content

• Clean code structure
• 940px total content width
• Initial design based on a F Layout
• Remove image toolbar from old versions of IE
• Always force latest IE rendering engine (even in intranet) & Chrome Frame

jQuery

• jQuery 1.5.2 with fall-back (1.4.4 also included if needed)
• Smooth scroll to top
• HTML5 placeholder fallback
• Navigation – remove margin from last item
• Remove bottom padding from last paragraph

PHP

• Add active class to navigation item based on page
• GZip page (optional alternative to htaccess)