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
- Clear and concise
- Keep as simple as possible
- Multiple nav’s need to be clearly distinguished
- Be creative
Navigation
- Need a mobile solution
- History state via #hashtag using jQuery bbq
- Smooth scroll
Tabs
- Hide second level of content
- Stepping them through
Accordions
- Smooth-scroll back to top of page
- May want to custom define target depending on the page
To-Top Link
- Creative ways to display links
- http://mobile.cc.stonybrook.edu/sb/admissions/
- Icons using :after (Example)
- Site Search
- Global vs. Local
- http://stonybrook.edu/commcms/_cse/
- Social Links
- Lists
Other Elements
- Responsive Templates
- Converting to a responsive template from an existing “desktop” site
- Headers and Subheaders
- Custom Logo
- Tagline
- Social Links
- Site and sub navigation elements
- 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
- Git (version control)
- 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
