Annette Fowler

Preparing for your responsive design project

Est. Reading Time: 4 minutes

Beacon recently released a good number of very nice responsive websites (University of the Virgin Islands, University of Scranton, Whitman School of Management, Grossmont-Cuyamaca Community College District, Beacon Technologies), and I thought I’d jot down some things that I learned as a part of these projects that might be useful for others as they prepare their own responsive design projects.


The following is a list of some of the terminology used in conjunction with responsive web design.

  • Responsive Design– Addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen – from Responsive Web Design
  • Media Queries
    • CSS declaration that allows for the different layouts to appear at different screen sizes – from Overview of Breakpoints in Responsive Web Design
    • HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets – from W3Schools “Media Queries
    • For example:

@media all and (min-width: 600px) { }

@media all and (min-width: 860px) { }

  • Breakpoints-- Break points in responsive web design are browser widths that have a media query declaration to change the layout once the browser is within the declared range - from Overview of Breakpoints in Responsive Web Design
  • Layouts
    • Basic Fluid Lay­out– Con­tent con­tin­u­ally flows or adjusts in a word-wrap fash­ion as screen width is increased or reduced.  There are no “dis­tinct” dif­fer­ences in con­tent pre­sen­ta­tion.  Web Site Example
    • Adap­tive Lay­out- There are pre­de­fined sizes where dif­fer­ent lay­outs are trig­gered.  These are called break points.  Typ­i­cally there are three or four break­points to accom­mo­date desk­top, tablet and mobile screen sizes.  Web Site Example
    • Respon­sive Lay­out- This is a hybrid of Basic Fluid Lay­out and Adap­tive Lay­out.  There are pre­de­fined break points, how­ever in between these break points con­tent will flow to expand or con­tract.  Web Site Example

Leaders in Responsive Design

Of course, this list could be updated daily, but here are some responsive design references we use currently:

Pros and Cons of Responsive Web Design

  • Positives
    • Less content and site maintenance due to one set of content for all devices
    • No “duplicate content” issues for SEO like with separate mobile sites
    • Google recommends responsive web design and Panda rewards the improved user experience that responsive design can provide.
  • Negatives
    • Can require significantly more design and development time because each breakpoint has to be analyzed, designed, developed and tested
    • Pages with lots of content could cause memory and page load issues to show ALL content
    • In general, “on-mouseover” effects are not recommended
    • Designing on a grid can cause some sacrifice in creativity

Beacon Resources

Other Resources

Please share your experiences with responsive website design in the comments!

2 Trackbacks

  • By Why Retina Optimization Matters for Non-Retina Devices on December 18, 2013 at 1:33 pm

    […] Computers now have a wide range of screen widths, and to handle this we utilize responsive web design to serve up content in a variety of layouts depending on the screen size of the viewers computer or mobile device. One of our project managers has written a great article about the ins and outs of responsive web design here. […]

  • By A Calendar for Your Website on January 7, 2014 at 3:10 pm

    […] usable on multiple mobile devices and screen sizes.  Even if you can’t invest in a complete responsive design at this time, be sure to plan for the calendar to be usable on mobile devices. For example, Beacon […]