Responsive Design - It’s time for a reality check Introduction Gabe Sumner Evangelist / Product Marketing Manager @gabesumner http://gabesumner.com/ Quick poll Responsive design allows us to… …create once and adapt for any device Quick introduction to Responsive Design Here is a simple 3-column webpage And this is what it looks like in a web browser Ok, let’s make this responsive First, we’ll address scaling… By default, most smartphones will simply ‘zoom out’ to support any width required by the web page Viewport width = 830px This can be disabled with a single META tag The web page is still 830px wide, but ‘scaling’ has been disabled. Visitors must now pan left-to-right to view the entire website. Device width = 320px Now we need a way of specifying different styles for different devices… This will involve CSS3 Media Queries… This specifies a unique style for “small screens” Here is a basic example… Sitefinity does all of this…automatically Responsive Design integrated into Sitefinity Another quick poll Ok, so what’s the problem? End-users don’t code Marketing System Admins. Managers Developers Designers Authors And Rich Text Editors will destroy everything… Create a safe & predictable authoring environment Content Authoring Design Telerik Sitefinity Design Start by visualizing how the page will transform… Then turn your design into HTML & CSS Avoid “greedy” CSS styling Testing common resolutions & breakpoints… Smartphone- 320 x 480 Tablet - 768 x 1024 Desktop - 1024 x 1280 Identify the editable regions of the page… Make Sitefinity “aware” of the website’s layout structure Add responsive rules to transform the layout Telerik Sitefinity Content Authoring A poorly configured WYSIWYG editor… …is a virus masquerading as a feature. Disable unneeded (and destructive) tools… Recommended Rich Text tools Bold, Italic Links, Images Lists (bulleted, ordered), Indentation Styles, Alignment Special characters Undo, Redo Eliminate the temptation to use ad-hoc styles And auto-cleanse pasted content from Word Up until now, we’ve been talking about unstructured content creation But unstructured content creates challenges… …when consistency is required Or define entirely new content types Control the HTML with page & widget templates Thank you Questions?