Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi

Responsive Design vs Mobile Design Responsive Design is all about changing on the fly. If you view a website on a tablet and on a phone, you are seeing the same website presented differently. If you flip the phone to landscape, the website may change in appearance but it is still the same website. Mobile websites are made specifically for smaller screens. They are separate websites that you are redirected to based on your device's size or your user agent.

Side Note: User Agents A browser will send a user agent header when it requests a web page. This string will contain information about the browser (name, is it a mobile version, etc). Please be aware that since software and devices are constantly changing, it's not that reliable. Examples: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/ (KHTML, like Geck) Chrome/ Safari/ Mozilla/5.0 (Windows NT 6.3; WOW64; rv:35.0) Gecko/ Firefox/35.0 Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0;.NET4.0E;.NET4.0C;.NET CLR ;.NET CLR ;.NET CLR ; LCJB; rv:11.0) like Gecko Mozilla/5.0 (Linux; Android 4.4.2; en-us; SAMSUNG GT-I9500 Build/KOT49H) AppleWebKit/ (KHTML, like Gecko) Version/1.5 Chrome/ Mobile Safari/537.36

Responsive: Graceful Degradation Design for the best possible experience (big desktop) and gracefully degrade the experience for devices that cannot handle it. Pros Your initial design is unrestricted. Lots of opportunities to get creative. Cons The desktop version will be full of great features and content, and the mobile version will appear watered down.

Responsive: Progressive Enhancement (Mobile First) Design for the smallest possible device (phone) and progressively enhance it for larger devices Pros The mobile version will be designed with creativity and excitement, but be kept simple and to the point (efficient, fast, most important content front and center). The desktop will be enhanced but not cluttered. Cons Your initial design is restricted by the size and technology Popular Choice While merits can be seen for both methods, mobile first is commonly used and supported by some of the big players in web development.

Simulating Devices Simulators You can find many browser plugins to simulate different device sizes. Recommended: Ripple for Chrome beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en F12 Tools The built in development tools in most browsers provide some device simulation as well.

Flexible Layout When a website is displayed on a smaller device, move the content so that the user does not have to zoom in or out.

Flexible Layout: Grid System A common solution is a grid system where columns are displayed side by side on wide devices and are stacked on narrow devices. Use percentages to tell each column how much space to take up.

Flexible Layout: Grid System Cont'd How many columns? 12 is a nice number because it can be divided by 1, 2, 3, 4, 6, and 12 Bootstrap uses a 12 column grid system. This diagram from Bootstrap shows how flexible that system is for layout:

Media Queries Details here: Use different stylesheets for different device widths using media (max-width: 1024px) { (min-width: 481px) { }

Media Queries Logical Operators - Conditions in a media query can be screen and (max-width: all and (max-width: 1024px) and (min-width: 480px) Not – Negates not screen and (max-width: 1024px)

Media Queries Media Types – all, print, screen, tv, screen and (max-width: all and (max-width: 1024px) and (min-width: 480px) Only – Not supported by older browsers so they will ignore the CSS in a media only screen and (max-width: 320px) Orientation – portrait (taller) and landscape only screen and (orientation: portrait)

Device Size vs Viewport Size Viewport – The size of the screen available to the browser to render a web page Device - The entire display area, which may be larger than the viewport These two media queries can behave differently depending on the screen and (max-width: screen and (max-device-width: 1024px)

Media Queries You can put your media queries all in the same CSS file, or you can separate them in a way that keeps your CSS organized. One Method - Organize by Device Size phone.css – Mobile First; Create a stylesheet without any media queries that makes your web page look great on a phone tablet.css – Add a stylesheet with media queries for the average tablet size and append styles that will let the web page adapt to a larger screen. desktop.css – Add a stylesheet with media queries for the smallest desktop size you want to support and append styles that will let the web page adapt to an even larger screen. Another Method – Add media queries as needed. Size your web page down until it breaks – that's where you need to set the height/width of your next media query.

Internet Explorer & Media Queries Older versions of IE do not support media queries. Include this script to add the feature to IE. <script src=" js.googlecode.com/svn/trunk/css3-mediaqueries.js">

Viewport Meta Tag Use the following meta tag to make your website appear zoomed in and to have the device report it's size when zoomed in to 100% width=device-width tells the device to report its actual width initial-scale=1 tells the device to zoom in to 100% when the webpage is first loaded user_scalable=yes allows the user to zoom in

Mobile vs. Desktop Considerations Why should a mobile website be kept simpler than a desktop website? Loading Time – download speeds on mobile data may be slower than high speed internet Data Usage – someone using mobile data doesn't want it to get eaten up by large photos Processing Power – fancy CSS may be too much for a mobile device. Avoid shadows, gradients, transforms, and animations. Use media queries to change which images are used, when to load animations, etc

Flexible Media Scale Images You can force images to scale down based on the size of the screen. Simply put the image inside of a scalable container and set the image to 100% width of that container. Separate Images Better yet, you can use media queries to load different images based on the size of the screen.