Home » Uncategorized » Co-op Highlights 14

Co-op Highlights 14

A couple of weeks ago, a new project has developed at my organization – to remodel a website for our sister organization.  One of the ideas that came up was to remodel this using Responsive Web Design style or techniques.  Although I’ve heard of the term, I didn’t actually know much about what Responsive Web Design was, so I did a little research and thought I would document that here. As an introduction to Responsive Web Design (or RWD), Wikipedia provides a decent definition.

RWD recognizes that we are no longer viewing websites on a ‘normal’ computer desktop or laptop screen, but may be viewing these web pages on tablets, notebooks, smartphones, or even 60″ TVs.  In the past, websites were designed for specific viewing sizes.  As more and more people are accessing websites on a wider variety of electronics with varying screen sizes, it is necessary to be ‘responsive’ or proactive so that the viewing experience is optimized.  The goal is that navigation and easy viewing is accomplished with a minimum of scrolling and resizing. The main way to accomplish this is by using CSS3 media queries (based on the characteristics of the device accessing the website, usually the width of the browser), which is an extension of the @media rule.  Another key piece is using a fluid grid, where page elements are sized and resized in percentages.

Ethan Marcotte first used the term ‘Responsive Web Design’ in a May 2010 article in the magazine, A List Apart.  He also described the theory and practice of responsive web design in his 2011 book, Responsive Web Design.  Giving further credence to this web design style, RWD was listed as #2 in Top Web Design Trends for 2012 by .net magazine with progressive enhancement coming in at the #1 spot.

This website, http://mediaqueri.es/, gives some great examples of what you might see on different viewer/browser sizes, all showing the same website.
Infographics is another term that has come up recently regarding the website remodel for our sister organization. In a short definition, infographics is the ‘graphic visual representation of information, data, or knowledge, presenting complex information quickly and clearly.’  This Fast Company article from April 2011 provides some resources for creating infographics using template-driven tools.  This website, Visual.ly, also gives some great information.
Quite often, the solution to presenting data was to create a chart in Excel and copy that chart to your PowerPoint slide or your web page.  The result is rather plain-looking .  Infographics and data visualization takes this to a whole new level and will definitely be something to look for in the future.

One thought on “Co-op Highlights 14

  1. This is interesting – let’s discuss this further. It would be great if we could give you some hands-on exposure.


Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s