• Like
  • Save
Responsive Web Design On Student's day
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design On Student's day

on

  • 1,062 views

 

Statistics

Views

Total Views
1,062
Views on SlideShare
940
Embed Views
122

Actions

Likes
0
Downloads
8
Comments
1

2 Embeds 122

http://kooms.info 117
http://test.local 5

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

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design On Student's day Responsive Web Design On Student's day Presentation Transcript

    • Responsive Web Design by Sophy Prak
    • Sophy Prak Web Developer - Web Essentials Member of KTUG(typo3cambodia.org)Photo: http://goo.gl/Et5Py
    • Introduction● May 25th, 2010 Ethan Marcotte has wrote article “Responsive Web Design” (http://goo.gl/BLQMe)● Jun 18, 2010 SIMON COLLISON updated his blog with media queries(colly.com) 3
    • 4
    • Adaptive(Multiple Fixed Width Layouts) or Responsive(Multiple Fluid Grid Layouts) 5
    • Mixed ApproachFixed width for large and medium Fluid width for small 6
    • Why do we use Responsive Web Design? 7
    • Should we create sub-domain and design layout for each devices? 8
    • 9
    • 10
    • 11
    • 12
    • Answer NO! 13
    • “Day by day, the number of devices, platforms,and browsers that need to work with your sitegrows. Responsive web design represents afundamental shift in how we’ll build websitesfor the decade to come.” - Jeffrey Veen 14
    • “Responsive design will become even better aswe get tools, like Flexible Box and the GridLayout spec” - Eric Meyer 15
    • One site for every screen - John Polacek 16
    • Who is using it? 17
    • london.msn.co.ukhttp://www.barackobama.com/ 18
    • www.barackobama.comhttp://www.barackobama.com/ 19
    • www.smashingmagazine.comhttp://www.smashingmagazine.com/ 20
    • www.bostonglobe.comhttp://www.bostonglobe.com 21
    • Other sites● http://css-tricks.com/● http://webdesignerwall.com/● For more http://mediaqueri.es/ 22
    • Responsive Web Design● Key Elements of Responsive Web Design ● Flexible Layout ● Flexible Images and Media ● Media Queries 23
    • Flexible LayoutFirst step considered for responsive design is flexible layout. As the browserwidth changes, fluid grids will resize and reposition the content asnecessary. 24
    • Flexible Images and Media● Adjusting images according to the different screen widths or devices is another important aspect of responsive web design img, embed, video, object{ max-width: 100%; }● Tutorial fluid image1. http://unstoppablerobotninja.com/entry/fluid-images/2. http://www.alistapart.com/articles/fluid-images/ 25
    • Media Queries● In CSS2 you was able to apply specific stylesheet for specify media type like screen or print.● In CSS3, W3C made it more efficient by adding media queries made it as part of the CSS3 specification 26
    • How we use media queries? 27
    • Media Queries Conditions/* Landscape phones and down */@media (max-width: 480px) { ... }/* Landscape phone to portrait tablet */@media (max-width: 767px) { ... }/* Portrait tablet to landscape and desktop */@media (min-width: 768px) and (max-width: 979px) { ... }/* Large desktop */@media (min-width: 1200px) { ... } Source of Twitter Bootstrap 28
    • /* Landscape phones and down */@media (max-width: 480px) { ... } 29
    • /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } 30
    • /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } 31
    • /* Large desktop */ @media (min-width: 1200px) { ... } 32
    • Frameworks (save time) orRoll Your Own (more control) 33
    • Framework forResponsive Web Design 34
    • Bootstrap, from Twitter● Simple, fluid HTML/CSS/JS framework from Twitter● http://twitter.github.com/bootstrap/ 35
    • Foundation● The most advanced responsive front-end framework in the world.● http://foundation.zurb.com/ 36
    • 1140 CSS GRID● The 1140 grid fits perfectly into a 1280 monitor...● http://cssgrid.net/ 37
    • Other frameworks● http://stuffandnonsense.co.uk/projects/320andup/● http://framelessgrid.com/● http://lessframework.com/● http://www.amazium.co.uk/ 38
    • Tips● Meta viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />● Use css3-mediaqueries.js for IE8 or older <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3- mediaqueries.js"></script> <![endif]--> 39
    • References● Responsive Web Design (http://goo.gl/BLQMe)● Designing for a Responsive Web (http://goo.gl/iK6dO)● Fluid Image (http://goo.gl/RvQlO)● More responsive tutorials (http://goo.gl/G75ov)● What the hack is Responsive Web Design(http://goo.gl/kUod7) 40
    • Q&A Contact me:sophy@web-essentials.asia @sophy http://kooms.info 41