• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing a Visually Appealing Website Using CSS3
 

Designing a Visually Appealing Website Using CSS3

on

  • 1,088 views

Design principles and progressive enhancements

Design principles and progressive enhancements

Statistics

Views

Total Views
1,088
Views on SlideShare
1,088
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing a Visually Appealing Website Using CSS3 Designing a Visually Appealing Website Using CSS3 Presentation Transcript

    • Designing a Visually Appealing Website Using CSS3MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • Mario Hernandez Front-end Developer and Web Designer Web: http://designsdrive.com Email: designsdrive@gmail.com Twitter: @designsdrive LinkedIn: http://linkedin.com/in/designsdriveMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • Great design • A well designed product gives the impression that it works wellSource: Apple.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
    • Great design• Better designed websites appear easier to use• Generally people associate great design with something that works wellSource: MailChimp.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA Source: MailChimp.com
    • Elements of great web designMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • COLORMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • COLOURLovers.comSource: ColourLovers.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
    • TextureMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • SubtlePatterns.comSource: SubtlePatterns.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
    • white spaceMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • TypographyMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • Using CSS3 to achieve beauty is it safe?MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • Progressive enhancementsUses web technologies in a layered fashion thatallows everyone to access the basic content andfunctionality of a web page, while also providing anenhanced version of the page to those with moreadvanced browser software or better bandwidth.MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • CSS3 • Use CSS3 to target the experience layer • Focus on the properties that are widely supported • Do not sacrifice functionality for looks Critical Non-critical Branding Interaction Usability Visual rewards Accessibility Feedback Layout Movement MARIO HERNANDEZ 2012 DrupalCampLASource: CSS3 D r i v e . c o m book by Ethan Marcotte D e s i g n s for web designers
    • Do websites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • Supported CSS3 Properties Property Supported In border-radius 5+ 10+ 3.6+ 11+ 9+ text-shadow 5+ 10+ 3.6+ 11+ box-shadow 5+ 10+ 3.6+ 11+ 9+ opacity 5+ 10+ 3.6+ 11+ 9+ RGBASource: CSS3Files.com 5+ 10+ 3.6+ 11+ 9+ MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
    • Let’s do this!MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
    • Additional Resources• CSS3 Files: http://www.CSS3files.com• CSS3 Please: http://CSS3please.com• CSS Tricks: http://CSS-tricks.comBy Dan Cederholm By Dan Cederholm By Ethan Marcotte
    • Contact me• Web: http://designsdrive.com• Email: designsdrive@gmail.com• Twitter: @designsdriveDownload slides at:http://www.slideshare.net/marequi