Responsive Design - It’s time for a reality check

Introduction Gabe Sumner Evangelist / Product Marketing

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 Device width = 320px The web page is still 830px wide, but ‘scaling’ has been disabled. Visitors must now pan left-to-right to view the entire website.

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 AuthorsDesignersDevelopersMarketing System Admins. Managers

And Rich Text Editors will destroy everything…

Design Content Authoring Create a safe & predictable authoring environment

Design Sitefinity Telerik

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 x 1024 Desktop 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

Content Authoring Sitefinity Telerik

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?