1. Responsive Design - It’s time for a reality check

2. Introduction Gabe Sumner Evangelist / Product Marketing Manager @gabesumnerhttp://gabesumner.com/

3. Quick poll

4. Responsive design allows us to… …create once and adapt for any device

5. Quick introduction to Responsive Design

6. Here is a simple 3-column webpage

7. And this is what it looks like in a web browser

8. Ok, let’s make this responsive

9. 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

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.

11. Now we need a way of specifying different styles for different devices…

12. This will involve CSS3 Media Queries… This specifies a unique style for “small screens”

13. Here is a basic example…

14. Sitefinity does all of this…automatically

15. Responsive Design integrated into Sitefinity

16. Another quick poll

17. Ok, so what’s the problem?

18. End-users don’t code AuthorsDesignersDevelopersMarketing System Admins. Managers

19. And Rich Text Editors will destroy everything…

20. Design Content Authoring Create a safe & predictable authoring environment

21. Design Sitefinity Telerik

22. Start by visualizing how the page will transform…

23. Then turn your design into HTML & CSS

24. Avoid “greedy” CSS styling

25. Testing common resolutions & breakpoints… Smartphone- 320 x 480 Tablet - 768 x 1024 Desktop - 1024 x 1280

26. Identify the editable regions of the page…

27. Make Sitefinity “aware” of the website’s layout structure

28. Add responsive rules to transform the layout

29. Content Authoring Sitefinity Telerik

30. A poorly configured WYSIWYG editor… …is a virus masquerading as a feature.

31. Disable unneeded (and destructive) tools…

32. Recommended Rich Text tools Bold, Italic Links, Images Lists (bulleted, ordered), Indentation Styles, Alignment Special characters Undo, Redo

33. Eliminate the temptation to use ad-hoc styles

34. And auto-cleanse pasted content from Word

35. Up until now, we’ve been talking about unstructured content creation

36. But unstructured content creates challenges… …when consistency is required

37. Or define entirely new content types

38. Control the HTML with page & widget templates

39. Thank you Questions?