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

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

Fluid, maintain aspect ratio
- The padding-bottom trick
- CSS over JavaScript
Compatibility
- No flash-only!
- HTML5 video with flash fallback
  - SublimeVideo --> DailyMotion
  - YouTube uses HTML5 with flash fallback

Video

Performance
- Desktop vs. mobile
Methods
- Image as a fallback
- Use preload = "none" and play()
Determining connection speed and acting accordingly
- Network Information API (still experimental)

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
- OwlCarousel --> Slick

Carousels

Hide second level of content
Stepping them through
History state via #hashtag using jQuery bbq
Combine with smooth scroll
- Admissions and Summer Session

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

Sublime Text 3 + Package Control
- Emmet LiveStyle
- LiveReload
Cross-Browser Testing
- Built-in OU Campus v10!
- Live views: SauceLabs or BrowserStack
PageSpeed Insights (Chrome plugin)
Resizer (Javascript bookmarklet)

Core Tools

HTML5 boilerplate
- <!doctype html>
- Includes normalize.css
- Modernizr feature detection
Apache HTTP server boilerplate
Brad Frost’s Responsive Patterns
- Impressive starting point for developing various responsive patterns

Templating Tools

Respond.js
Modernizr
"viewport" meta tag
Fastclick

Essentials

Cool Image Effects: XN Retro
Notes: Evernote
GIF Motion Screenshots: 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/
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