Building Responsive Sites

Contact Us or call 1-877-932-8228
Building Responsive Sites

Building Responsive Sites

A number of methodologies, technologies, and tools are involved in building responsive sites. Here's an overview of the key strategies:

Flexible Grid

A first step toward a responsive design is a fluid grid layout. Instead of setting widths for HTML elements like divs in pixels, we will instead use percentages. Instead of a 980-pixel, fixed-width, center-justified design - a page that remains always at 980 pixels wide, regardless of how we view it - we'll use a fluid layout, where the page scales to fill a set percentage of the screen, and elements within the design scale bigger and smaller (but remain in proportion) as the size of the device or browser changes.

Flexible Images

A flexible grid design, in which elements shrink to accommodate different browser or screen widths, would fail miserably if images and other fixed-width elements didn't scale, too. We'll use the max-width:100% CSS directive to effect this.

Media Queries

CSS3 media queries allow us to target various properties of the user's device - screen size, browser width, and more. We'll use media queries extensively to craft different presentations of our sites - to change a two-column layout for desktop users to a one-column layout for mobile users, for instance.

Frameworks

We'll explore how jQuery Mobile - the JavaScript framework built on top of the popular jQuery framework - can help us "design a single highly branded website or application that will work on all popular smartphone, tablet, and desktop platforms." Similarly, we'll check out Bootstrap, the popular grid-based responsive layout framework, to see how these types of frameworks can simplify and speed the process of building mobile-friendly sites.

Next