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/

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
- http://stonybrook.edu/undergraduate-admissions/

Navigation

Need a mobile solution
- Accordion!
- http://mobile.cc.stonybrook.edu/sb/campus-safety/
History state via #hashtag using jQuery bbq
Smooth scroll

Tabs

Hide second level of content
Stepping them through
- http://mobile.cc.stonybrook.edu/sb/admissions/
- http://mobile.cc.stonybrook.edu/sb/summer-session/resources/faq/

Accordions

Smooth-scroll back to top of page
May want to custom define target depending on the page
- http://mobile.cc.stonybrook.edu/sb/summer-session/resources/

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
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.