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
- Fluid, maintain aspect ratio
- The padding-bottom trick
- CSS over JavaScript
- Compatibility
- No flash-only!
-
HTML5 video with flash fallback
- Video.js / MediaElement.js
- YouTube / Vimeo use 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
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
- 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
- Bootstrap
- Foundation
- Skeleton
- etc...
Templating Tools
- Respond.js
- Modernizr
- "viewport" meta tag
- Fastclick
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
HEWeb Milwaukee: A Fresh Perspective on Responsive Web Design
By palmerijosh
HEWeb Milwaukee: A Fresh Perspective on Responsive Web Design
A presentation on concepts and tools for a responsive design initiative.
- 9,379