A Fresh Perspective on 

ResponSiVe Web Design

@JoshPalmeri, Front End Developer

 Stony Brook University

@JoshPalmeri, Front End Developer

 Stony Brook University

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

RWD

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

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

Responsive Web Design

HOT TREND

EVERYONE'S DOING IT

I'LL LOOK BAD

IT's THE

RIGHT

THING

TO DO

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://www.templehorses.com/2013/09/19/how-to-survive-a-diner-menu/

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

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, SWEETHEART

One question at a time...

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

giveChoices('appetizer');
giveChoices('beverage');
giveChoices('salad');
giveChoices('soup');
giveChoices('dinner');
giveChoices('sides');
giveChoices('dessert');
ask(appetizer);

if (wants_appetizer) {
    giveChoices('appetizer');
}

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

RWD

Responsive Web Design

RRWD

Responsible Responsive Web Design

RRWD

Responsible Responsive Web Design

RRRWD

Really Responsible Responsive Web Design

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

RRWD

Responsive == Responsible

Tips, tricks and TECHNIQUES

  • Fluid
  • Maintain aspect ratio
    • max-width: 100%
    • height: auto
  • Size them down
    • Double size, quality 60%
    • Media Queries to serve different versions

Images

  • Fluid
  • Maintain aspect ratio
    • The padding-top trick
    • CSS over JavaScript
  • HTML5 video challenges
    • Compatibility

Video

  • Performance
  • Methods
    • HTML5 with fallback
    • mp4, ogv, webm
  • Determining connection speed and acting accordingly

Background Video

  • Touch-enabled and swipe-ready
  • OwlCarousel
  • http://shouldiuseacarousel.com/
    • 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.”

Carousels

Navigation

Tabs

Accordions

To-Top Link

Other Elements

  • Responsive Templates
  • Converting to a responsive template from an existing “desktop” site
  • Documentation, documentation, documentation

OU Campus Templates

Core Tools and Workflow

  • MAMP/WAMP: Local dev
    • GET OFF THE SERVER… please :-)
  • IDE: Sublime text 3
    • PHP, HTML, CSS, JS
  • Browser: Chrome
    • Inspector
    • PageSpeed Insights

Core Tools

  • Terminal: iTerm
    • Git (version control)
      • Github / Bitbucket
  • Comps: Photoshop
  • Live Cross Browser Testing: SauceLabs
    • Also Browserstack
    • For live views, intricate more-demanding designs.
    • Typical browser “check” OU Campus v 10 has built-in cross-browser testing tool!

Core Tools

  • Emmet’s LiveStyle
  • Live Reload
  • Grunt
  • SASS/SCSS/LESS

Productivity Boosters

  • Cool Images: XN Retro
  • Notes: Evernote
  • GIF Maker: LICEcap
  • Clipboard History: ClipMenu
  • Task Management: Asana
  • Time Management: Toggl

Extras

  • http://bradfrost.github.io/this-is-responsive/
  • http://mobilewebbestpractices.com/
  • http://patternlab.io/
  • http://styleguides.io/

Resources

THANK YOU

Now, go make something great.

SBU: A Fresh Perspective on Responsive Web Design

By palmerijosh

SBU: A Fresh Perspective on Responsive Web Design

  • 624
Loading comments...

More from palmerijosh