I compiled information catered for web producers, technical project managers, SEO managers and webmasters to help faciliate a foundational understanding of the latest website trend: Mobile Responsive Design. I know there are many options for revamping a website, and I am most fond of this one.
What is Mobile Responsive Web Design?
What is a Flexible Grid?
Flexible (or fluid) grids happen when CSS3 prefixes are used to define regions in a layout. Elements such as margins, padding, rows, columns and spacing on the page are defined as proportions, not rigid percentages. All sizing becomes relative to other page elements. Once these prefixes are combined with media queries, everything comes together.
What’s a CSS3 Media Query?
Media queries allow websites to collect information about the device or browser being used to access the website, and then use the information to apply the proper CSS style. Different browser types or screen resolutions can be conditionally targeted using this list of W3 media queries.
What is Twitter Bootstrap?
The most common responsive styleguide used is Twitter Bootstrap (created by Twitter’s developer team). Bootstrap is an open-source, front-end toolkit used by developers and designers to support their projects. It is built on LESS (a cleaner CSS stylesheet language), works with HTML5 and supports custom jQuery plugins. There are many widgets available on bootstrap, which facilitates rapid prototyping. Many sites on Twitter Bootstrap tend to look alike, due to the lack of customization abilities.
Bootstrap 2 is designed to be desktop first, mobile also. Anything we want to render on mobile needs a specific media query, or the desktop version will show. For example: Bootstrap uses pixels: every nested element or component on the page needs sizing requirements defined to render correctly for each type of screen. There was recently an update to Bootstrap 3, which changed the style guide to be mobile first. Problem is, to upgrade to Bootstrap 3, one must rewrite some html.
What is Foundation?
The other front-end RWD in the game is Zurb’s Foundation. Foundation v5 also runs on a grid system, although the code looks a bit different from Boostrap. Foundation is mobile first, which means anything not specified with a media query will be considered mobile. Less people use this framework, so there will inherently be less support, tutorials and user forums available online. There are a very limited amount of UI elements compared to Bootstrap, which may require more front-end design skills.
What risks may I encounter by switching over to one of these?
Designing a website without a static design phase might also present some stylistic issues, so be sure to plan your comps around that. Design more elements and fewer layouts, reliant on HTML.
Sites presenting large amounts of data tables may also encounter some problems, because large numbers of rows and columns will be a challenge for mobile. There is no work-around for this yet, but there are several responsive table options available, ready to attach to your markup.
How can I learn more about RWD?
I really enjoy taking Codecademy courses. I used my free membership to familiarize myself with the fundamentals of HTML5 and CSS. They offer a short beginner level course aimed to teach the user how to design their own AirBnb page. I highly recommend taking the course, so you can also learn the fundamentals behind the Bootstrap framework.