Introduction Gabe Sumner Evangelist / Product Marketing Manager
@gabesumnerhttp://gabesumner.com/
Slide 3
Quick poll
Slide 4
Responsive design allows us to create once and adapt for any
device
Slide 5
Quick introduction to Responsive Design
Slide 6
Here is a simple 3-column webpage
Slide 7
And this is what it looks like in a web browser
Slide 8
Ok, lets make this responsive
Slide 9
First, well address scaling By default, most smartphones will
simply zoom out to support any width required by the web page
Viewport width = 830px
Slide 10
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.
Slide 11
Now we need a way of specifying different styles for different
devices
Slide 12
This will involve CSS3 Media Queries This specifies a unique
style for small screens
Slide 13
Here is a basic example
Slide 14
Sitefinity does all of thisautomatically
Slide 15
Responsive Design integrated into Sitefinity
Slide 16
Another quick poll
Slide 17
Ok, so whats the problem?
Slide 18
End-users dont code AuthorsDesignersDevelopersMarketing System
Admins. Managers
Slide 19
And Rich Text Editors will destroy everything
Slide 20
Design Content Authoring Create a safe & predictable
authoring environment
Slide 21
Design Sitefinity Telerik
Slide 22
Start by visualizing how the page will transform
Slide 23
Then turn your design into HTML & CSS
Slide 24
Avoid greedy CSS styling
Slide 25
Testing common resolutions & breakpoints Smartphone- 320 x
480 Tablet - 768 x 1024 Desktop - 1024 x 1280
Slide 26
Identify the editable regions of the page
Slide 27
Make Sitefinity aware of the websites layout structure
Slide 28
Add responsive rules to transform the layout
Slide 29
Content Authoring Sitefinity Telerik
Slide 30
A poorly configured WYSIWYG editor is a virus masquerading as a
feature.
Slide 31
Disable unneeded (and destructive) tools
Slide 32
Recommended Rich Text tools Bold, Italic Links, Images Lists
(bulleted, ordered), Indentation Styles, Alignment Special
characters Undo, Redo
Slide 33
Eliminate the temptation to use ad-hoc styles
Slide 34
And auto-cleanse pasted content from Word
Slide 35
Up until now, weve been talking about unstructured content
creation
Slide 36
But unstructured content creates challenges when consistency is
required