• Like
  • Save
Responsive web design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Responsive web design

  • 300 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
300
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
1
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Most of us should be familiar with Flexible our Fluid layouts. This is the practice of using percents and “ems” as your unit of measurement rather than using finite values like pixels.While this does allow the layout to resize based on screen size, it doesn’t necessary optimize the experience.An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”.
  • A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.
  • YOU’RE STARTING FROM SCRATCHDeveloping a whole new website or web application is a challenging process. You won’t know if the site will be successful until it’s live and in the world, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste time and money. It’s more efficient to get your new site performing well before you create an additional mobile site or application.YOU WANT TO KEEP COSTS LOWSolid responsive solutions require additional design and front-end development time, but doesn’t too heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but it’s still faster than creating an additional mobile site or app. Developing a site this way also means that you only need to develop, manage, and maintain the one site, so it can reduce these costs too.YOU WANT IT TO WORK EVEN WHEN NEW DEVICES ARE RELEASEDA mobile site needs to be able to recognize the user’s device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable.
  • Source: http://designmodo.com/responsive-design-examples/#ixzz1dqSBtv2u
  • Responsive web design is the concept of developing a website in a way that helps the layout adjust according to the user’s computer screen resolution.

Transcript

  • 1. Richa Goel
  • 2. Contents• Fluid layouts• Difference between fixed and fluid layouts• Designing fluid layouts for different screen resolutions• What is responsive web design• Principles of responsive web design• Web page coding best practices
  • 3. Fixed and Fluid Layouts 4
  • 4. Fixed-width and Fluid Layouts • Fixed-width layout: Web designer defines exact size of every table element in absolute units such as pixels. – Gives designer precise control over appearance, but does not take into account the size of the browser window • Fluid layout: one or more table elements are sized as a percentage of the page width – Page content flows into blank areas as the size of the browser window increases, but sometimes results in long lines of text5
  • 5. Elastic Layouts• Some designers propose the use of elastic layouts, in which all measurements are expressed relative to the default font size using the em unit• If a user or the designer increases the font size, the width, height, and location of all of the other page elements, including images, change to match New Perspectives on HTML and CSS, 6th 6 Edition
  • 6. Floating Elements• Floating an element takes that element out of the normal flow of the document and positions it along the left or right edge of its containing element float: position; 7
  • 7. Floating Elements• Clearing a float clear: position; 8
  • 8. Flexible Layout: Example 1 <h1>Digital Media Showcase <a href="https://showc.org"> Read more &raquo;</a></h1> -9 -
  • 9. Flexible Layout: Example 1start styling it<style>body { background-color: #DCDBD9; color: #2C2C2C; font: normal 100% Cambria, Georgia, serif;}slight changes:heavy serifs; grey background -10 -
  • 10. Flexible Layout: Example 1traditional styling in px:h1 { font-size: 24px; font-style: italic; font-weight: normal;}h1 a { color: #747474; font: bold 11px Calibri, Optima, Arial, sans-serif; letter-spacing: 3.6px; text-transform: uppercase; text-decoration: none;} -11 -
  • 11. Flexible Layout: Step 1To create a flexible version, wemove to ems. (Whats an em?)The average width of a character, in current default font.originally: the width of the m character"Contextual healing": Our target font size is 24px. Our context font size is 16 px – the containing elements default size for h1. so lets scale h1 to result = target/context = 24/16 = 1.5em and likewise, h1 a to 11/24 = 0.4583333333333 em -12 -
  • 12. Flexible Layout: Step 1styled in ems:h1 { font-size: 1.5em; /* 24 px/36 px */ font-style: italic; font-weight: normal;}h1 a { color: #747474; font: bold 0.458333333333em Calibri, Optima, Arial, sans-serif; /* 11px/24px */letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;} -13 -
  • 13. Why 11/24 not 11/16?The <a> is INSIDE the <h1> (see?)<h1>Digital Media Showcase <a href="https://showc.org"> Read more &raquo;</a></h1>and so the CONTEXT of the <a> has its default set to 24px in the original example, or (1.5em in the relative version)So the desired RELATIVE SIZE of the <a> is 11/24. -14 -
  • 14. Flexible Everything• Fluid or Liquid Layouts• Proportionally Scaled Images• Media Queries
  • 15. Flexible Everything – Flexible Layout• Use percents and ems• Don’t use finite values like pixels• How do you convert? It’s easy: .figure {width: 20.833%; /* 200px / 960px */ } .headerText {font-size: 0.75em; /* 12px / 16px */ }
  • 16. Flexible Everything -Proportionally ScaledImages• Hiding and Revealing Portions of Images• Deliver different images depending ondevice• Foreground Images That Scale With theLayout
  • 17. Flexible Everything – Media Queries• They’ve been around since CSS 2.1• You’ve already used them <link rel="stylesheet" type="text/css" href=“screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />• When CSS3 came out the W3C extended mediaqueries
  • 18. Who needs RWD?You need RWD if:• You’re starting from scratch.• You want to keep costs low• You want it to work even when new devices are released
  • 19. Responsive web design is the concept ofdeveloping a website in a way that helps the layout adjust according to the user’s computer screen resolution.
  • 20. Why is it relevant?RWD allows us to tweak the layout andpresent the relevant information first:hours, phone number, directions and perhapsa link to the menu.Meanwhile back at your desk, the restaurant’spage has all the bells and whistles you didn’tcare for while browsing on your phone.
  • 21. Food Sense
  • 22. Clean Air Commute Chall
  • 23. FlexSlider
  • 24. You get the point!
  • 25. Responsive Web DesignRWD is the concept ofdeveloping a website in away that allows thelayout to adjustaccording to theuser’s screen resolution(view port) using mediaqueries
  • 26. Responsive WebDesignWhy?• Regular websites are almost useless on mobile devices• Creating mobile versions of websites is impractical• New devices constantly appear• Life is all about change; get with it! -28 -
  • 27. CSS3 & Media QueriesIn your CSS:@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on...}
  • 28. CSS3 & Media QueriesOn the header of your website:<link rel="stylesheet" href="this.css"media="(min-width: 960px)">
  • 29. CSS3 & Media QueriesBy restricting CSS rules to a certainwidth of the device displaying a webpage, one can tailor the pagesrepresentation to devices with varyingscreen resolution (view port).
  • 30. Popular Viewport Sizes
  • 31. How do wedesign for RWDSimple:Use the Mobile First Approachand favor ProgressiveEnhancement instead of thetraditional GracefulDegradation
  • 32. Graceful Degradation• Focuses on building the website for the most advanced/capable browsers.• Older browsers are expected to have a poor, but passable experience.• Small fixes may be made to accommodate a particular browser ( they are not the focus )
  • 33. Progressive Enhancement• Focuses on the content. ( not browsers )• Think from the content out. ( Peanut M&M ) – Peanut: Content marked up in rich semantic (x)html – Coated with rich creamy CSS – Added JS as the hard candy shell
  • 34. Progressive EnhancementProgressive Enhancement consists of thefollowing core principles:•basic content and functionality should be accessible to allweb browsers•semantic markup contains all content•enhanced layout  external CSS•enhanced behavior  external JavaScript•end-user web browser preferences are respected
  • 35. Progressive EnhancementBenefits:•Accessibility: PE pages are bynature more accessible.•SEO: Since basic content is alwaysaccessible
  • 36. Best Coding Practices• Always close your tags• Declare the Correct DocType• Never Use Inline Styles• Place all External CSS Files Within the Head Tag• Consider Placing Javascript Files at the Bottom• Keep Your Tag Names Lowercase
  • 37. Best Coding Practices• Wrap Navigation with an Unordered List• All Images Require “Alt” Attributes• Use a CSS Reset• If Building a Blog, Save the H1 for the Article Title• Work with tables intelligently