One Site to Rule Them All: Responsive Web Design
20
-
Upload
slhilbert -
Category
Technology
-
view
110 -
download
3
description
This is a presentation I did at DNNCON Palm Beach October 2013. The presentation covers what Responsive Web Design is, how it works, and how to leverage it in DNN. Most of the information is in the slide notes.
Transcript of One Site to Rule Them All: Responsive Web Design
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
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 [email protected]://www.hilbertsolutions.comTwitter: slhilbertDNN: slhilbert
Conclusion
Is this thing on?
Questions?
THANKS TO ALL OF OUR SPONSORS!
