ResponsiveCSS3PolyfillBootstrapGrid.JS – What The Heck Is This Stuff and why should you care?
By Shahab Lashkari, Product Manager, OmniUpdate, Inc., @OUShahab. View Presenter’s Slides
Shahab Lashkari, a Product Manager at OmniUpdate, Inc., explained the long title in one short sentence: What you need to build your templates from scratch that are browser compatible.
There are several tools needed to build a robust responsive site that will ensure browser compatibility. This session covers all the essentials to get you started. Whether you should CSS reset or Normalize, what grid will best work for you, what JavaScript tools are out there, best support for old browsers, and what kind of frameworks are most recommended.
What you will need:
- CSS Reset v. Normalize
- Grids
- JavaScript Tools
- Polyfills
- Frameworks
CSS Reset vs. Normalize
When we begin coding our responsive site, a common practice is to start with a CSS reset for browser compatibility where you reset everything to a baseline, however, everything doesn’t have to always be reset. A better practice is to use Normalize.css, this resets and normalizes, yes, but only for the elements that are different on all browsers, therefore the file is smaller and renders faster. Further, it gives consistency among browsers and only changes what you need to change.
Grids
Second, you will need to simplify your layout to make the responsive design easier.
Tools that help you:
- Gripdpack: Is a web service that allows you to design and see where the breakpoint is. It also provides you with a transparent PNG file so you can use it in the design layout process.
- Unsemantic. Is a responsive 960 based grid system.
Javascript Tools
Third, you will need JavaScript jQuery: This will help you with cross-browser consistency.
Recommended tools:
- zepto.js: Is designed to be a light jquery compatible library (zepto.js , a condensed version of jQuery, designed to be super light, especially x mobile devices).
- html5shim: All that you build should be HTML5, built to be cross-browser compatible. This will make all versions of IE work correctly with your CSS styles.
- In order to get IE to work, you need to create that element.
- Modernizr: Is a library that tests with Boolean values to objects and then do something else. This will tell you what your browser supports. Modernizr, when downloading, you can customize using what you will need.
Polyfills
OK, I have my grid, my javascript, took care of the modernizr, now we need Polyfill. What is Polyfill? It’s retro support for old browsers.
Some examples:
- CSS3Pie (Progressive Internet Explorer)
- Respond.js: When dealing with RWD. Older IE versions ignore jQueries. That’s why you need to build mobile first. But when you do this with IE, you use jQueries but IE older versions 8 and older, will ignore the queries. So respond.js will help you with the responsive part for older versions of IE.
- Yepnope.js: uses Booleans to see what is supported in your browser.
Frameworks (base HTML, css with grid, buttons, tabs, etc.)
Frameworks provide a great start because they come with standardized code for grids, css, buttons, tabs, etc., that are already responsive. Why reinvent the wheel, right? However, there are so many out there, which one should we chose?
- Bootstrap: Is good for an app. But for a website, it is a little heavy. There are other frameworks more user-friendly.
- Foundation: Is the opposite direction. The important thing is that they do a huge change of how the foundation works; also they went to a mobile first concept, efficient and lightweight. Use Google analytics to see what older versions of IE are doing, and where are they going.
- Semantic UI: A full frame framework fairly new doesn’t mean it’s bad, but you do want to do more testing. The good thing about these new frameworks is that they don’t want to be the major frameworks, so they provide the essential of what you need.
- Topcoat: It is fast, mobile optimized, and handles mobile concepts like swiping.
- Pure: Is a small, minified and gzipped framework crafted with mobile devices in mind.
IMPORTANT** Whichever framework you choose, make sure you test constantly.
Thoughts
The important thing to note is that people building these frameworks are developers that use them constantly, so they are constantly tested.
Regarding frameworks: Try not to reinvent the wheel! Use them and take advantage of them so you can move into something else. You can create a nice template within ten minutes.