Responsive Web Design

Stuart Hilbert

The Journey Ahead

What?Why?How?Demo!Inspect!Throw?!?

Responsive Web Design

Why?

Responsive Web Design

Trendier than an Elvin Forged SwordResponsive design was listed as #2 in Top Web Design Trends for 2012 by .net magazineMashable called 2013 the Year of Responsive Web DesignForbes – Prioritize it right now

Responsive Web Design

Must have been Orcs on the previous slide

What is RWD?

Optimal Viewing ExperienceMinimum

ResizingPanningScrolling

Future Proof

Responsive Web Design

This site even looks great on

here!

Responsive vs. Traditional Mobile

{{Many Different Pages One Page

Responsive Web Design

Responsive Web Design

The Age of the Elves is Fading

Technology

JavaScriptJQueryCSS

Responsive Web Design

Did you say second breakfast?

Frameworks

Fluid ConceptPercentages Rather than AbsolutesColumns/Rows

Flexible ImagesMedia QueriesConditional ContentIconsAdditional Functionality

Responsive Web Design

FrameworksFoundation

http://foundation.zurb.com

Gumbyhttp://gumbyframework.com

Unsemantichttp://www.Unsemantic.com

Bootstraphttp://getbootstrap.com

Skeletonhttp://www.getskeleton.com

CSSGrid.nethttp://cssgrid.net

Less Framework http://lessframework.com

Frameworks

I look just like you except for that hand

placement.

Bootstrap

Twitter Bootstrap

Built by TwitterBackwards compatible to IE 712 Column GridDozens of ComponentsJavascript PluginsTypographyForm ControlsDocumentation

Bootstrap

Twitter Bootstrap

Hands on Demo in DNNBS130630 Responsive Skin / Business / Slider / Gallery / Bootstrap / Mobile / DNN 7/6/5

POTATOES!

Cons/Pitfalls/Shelob

Some Modules Aren’t ResponsiveNeed HTML KnowledgeStyle HacksLoss of ControlEasy to mess upSEOAdditional Overhead

Pros/Cons

Pros

Works on all devicesMobile ready in minutesCan be sped up with(RESS)Easy to useConditional ContentQuickly updateSEO

Pros/Cons

Availability

800+ Responsive Skins150+ Bootstrap Skins75+ Modules That mention Responsive

What are you waiting for?

Contact

Stuart HilbertStuart@HilbertSolutions.comhttp://www.hilbertsolutions.comTwitter: slhilbertDNN: slhilbert

Conclusion

Is this thing on?

Questions?

THANKS TO ALL OF OUR SPONSORS!