1 / 9

Mastering Responsive Web Design: Optimizing Your Site for All Devices

Learn how responsive web design uses media queries to ensure optimal functionality on any device. Discover the importance of viewports and how to adjust CSS for various screen sizes. Explore resources for testing and planning responsive designs.

ozuna
Download Presentation

Mastering Responsive Web Design: Optimizing Your Site for All Devices

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. WRA 210 – SS2014 RWD1 : CSS Media Queries

  2. Responsive Web Design… Means that a web site works optimally well for users regardless of the device they are using. The core of RWD is a media query, a request for the resolution of the users’viewport. In 2012, PC sales were lower than the previous year, something that hasn’t happened since 2001. Why? Tablets. Phones. http://mashable.com/2012/12/11/responsive-web-design/ Responsive?

  3. Think of a viewport as the virtual canvas on which your CSS will render. With different devices, screens can be as small as 2” or as large as 48”…and their resolution may vary too. But those are screens. A viewport is under your control. It lets you set pixel values in “CSS pixels” regardless of the device pixels. At 100% zoom, device pixels = CSS pixels. No big deal. As users zoom in with a gesture on a mobile device, less CSS pixels fit in the viewport, but the layout does not reflow. Viewport?

  4. <link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href="css/mobile.css" /> The standard: http://www.w3.org/TR/css3-mediaqueries/ Viewport! Viewport! External Media Query

  5. Where would a rule like this come in handy? @media screen{ Body {background: #ff0000;} } @media print { Body {background: #fff;} } More Than One Style Sheet?

  6. #logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; } @media only screen and (max-device-width: 480px) {#logo { background: url(images/logo_mobile.png); width: 440px; }} Resize the screen to see it working: http://www.htmlgoodies.com/imagesvr_ce/3028/mq_demo.html Adjust logo for small viewport Adjusting for a Mobile Device

  7. There are many sites for testing responsive designs. I like this one: http://www.responsinator.com/ Try out your favorite site

  8. Using the viewport options on Responsinator…make a list of what would need to change – and how – to make your portfolio site wireframes ideally responsive. Planning RWD :: Users?

  9. Why do I need to know about media calls if I can just use a responsive theme in a CMS? • Have a look: http://responsinator.com/?url=billhd.com • If I don’t know how to change them, I’m stuck with the “responses” I am given by the theme designer… Responsive Themes?

More Related