Slide 1

Responsive Design - Its time for a reality check

Slide 2

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

Slide 37

Or define entirely new content types

Slide 38

Control the HTML with page & widget templates

Slide 39

Thank you Questions?