Transcription
Content Authoring forResponsive DesignPRESENTED BYMike HamiltonV.P. Product Evangelism at MadCap Softwaremhamilton@madcapsoftware.com
AGENDA Responsive DesignCore Components of Responsive DesignThe Role of Content StructureThe Role of CSSThe Role of Media QueriesResponsive Design StrategiesShort Term RD TechniquesLong Term RD PlansThe RD Missing Link – Future of RD
WHAT IS RESPONSIVEDESIGN?
WHAT IS RESPONSIVE DESIGN? A concept, first described by webdesigner Ethan Marcotte n A design concept created to address“stress points”
WHAT IS RESPONSIVE DESIGN?Responsive Design is NOT:» A smaller version of your page» Removing content to fit» A separate version for each and everydevice out there
WHAT IS RESPONSIVE DESIGN?Responsive Design is:» A single version of your content» Delivered to your customer» In a way that is easily understood» No matter what device they are using
RESPONSIVE DESIGNTHE EASY WAY(LET FLARE DO THE HARD WORK)
CORE COMPONENTS OFRESPONSIVE DESIGN
CORE COMPONENTS Document Structure CSS Media Queries
DOCUMENT STRUCTURE
DOCUMENT STRUCTURE In Responsive Design less ismore Keep formatting out of the coredocument EXAMPLE: No more hiddentables
DOCUMENT STRUCTURE
DOCUMENT STRUCTURE
DOCUMENT STRUCTUREIn addition to hidden layout tables,other items to avoid:»Fixed size DIV containers»Fixed size images»Any inline formatting/sizing
DOCUMENT STRUCTUREIt may feel like going backward,but, the more your pages look likethis
DOCUMENT STRUCTURE the easier Responsive Design will be.DEMO
CSS
CSSThe second leg of the RD stool isCascading Style Sheets (CSS)»All look/feel/formatting»Block level (p, H1, H2, etc.)»Character level (span)»Grouping/formatting level
CSS
CSS
CSS
CSS
MEDIA QUERIES
MEDIA QUERIESThe new “Secret Sauce” ofResponsive Design»Part of the CSS3 spec.»Derived from CSS2 Media Types
MEDIA TYPES@media screenbody{color: #000000;font-family: Verdana, Arial, Helvetica,sans-serif;font-size: 0.8em;}@media printbody{color: #000000;font-family: “Times New Roman”;font-size: 10pt;}
MEDIA QUERIESMedia Queries provide for:»Testing the parameters of theviewing device»Dynamically adjusting the CSSinformation based on the reportedparameters
MEDIA QUERIES@media screen and (max-width: 480px){body{background-color: yellow;}}@media screen and (min-width: 481px) and (maxwidth: 650px){body{background-color: red;}}@media screen and (min-width: 651px){body{background-color: green;}}
MEDIA QUERIES@media screen and (max-width: 480px){body{background-color: yellow;}}
MEDIA QUERIES@media screen and (min-width: 481px)and (max-width: 650px){}body{background-color: red;}
MEDIA QUERIES@media screen and (min-width: 651px){body{background-color: green;}}DEMO
MEDIA QUERIESWhat can Media Queries test?»Width/Height (display area)»Width/Height (device)»Orientation(portrait/landscape)»Aspect Ratio»Resolution (pixel density)
RESPONSIVE DESIGNSTRATEGIES
STRATEGIES First, focus on content areas andpurposes, rather than specificformatting Think of each of these areas as agrid element
STRATEGIESHeaderContentContentContent123
STRATEGIESHeaderContent1Content2Content3
STRATEGIESHeaderContent1Content2Content3
STRATEGIES To control your grid elements theconcept of “break-points” wasdeveloped Break-points are the media queryvalue where you want your grid tochange
STRATEGIES There are differing break-pointstrategies One school is to create break-pointsbased on the resolution of commondevices except
COMMON DEVICE RESOLUTIONS HTC is just one phone vendor Android is just one type of HTC phone
COMMON DEVICE RESOLUTIONS
COMMON DEVICE RESOLUTIONSResolution /Graphic ArrayResolution /Graphic ArrayResolution /Graphic ArrayResolution /Graphic Array2880 x 18001600 x 900HD 1136 x 640400 x 240WQVGA2560 x 17002560 x 1600WQXGA2560 x 1440(W)QHD2048 x 1536QXGA1920 x 12801920 x 1200WUXGA1920 x 1080FHD1680 x 1050WSXGA 1600 x 1200UXGA1440 x 900WXGA 1366 x 768WXGA1280 x 1024SXGA1280 x 800WXGA1280 x 768WXGA1280 x 720HD / WXGA1024 x 768XGA1024 x 600WSVGA960 x 640DVGA960 x 540qHD320 x 240QVGA854 x 480FWVGA800 x 480WVGA720 x 720640 x 480VGA640 x 360nHD480 x 360Over 31differentdeviceresolutionsin use480 x 320HVGADEMO
STRATEGIESAn easier break-point strategy:»Determine the min/max widthvalues you must support»Resize your browser and watch forwhere your content breaksDEMO
STRATEGIES Break the large image into smallerimages Add CSS class data as necessary p class "venus" img src "./Resources/Images/venus.png“class "venus" / /p DEMO
STRATEGIES Now create the Media Queries@media screen and (max-width: 450px){body { background-color: yellow; }p.mercury { text-align: center;}p.venus { text-align: center;}p.earth{ text-align: center;}p.mars { text-align: center;}p.jupiter { text-align: center;}}DEMO
STRATEGIES Now create the Media Queries@media screen and (min-width: 451px) and(max-width: 910px){body { background-color: red; }p.mercury{ text-align: center; }img.mercury {}img.venus{ float: left; }img.earth{ float: right; }img.mars{ float: left; clear: both;}img.jupiter { float: right; }}DEMO
STRATEGIES Now create the Media Queries@media screen and (min-width: 911px){body { background-color: green; }img.mercury { float: left; }img.venus { float: left; }img.earth { float: left; }img.mars{ float: left; }img.jupiter { float: left; }}DEMO
SHORT TERM TECHNIQUEWHILE STRIVING FOR RD
SHORT TERM TECHNIQUES Brush up on CSS skills The DIV element is your friend The quickest / dirtiest short termworkarounddiv.rdoverflow
SHORT TERM TECHNIQUESAdd to your style sheet:div.rdoverflow{overflow: auto;}
SHORT TERM TECHNIQUES Wrap any content that doesn’t fiton a target screen (such as alarge table) with:div.rdoverflow Scroll bars will be addedautomatically when neededDEMO
LONG TERM RESPONSIVEDESIGNRECOMMENDATIONS
LONG TERM RECOMMENDATIONS Study Practice
SUGGESTED READING LISTCascading Style Sheets: Designing for the Web (3rd Edition) (Paperback)by Hakon Wium Lie and Bert BosISBN-13: 978-0321193124CSS: The Definitive Guide, Third Editionby Eric MeyerISBN-13: 978-0596527334Responsive Web Design with HTML5 and CSS3by Ben FrainISBN-13: 978-9350237885
SUMMARY Responsive DesignCore Components of Responsive DesignThe Role of Content StructureThe Role of CSSThe Role of Media QueriesResponsive Design StrategiesShort Term RD TechniquesLong Term RD Plans
QUESTIONS?Mike HamiltonV.P. Product Evangelism at MadCap Softwaremhamilton@madcapsoftware.com
THANK YOUMike HamiltonV.P. Product Evangelism at MadCap Softwaremhamilton@madcapsoftware.com
Responsive Design Core Components of Responsive Design The Role of Content Structure The Role of CSS The Role of Media Queries Responsive Design Strategies Short Term RD Techniques
