Loading

HEWebAL: A Fresh Perspective on Responsive Web Design

palmerijosh

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

A Fresh Perspective on 

ResponSiVe Web Design

@JoshPalmeri, Front End Developer

  Stony Brook University

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

joshua.palmeri@stonybrook.edu

@JoshPalmeri, Front End Developer

  Stony Brook University

  • New Second Level Pages
    • Admissions, UG Admissions, Jobs, EcoDev, Students, Summer Session, Faculty & Staff
  • Responsive Enhancement to existing OU sites
  • Bring us out of 2008
  • Support UG Admissions initiatives, + recruitment
  • Increase usability
  • Implement design consistency
  • Empower OU Campus users

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

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 and

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)
  • <picture> with srcset still largely unsupported (improving)

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

RWD with OU CAMPUS

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

OU Campus Templates

  • Configurable elements
    • Social Links
    • Headers and Subheaders
    • Custom Logo
    • Site tagline
  • Directory variables...

OU Campus Templates

  • Sub navigation
    • Clear, understandable
  • The importance of documentation

OU Campus Templates

TOOLS TO BOOST PRODUCTIVITY

Core Tools

Templating Tools

Essentials

Extras

  • 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/

Resources

THANK YOU

Now, go make something great.

@JoshPalmeri, Front End Developer

  Stony Brook University

joshua.palmeri@stonybrook.edu

http://slides.com/palmerijosh/hewebal

Made with Slides.com