Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards...
Transcript of Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards...
![Page 1: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/1.jpg)
Crea%ng Perfect CSS LayoutsTips &Tricks for Design Challenges
1
![Page 2: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/2.jpg)
Stephanie Sullivan
‣ Founder/Principal - W3Conversions - Web Standards and Accessibility
‣ Customized Corporate Training
‣ Consultant & sub-contractor for XHTML/CSS development
‣ Co-lead Adobe Task Force for Web Standards Project (WaSP)
‣ Co-author - Mastering CSS with Dreamweaver CS4 with Greg Rewis
‣ Adobe Community Expert
‣ Partner - CommunityMX.com
‣ List Mom for WebWeavers & moderator for SEM 2.0
‣ @stefsull
![Page 3: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/3.jpg)
Original Vision for the Web
‣ Web globally accessible (any platform, any user agent, anyone)
‣ Web is international (sites are global, local, in many and even multiple languages)
‣ Web is meaningful, searchable and useful
![Page 4: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/4.jpg)
Where Does a Website Come From?
4
![Page 5: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/5.jpg)
Content is the Core
‣ Your web site is content‣ information‣ sales‣ marketing
‣ How do you best present this content?‣ How do you want your user to interact with this
content?‣ Be logical and create a flow through the site
![Page 6: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/6.jpg)
![Page 7: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/7.jpg)
![Page 8: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/8.jpg)
Analyze the designer’s comp
8
![Page 9: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/9.jpg)
Decisions
‣ What parts of your page should be “Plain Old Semantic HTML” [POSH]?
‣ What portions could be enhanced using Ajax techniques?‣ Should Flash or Flash video be utilized?‣ What about desktop apps like Adobe AIR?‣ Do you need any PDF delivery?‣ How should the document appear when printed?
![Page 10: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/10.jpg)
Design Challenge #1
10
![Page 11: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/11.jpg)
![Page 12: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/12.jpg)
![Page 13: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/13.jpg)
Design Challenge #1
‣ Challenge Large horizontal bands of color
‣ Solution ‣ if band contains text - must be flexible and grow vertically‣ if band contains only images - can have a height‣ don’t use a single background image on the body for the
entire area
‣ use multiple wrappers for each band that needs to expand• the outer wrapper contains the background image or color• the inner wrapper constrains the content area (and may contain a second
dividing image like a separating drop shadow or glow)
![Page 14: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/14.jpg)
Design Challenge #2
14
![Page 15: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/15.jpg)
![Page 16: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/16.jpg)
![Page 17: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/17.jpg)
![Page 18: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/18.jpg)
![Page 19: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/19.jpg)
![Page 20: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/20.jpg)
![Page 21: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/21.jpg)
![Page 22: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/22.jpg)
Design Challenge #2
‣ Challenge Large monitors and fluid pages
‣ Solution ‣ create graphics that can be repeated‣ create graphics where more of the image is revealed‣ create non-boxy look by including a portion in an adjacent
element‣ create a large graphic that blends with the background and
set it to be fixed so that the text scrolls over it
![Page 23: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/23.jpg)
Design Challenge #3
23
![Page 24: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/24.jpg)
![Page 25: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/25.jpg)
![Page 26: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/26.jpg)
![Page 27: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/27.jpg)
![Page 28: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/28.jpg)
![Page 29: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/29.jpg)
![Page 30: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/30.jpg)
Design Challenge #3
‣ Challenge Designing in a defined box - Postcard style
‣ Solution ‣ backgrounds must have at least a small piece that repeats
vertically so pages can grow with content or text resizing‣ don’t use heights on divs containing text (page should not
have inner scroll bars or text that disappears)‣ for “paper” look, let only the top and bottom be crumpled‣ add tiny differences to the repeat occasionally by placing a
small random graphic on top
![Page 31: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/31.jpg)
Design Challenge #4
31
![Page 32: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/32.jpg)
![Page 33: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/33.jpg)
![Page 34: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/34.jpg)
![Page 35: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/35.jpg)
![Page 36: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/36.jpg)
Design Challenge #4
‣ Challenge boxes (especially equal-height)
‣ Solution ‣ boxes must expand vertically‣ faux columns technique can be used‣ combination of a background image with background color
for the portion that grows‣ deconstruct www.belvedereinc.net for boxes with two
images (one color when placed right, another when placed left)
‣ deconstruct my example for three fluid boxes
![Page 37: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/37.jpg)
Thank you!Ques%ons?
37
![Page 38: Creang Perfect CSS LayoutsStephanie Sullivan ‣ Founder/Principal - W3Conversions - Web Standards and Accessibility ‣ Customized Corporate Training ‣ Consultant & sub-contractor](https://reader033.fdocuments.in/reader033/viewer/2022050101/5f406c304b2f8f1c9f53e91d/html5/thumbnails/38.jpg)
Resources‣ W3Conversions
http://www.w3conversions.com/resources.html
‣ Mastering CSS with Dreamweaver CS3Mastering CSS with Dreamweaver CS4 [New Riders Voices that Matter]Stephanie Sullivan & Greg Rewis
‣ Video: Mastering Web Content: Structure and Presentation with XHTML and CSS [New Riders]
‣ twitter: @stefsull
‣ Community MX [free & subscription content]http://www.communitymx.com