Transcript Responsive Design – It`s time for a reality check

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?