Responsive web frameworks: Twitter Bootstrap, Foundation, and Skeleton compared

What is responsive web design? According to myself – this is from williamp.com, my own responsive site showcasing my portfolio:

It is an approach to crafting sites so that visitors have an optimized experience, one usually with no sideways scrolling, minimal resizing, and hopefully not much waiting, regardless of the device through which they visit, whether phone, tablet, laptop, desktop or something else (anyone here via web television?). It now typically embodies a mobile-first approach so that visitors using smaller viewports are given primary consideration though viewers with larger viewports may have a progressively enhanced experience, one often involving larger type and images and sometimes additional content.

Vermilion design + interactive offers this brief comparison of the big three responsive CSS frameworks. I’ve used all three and appreciate them all. I started with Skeleton and its simplicity made learning it so easy. Twitter Bootstrap has the most assets in its library currently, and I’m just finishing a new site composed with it. I like Foundation 4 because it is mobile-first by default and I think this framework is gaining momentum rapidly.

My responsive web portfolio – williamp.com

Today I link to my own responsive web portfolio and present some screen captures, too, to show how the site responds to vastly different viewport characteristics.

Screen capture of index page of my web site  - williamp.com - bearing my web portfolio in a Firefox browser

Screen capture of index page of my web site – williamp.com – bearing my web portfolio in a Firefox browser.

Screen capture of index page of web site - williamp.com - bearing my web portfolio in a Blackberry Storm..

Screen capture of index page of my web site – williamp.com – bearing my web portfolio in a Blackberry Storm.

A few sentences about media queries

Here are some very brief remarks for the uninitiated on media queries.

Media queries are a means to assign different CSS (cascading style sheet) rules to different devices and device characteristics, according to Stephen Bradley’s How To Use Media Queries For Device Targeting  (2011). Ben Frain, in Responsive Web Design Using HTML5 and CSS3 (2012, p. 89), writes that media queries limit the shortfalls of a fluid layout and a fluid layout eases the change from one set of defined styles within a media query to another.

WordPress.com and me

This WordPress.com blog addresses a few of many things that interest me. I am William Possidento and I’m linking this blog to my web portfolio which showcases my design and development talents with:

  • User Experience (UX) design
  • Responsive web design and development
  • Skeleton framework
  • Twitter Bootstrap
  • Foundation
  • HTML5 (I used to work in HTML4)
  • CSS3 (I used to work in CSS2)
  • JavaScript
  • jQuery
  • jQuery Mobile
  • Balsamiq
  • Axure RP
  • Pixate
  • Camtasia Studio
  • Adobe PhotoShop
  • Adobe Illustrator
  • Adobe InDesign
  • Sketch
  • WordPress
  • Google AdWords Certification
  • Google Analytics Individual Qualification
  • email design and development
  • MailChimp
  • HootSuite
  • Web usability, user experience, and user interfaces