A Fresh Perspective on 

ResponSiVe Web Design

@JoshPalmeri, Front End Developer

  Stony Brook University

http://slides.com/palmerijosh/heweb15/live

joshua.palmeri@stonybrook.edu

http://www.turbosquid.com/3d-model/box/

TO SERVE OTHERS

A Fresh Perspective on 

ResponSiVe Web Design

@JoshPalmeri, Front End Developer

  Stony Brook University

http://slides.com/palmerijosh/heweb15/live

joshua.palmeri@stonybrook.edu

  • New Second Level Pages
    • Admissions, UG Admissions, Jobs, EcoDev, Students, Summer Session, Faculty & Staff
  • Special Projects (40 Under Forty, Directory)
  • Responsive Enhancement to existing OU sites
  • Bring us out of 2008
  • Increase usability, design consistency
  • Empower CMS users
  • Foster adoption

http://2012books.lardbucket.org/books/public-speaking-practice-and-ethics/s08-audience-analysis.html

Text

Responsive

I Am

http://2012books.lardbucket.org/books/public-speaking-practice-and-ethics/s08-audience-analysis.html

RWD

http://alistapart.com/article/responsive-web-design

http://alistapart.com/article/responsive-web-design

'00

http://alistapart.com/article/responsive-web-design

'05

http://alistapart.com/article/responsive-web-design

'10

http://alistapart.com/article/responsive-web-design

'15

'15

http://alistapart.com/article/responsive-web-design

FLUID GRID

FLEXIBLE IMAGES

MEDIA QUERIES

https://www.flickr.com/photos/lukew/10430507184/in/set-72157636814608894

MOBILE FIRST?

INNOVATION IN

COPYWRITING FOR THE WEB

http://www.templehorses.com/2013/09/19/how-to-survive-a-diner-menu/

http://gifrific.com/mark-wahlberg-shock-and-confused-look/

To serve our users better

Presenting them with the content they need

When they need it

WheRE they need it.

To serve our users better

Presenting them with the content they need

When they need it

WheRE they need it.

To serve our users better

Presenting them with the content they need

When they need it

WheRE they need it.

To serve our users better

Presenting them with the content they need

When they need it

WheRE they need it.

http://gifrific.com/mark-wahlberg-shock-and-confused-look/

multiple dimensions

cannot be effectively communicated

on a single plane

http://www.templehorses.com/2013/09/19/how-to-survive-a-diner-menu/

KEEP IT SIMPLE!

One question at a time...

http://www.templehorses.com/2013/09/19/how-to-survive-a-diner-menu/

To serve our users better

Presenting them with the content they need

When they need it

WheRE they need it.

http://www.forbes.com/sites/louiscolumbus/2013/09/12/idc-87-of-connected-devices-by-2017-will-be-tablets-and-smartphones/

IDC: 87% Of Connected Devices Sales By 2017 Will Be Tablets And Smartphones

RRWD

Responsible Responsive Web Design

Keep it real

http://www.potknox.com/blog/real-world-advice-on-getting-your-startup-published/

IF it is progress

It is good

content is key

  • Uniformity
    • Format is consistent
  • Centralization
    • Single source of truth
  • Organization
    • Easy to access, easy to understand

Content: Unity As A Goal

content is key

RRWD

Tips, tricks +

TECHNIQUES

  • Fluid, maintain aspect ratio
    • max-width: 100%
    • height: auto
  • Size them down
    • Double size for mobile, quality 60%, 100-150k max.
    • Use an image optimizer, e.g. kraken.io/
    • Media Queries to serve different versions (background)

Images

 

 

 

 

 

 

Images

Video

Background Video

  • Rethink usage, look at analytics
    • 1% clicked... out of those, 89% were 1st position
    • “Carousels are effective at being able to tell people in Marketing/Senior Management that their latest idea is on the Home Page. Use them to put content that users will ignore on your Home Page. Or, if you prefer, don’t use them. Ever.”
  • Touch-enabled and swipe-enabled

Carousels

Accordions

  • Provide a reference point
  • Smooth-scroll to #anchor using jQuery.scrollTo
  • history state of #anchor using jQuery bbq
  • To-top button
    • Useful especially with longer pages
    • Unobtrusive yet accessible
    • May want to custom define target depending on the page

In-Page Navigation

  • Mobile + Tables = bad
  • Solution? Tablesaw!
    • Stacking
    • Sorting
    • Swiping

Tables

  • Encourages user 
    interaction
  • Useful for 
    dynamic content

Overlays

RWD + CMS

  • Responsive Templates
  • Converting to a responsive template from an existing “desktop” site
    • Graceful degradation
    • vs. progressive enhancement (mobile-first)

CMS Templates

  • Configurable elements == options
    • Social Links
    • Headers and Subheaders
    • Custom Logo
    • Site tagline
  • The more options, the less questions (hopefully!)

CMS Templates

  • Documentation, documentation, documentation
  • Time saver, sanity retainer
  • Protect the investment

Documentation

TOOLS TO BOOST PRODUCTIVITY

Core Tools

Templating Tools

  • Bootstrap
  • Foundation
  • Skeleton
  • etc...

Templating Tools

Essentials

Productivity Boosters

  • http://bradfrost.github.io/this-is-responsive/
  • http://mobilewebbestpractices.com/
  • http://patternlab.io/
  • http://styleguides.io/
  • http://fontawesome.io/
  • http://darsa.in/motio/
  • http://samherbert.net/svg-loaders/
  • http://css-tricks.com/can-we-prevent-css-caching/
  • http://www.responsinator.com/
  • http://lab.maltewassermann.com/viewport-resizer/
  • http://caniuse.com/
  • Ton o' notes: https://goo.gl/IbzGKi

Resources

THANK YOU!

Now, go make something great.

@JoshPalmeri, Front End Developer

  Stony Brook University

joshua.palmeri@stonybrook.edu

http://slides.com/palmerijosh/heweb15