1 / 52

Responsive Design

Responsive Design. In Class Today. Review Course Project Review Homework Assignment Responsive Design Presentation In Class Assignment. Overview. What is Responsive Design? Media Queries Variable Width design Trending Development Frameworks In class assignment.

jewel
Download Presentation

Responsive Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Responsive Design

  2. In Class Today • Review Course Project • Review Homework Assignment • Responsive Design Presentation • In Class Assignment

  3. Overview • What is Responsive Design? • Media Queries • Variable Width design • Trending Development Frameworks • In class assignment

  4. Responsive Design 101 • Pretty basic • Write CSS for different browser sizes, device capabilities and aspect ratios using ‘Media Queries’ • Media Queries will query the media you are using and use the appropriate CSS (respond) in real-time (without reloading the page)

  5. Viewport • Meta tag • Used to control the viewport's size and scale • Accepts either a positive integer or keyword

  6. Viewport • Chapter 2 – Examining the mobile viewport & Controlling viewports

  7. Media Queries = Expression • A media query is a logical expression that is either true or false • The CSS associated with the media query expression is only applied to the device if the expression is true.

  8. Media Queries • Allow web developers to change our layouts to suit the exact need of different devices - without changing the content. • a CSS3 extension to media types that gives us more control over rendering across different devices

  9. Initializing Media Queries • @media rule • @import rule • Separate style sheet

  10. Media Types

  11. Logical Operators • Help build powerful expressions • Three different logical operators: • And • Not • Only • Syntax link rel=“stylesheet” href=“style.css” media=“[AND| NOT] screen[ONLY] (expression)”

  12. AND Operator • Allows an extra condition to be added • Comma separated, acting as an unspoken or operator • Example:

  13. NOT Operator • Negates the query, specifying any query but the one identified. • Example:

  14. ONLY Operator • Hides style sheets from older or non-conforming user agents • Ignored by conforming user agents

  15. Browser Support • Internet Explorer: 9.0+ • Firefox: 3.5+ • Chrome: 4.0+ • Safari: 3.1+ (a bit buggy until 4.0, however) • Opera: 9.5+ • iOS: 3.2+ • Android: 2.1+ • Windows Phone: 7.5+ (Mango) • Blackberry: 4.7.1+

  16. Height & Width Media Features • One of the most common media features • Used with: height, width, device-height, and device-width • Height and width media features base off the height and width of the viewport rendering area

  17. Media Query Breakpoints • 320px - Mobile portrait • 480px - Mobile landscape • 600px - Small tablet • 768px - Tablet portrait • 1024px - Tablet landscape/Netbook • 1280px & greater - Desktop

  18. Media Queries • Chapter 2 – Understanding Media Queries and Creating breakpoints with media queries

  19. 10 Minute Break

  20. @Media Example

  21. @Media Example

  22. @Media Example

  23. @Media Example

  24. @Media Example

  25. @Import Example

  26. @Import Example

  27. Mobile First • Popular technique with using media queries • Saves user from having to load styles for desktop version

  28. Fluid/Flexible Layout • A layout based on proportions rather than absolute • Built using relative length units, most commonly percentages or emunits • Relative lengths are used to declare common grid property values such as width, margin, or padding

  29. Flexible Layout Formula

  30. Fixed vsFluid/Flexible Fixed Fluid/Flexible

  31. Using Fluid Grids • Chapter 2 - Using Fluid Grids

  32. Advantages of using Grids • Great for content-rich sites • Device-friendly • Enhanced stability • Better engagement • Unmatched flexibility

  33. Disadvantages of Using Grids • Restricted creativity • Lack of dynamic appeal • Steep learning curve • Not fit for all sites

  34. What is a Responsive Framework? • A standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature. • Package of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites

  35. Trending Grid Frameworks • 960 Grid System (960.gs) • Unsemantic– (unsemantic.com) • Skeleton (www.getskeleton.com) • Skeleton for Wordpress(themes.simplethemes.com/skeleton) • Bootstrap (getbootstrap.com) • Compare (responsive.vermilion.com/compare.php)

  36. Choosing the Right Framework • Speed of installation • Ease of understanding • Options • Integration with other systems • Best long-term support

  37. Advantages of Frameworks • Speeds up the mock-up process • Clean and tidy code • Solutions to common CSS problems • Browser compatibility • Learn good practices • Having a single procedure to resolve common problems makes maintaining various projects more straightforward. • Helpful in collaborative work

  38. Disadvantages of Frameworks • Mixes content and presentation • Unused code leftover • Slower learning curve • You don’t learn to do it yourself

  39. Flexible Images and Media

  40. Flexible Images and Media

  41. Flexible Images • Chapter 2 – Making Images Responsive & Examining the future of responsive images

  42. RWD vsOther Options • Native Apps • A native application (native app) is an application program that has been developed for use on a particular platform or device. • Mobile-Specific Website • A scaled down version of your site with any unnecessary content removed to improve its functionality and load speed on mobile devices.

  43. Native Apps Pros Cons • Can provide a slick user experience • Can more easily access device features (camera, GPS, etc.) • Available for offline use • Very expensive • Hard to do well • Which platforms do you support? • Your users (probably) don't want a native app • You still need a website

  44. Mobile-Specific Websites Pros Cons • Easier to optimize for speed • More freedom to create a unique mobile experience • Can more easily target less advanced devices, like feature phones • Have to deal intelligently with redirects • Ignores tablets for the most part • Tends to offer an incomplete experience

  45. Responsive Design Pros Cons • Only have to maintain a single website • Don't need to deal with mobile-specific URLs • Addresses a wide multitude of devices: phones, tablets, desktops, etc. • More difficult to optimize properly for specific devices (for example, phones might get desktop-sized images) • Testing, testing, and more testing

  46. Advantages of Responsive Design • Save Money • Save Time • Improved SEO • Better Performance • Wide Browser Support

More Related