Responsive Web Design PDF

Responsive Web Design Outline Introduction What? How? ○ Meta Tags ○ Media Queries ○ Breakpoints Why? ○ Advantage ○ Disadvantage Meaning of Responsive The term Responsive means , To provide “Responses or Adaptiveness Quickly and Positively” to the users....

Responsive Web Design Outline Introduction What? How? ○ Meta Tags ○ Media Queries ○ Breakpoints Why? ○ Advantage ○ Disadvantage Meaning of Responsive The term Responsive means , To provide “Responses or Adaptiveness Quickly and Positively” to the users. What is Responsive Web Design? ○ A website that renders the content respond to the device that accesses it.  Responsive Web Design or RWD ❑ Responsive Web Designing (RWD) is a Responsive Websites process of designing a single website to be used and compatible on different portable or Offers handy electronic devices. ✓ Smooth navigation ❑ Also known as Adaptive Web Designing ✓ Easy reading (AWD). ✓ Minimum pinching ✓ Reduces scrolling ❑ It regarded as an integrated approach of web and zooming. designing to give an optimal viewing user experience across a wide variety of devices ✓ Excellent user starting from desktop computers to mobile experience. phones. Why You Need A Responsive Website? ❖ Growing Demand for Smartphones ❖ Multiple Screen Sizes and Mobile Browsers ❖ Wide Usage of Internet ❖ Permits wider browser support ❖ Compulsory for Getting Good Business  Adapting the Appropriate Layout ❑ Designers should use appropriate layout to suit completely to different screen sizes. Devices Size Phones 480px and below Phones to Tablets 767px and below Portrait Tablets 768px and above Net Book 990px to 1024px Monitor 1024px and above  Major Components of A Responsive Website Responsive website designing is a modern approach of website designing. It comprises of four core elements. 1.Meta Tags 2.CSS3 Media Queries 3.Grid Systems 4.Frameworks Meta Tags ◾ Meta tag is a coding statement in HTML. ◾ It describes few aspects of the contents of a web page. ◾ Information provided in the meta tags is used by the search engines for page indexation. ◾ Placed at the top of a web page as a part of heading. ◾ We use viewport meta tag for making a web page Mobile Optimized.  Types of Meta Tag 1. Core Meta Tags Specifies the character encoding for the HTML document. UTF-8 is the most common and supports a wide range of characters. Crucial for responsiveness: width=device-width: Sets the viewport width to the width of the device's screen. initial-scale=1.0: Sets the initial zoom level to 100%. Types of Meta Tag 2. Search Engine Optimization (SEO) Meta Tags Provides a summary of your page's content to search engines. This description may be displayed in search results. (Use with caution) Lists relevant keywords related to your page's content. Search engines may or may not use this tag anymore. Types of Meta Tag Social Media Meta Tags (Optional) Sets the title that will be displayed when your page is shared on Facebook and other social media platforms. Sets the description that will be displayed when your page is shared on social media. Specifies the image that will be used as a thumbnail when your page is shared on social media. (For Twitter) Controls the layout of the card that appears when your page is shared on Twitter. Example  The viewport meta tag width can be specified in pixels; the value device-width detects the width of whatever device the user is using initial-scale=1 means no zooming will be applied maximum-scale=1 means the users cannot zoom (this may be bad for some content) http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport- meta-tag/ REMEMBER Use a meta viewport tag to control the width and scaling of the browsers viewport. Include width=device-width to match the screen's width in device independent pixels. Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device independent pixels. Ensure your page is accessible by not disabling user scaling. thelensnola.org thelensnola.org Boston Globe Boston Globe Boston Globe The design is a little less successful when we turn the iPhone sideways (landscape mode). Boston Globe This information graphic (about hockey brain injuries) is much more successful on the iPhone. Boston Globe You can even zoom in on individual items in the graphic. Boston Globe  Media Queries Media queries are like special instructions that tell the website how to change its appearance based on the device it's being viewed on. For example: "If the screen is smaller than 600px (like a phone), make the text bigger and show only one column of content." "If the screen is wider than 992px (like a desktop), display the navigation bar horizontally and show a larger image." Media queries help websites adapt to different screen sizes, ensuring they look good and are easy to use on everything from tiny phones to large desktops.  Examples of Media Queries ❑ Use following CSS media query syntax for calling an external stylesheet: ❑ And you can control css presentation in css file too: @media screen { body { width: 75%; } } @media print { body { width: 100%; } } Examples of Media Queries ❑ Likewise, you can use more advanced CSS media queries like: @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { body { background: #ccc; } }  Media Queries Example @media screen and (min-width:1001px) and (max-width:1400px){ body { background-color: red; } } @media screen and (min-width:501px) and (max-width:1000px){ body { background-color: blue; } } @media screen and (min-width:240px) and (max-width:500px){ body { background-color: white; } } Media Queries BREAKPOINTS are special rules for your website that change how it looks depending on the screen size. Breakpoint Breakpoint Design How to design responsive website? ○ Design from smallest to larger viewports/screen sizes. ○ "Stop thinking in pages, start thinking in systems." - Jeremy Keith  Advantages Using Smartphone, Tablets, and Notebooks for accessing internet has become a common fashion or trend. ❖ A Responsive website is flexible to use. ❖ It automatically shuffles content, resizes images, and adjusts font size. ❖ Users will be able to read information as per their needs and preferences. ❖ Saves user’s time while browsing the site. ❖ Helps increasing the user experience. ❖ Simplifies the designing process ❖ Eliminates the need to maintain multiple websites Disadvantages ○ Complexity ○ Speed ○ Mobile needs and desktop needs may be different ○ Viewport Limitations