Responsive
Design
the golden ratio

a presentation

Please use the arrows at the top of the screen,
or your keyboard arrows to navigate the slides.

The Basics

To produce the optimal user experience for different use cases and environments, all built into one website.

In other words, an adaptive layout, that usually consists of:

  • Resizing images, copy, margins, whitespace
  • Serving bandwidth conscious images and content
  • Simplifying page elements
  • Hiding non-essential items
  • Providing finger-friendly UI
  • Detecting and responding to new features, such as geolocation, cameras, multi-touch, interaction with a devices existing mobile apps, device orientation on a mobile, etc

How It Works

Basic style changes:
CSS media queries keyed to resolution changes
-Most commonly width changes, but could be height or other criteria
Example: responsive_example.css

Full functionality changes:
-Custom Jquery modules that only run at certain screen resolutions
-Dynamic PHP that includes/replaces content instead of hiding it
Example: http://css-tricks.com/convert-menu-to-dropdown/

Start With a Grid

Fluid or strict, starting with a grid makes degradation easy:

Normal grid:
1 column = 30px
2 columns = 70px
3 columns = 120px
(10px margin in between)

Smaller resolution query:
1, 2 and 3 columns = 30px

Pros and Cons

Pros:

  • One solution that works for every scenario
  • Sharing a link doesn't send a friend to the wrong site version
  • Workspace friendly, not just device friendly
  • Encourages "Mobile First" design, an evolving best practice
  • Ease of use can increase viewers

Cons:

  • Dev time
  • Browser compatibility
  • Load times if bandwidth is not considered
  • Different devices/Different objectives
  • Responsive advertising solutions are still only in prototype phases
  • Proper image resizing includes recropping images appropriately

Currently Backwards Thinking

Responsive Design is most commonly used right now to address degradation to smaller viewports from the current normal average screen resolution for users

It can also be used to pre-emptively design for larger resolutions as well.
-you'll be trendy and adhering to that new resolution before anyone else

Responsive Advertising Solutions Are Still Young

Many ads are sold by taking size and placement on the page into consideration. If you are selling one ad that adapts to different sizes, as well as changes it's placement on the page at different sizes, then don't we have to reinvent how ads are sold?

Many of the solutions are still in prototype phases from a technical standpoint as well.

Is It For Me?

  • It takes more time, and time is money
  • Are a lot of my users on mobile platforms?
  • Does it even make sense to use my product on a small device?
  • Do I serve a lot of advertisements?
    -Is there a good solution for responsive ads that works for me?
  • All my mobile users are on one device, should I just build an app?
  • Are most of my users on older browsers?
    -Can I convince them to migrate?
  • Is one of my site requirements high resolution/bandwidth content?
    -Would a mobile experience still be appropriate for that content?

Examples

There's plenty, but here are some of my favorites:

Resources

Recommended:

Round Ups:

The artist should control the flow of the composition, which means sometimes breaking the rules.

--J. M. Brodrick

That's All, Folks!


Make your own HTML Slideshow: