Thinking Inside andOutside the Grid – Responsive Web Design for Drupal

View Github Repository Open presentation in a new window

startinggravity

See all presentation from startinggravity

Thinking Inside andOutside the Grid – Responsive Web Design for Drupal

0 0

responsive-drupal

A presentation on responsive web design and grid systems from a Drupal perspective.

On Github startinggravity / responsive-drupal

Thinking Inside andOutside the Grid

Responsive Web Design for Drupal

Presented January 30, 2015 for the DSFederal Drupal Working Group

Jim Smith

If you're not mobile,you're not going anywhere.

Let's get this out of the way -- it should be obvious by now.

So start with mobile!

So start everything you do with mobile. Mobile first is more than just a starting point.

And keep it simple.

Don't complicate things unnecessarily. Fortunately, thinking 'mobile first' forces you to keep things simple.
Am I boring you yet? You've likely heard this before or it seems obvious, but let's drill down to make sure we fully understand why we should be mobile first.

What makes it mobile?

What about the mobile experience is so different that we should think about it first?

What makes it mobile?

  • Hand-held device
  • Smaller screen
  • Probably used in shorter sessions
  • Touch interface
  • Possibly slower connection
  • Possibly used in a location context
[REVEAL] Yes, these things differentiate a mobile experience from a desktop experience, but they also present opportunities for making a better user experience on all devices.
Making your design, your funcitonality work in the hectic, cluttered mobile world...
...makes your user experience better in a desktop environment.

Mobile apps are your competition.

Good mobile apps developers know how to cram lots of content into small spaces and make it accessible. We need to do that too.

Speed is your competition.

Your users have come to expect everything is fast. Bad design can slow them down, regardless of whether they are viewing on a mobile or desktop screen.
These are all things to think about before you begin a design. That's thinkiing outside the grid.
Now let's think inside the grid.

Grids are nothing new.

The idea of using a grid to layout something has been around for centuries. Newspapers adopted them to organize content and make it easy for the reader to flow from one story to the next.

To be responsive,you have to be flexible.

It's easy to get locked into a grid pattern, but that will cause you and your user grief if you do. Keep your grid flexible.

Grid Frameworks

Adopting a grid framework can take out a lot of the work while gaining all of the benefits of a grid.

Advantages

  • A quick start to designing.
  • Unifomity and structure in the design.
  • Repeatability and maintainability.
The advantages have made frameworks widely adopted.

Disadvantages

  • Can be a design crutch.
  • Can make all sites look the same.
  • Can be hard to learn and master.
  • Design specs don't always match framework.
Frameworks can stifle creativity.

Bootstrap

getbootstrap.com

Developed by Twitter, widely used, originally just used Less.

Foundation

foundation.zurb.com

Developed by Zurb, a design firm.

Omega

drupal.org/project/omega

Started as subtheme; uses Susy grid (960grid used in version 3); version 5/D8 in development.

Zen

drupal.org/project/zen

Uses Zen grid, developed by John Albin Wilkin

Grid Framework Similarities

  • Intended for mobile first design.
  • Based on a 12-column grid.
  • Use predefined classes to set columns.
  • Additional predefined classes for more customization.
Frameworks can stifle creativity.

Aurora

snugug.github.io/Aurora

Uses Singularity grid; uses Bower, Gulp, Yeoman to install and manage; developed by Ian Carrico and Sam Richard

Aurora differences

  • Does not require specific classes for grid layout.
  • Uses minimal markup.
  • Effectively driven by Compass extensions.
  • Third-party tools like Gulp, Yeoman, Livereload are built in.
  • Organize files using BEM, SMACCS, something else? No problem.
Bower = package manager; Gulp = task runner; Yeoman = generator.

Find your own way.

I dislike Bootstrap, Foundation, etc., but it might be the right path for you.

Jim Smith

0