A Fresh Perspective on
ResponSiVe Web Design
@JoshPalmeri, Front End Developer
Stony Brook University
http://slides.com/palmerijosh/outc15/live
@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?
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/
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
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
Responsive == Responsible
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
- 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
Carousels
- Hide second level of content
- Stepping them through
- History state via #hashtag using jQuery bbq
- Combine with smooth scroll
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
- Cross-Browser Testing
- Built-in OU Campus v10!
- Live views: SauceLabs or BrowserStack
- PageSpeed Insights (Chrome plugin)
- Resizer (Javascript bookmarklet)
Core Tools
-
- <!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
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.
OUTC15: A Fresh Perspective on Responsive Web Design
By palmerijosh
OUTC15: A Fresh Perspective on Responsive Web Design
A presentation on concepts and tools for a responsive design initiative.
