Module 1.pdf

Module 1 What Is Responsive Design? Topics 1.1 Just the Basics 1.2 A Short History 1.3 Why Responsive Design 1.4 Summary 1.1 Just the Basics Responsive design Responsive design, overall, is a way to make websites that can be easily viewed and used on any type of device and size of screen,...

Module 1 What Is Responsive Design? Topics 1.1 Just the Basics 1.2 A Short History 1.3 Why Responsive Design 1.4 Summary 1.1 Just the Basics Responsive design Responsive design, overall, is a way to make websites that can be easily viewed and used on any type of device and size of screen, all the way from the smallest mobile phones up to the widest desktop monitors. Responsive vs Non-responsive responsive websites Non-responsive websites Non-responsive Design Non-responsive Design The three screenshots are to scale, so you can compare the sizes of everything you see on the screen. Viewing the mobile site on the iPhone, you only have a few navigation links, but they’re a similar size to the links on the desktop site. But on the iPad you don’t get the mobile site, you get the desktop site, and everything is really tiny to fit on that small screen. You’ll have to do a lot of zooming to use the site. Non-responsive Design Ikea put a lot of work into creating a good mobile site, but if your device is a tablet, you don’t get to use it, and you get a suboptimal experience. If Ikea had a responsive site, it could make sure that people using any size device would get an appropriate interface. Responsive Design With responsive design, there is only one version of the website, so you get all the content, but the design rearranges itself so that it fits perfectly on any size screen, with full-size text so you don’t have to zoom in and out, as you can see in next Figure. Responsive Design 1.2 A Short History FIXED-WIDTH DESIGN Web designers wanted their designs to look exactly the same no matter what monitor was being used, so they would usually create designs of a fixed width to fit on the most common monitor size, such as 960-pixel-wide sites to fit easily on 1,024-pixel-wide screens. Wider screens would simply display the sites with empty space (called whitespace in design terms) filling the extra space on either side of the design, as you see in the next Figure FIXED-WIDTH DESIGN MOBILE WEB BROWSING It wasn’t until the mid-2000s that mobile browsers were able to display “real” web pages using technologies like CSS2 and JavaScript, on more advanced devices referred to as smartphones, such as the iPhone. Web pages were designed to be viewed on full-size monitors, not on tiny phones, so pretty much every web page was 960 pixels or wider. The iPhone’s screen, on the other hand, was only 320 pixels wide. Apple’s solution was to automatically shrink web pages to fit inside the viewing area of the screen (the viewport), and then allow the user to tap or pinch to zoom in on any area of the page. MOBILE WEBSITES Because designers were accustomed to making web pages with fixed widths, the easiest and most obvious solution was to simply make separate mobile websites with a fixed page width that would fit on a 320-pixel-wide screen, instead of the common 1,024-pixel-wide monitor, as in Figure 1-6. MORE DEVICES Compared to the iPhone’s 320-pixel width, many had screens that were narrower (240 pixels or less), and others had screens wider than the iPhone’s—especially those designed to be used with the screen held horizontally instead of vertically. A 320-pixel-wide iPhone website didn’t fit perfectly on all those screens. MORE DEVICES Then, in 2010, Apple released the iPad. Although some designers reacted by creating separate iPad websites (so now they had three separate websites), most realized that as more and more device sizes arrived on the market, it was no longer sustainable to create separate websites for every possible screen size. MEDIA QUERIES The CSS @media rule, which allows you to display different CSS styles based on device qualities, was actually part of CSS2 more than a decade ago, but back then it only supported queries of media types, such as screen or print. what do these media queries do? As a basic example, let’s say we have a website with two separate sections of content. We might create a single-column design that fits well on smartphones, displaying the two sections stacked vertically. On wider screens, we may want to display the two sections of content as two separate columns, next to each other. Using a media query, we can ask the device how wide its screen is. Then we can tell it to display the content in two columns only if its screen is wide enough for the columns to fit nicely. what do these media queries do? By using media queries, we can change any aspect of the website’s style, not just the number of columns. Media queries can be used to move things around, change the text size, hide or display pieces of content, adjust margins and spacing, and adjust any other style that can be applied with CSS. FLEXIBILITY Media queries can rearrange your layout, but responsive design wouldn’t work without a foundation of flexibility. For starters, pretty much every horizontal measurement on your site needs to be in flexible units rather than inflexible pixels. This means the width of columns and other layout elements will be in percentages, and the text will be measured in a relative unit called an em. RESPONSIVE WEB DESIGN Neither of these ideas—media queries or flexibility—was new or groundbreaking by itself. But in 2010, web designer Ethan Marcotte figured out a way to use these concepts together to make websites that would respond to different screen sizes 1.3 Why Responsive Design GETT ING THE RIGHT DESIGN ON EVERY DEVICE The most compelling reason for using responsive design is that you will be creating a website that not only will look good and work correctly on the devices that are on the market now, but is likely to look good and work correctly on any new devices that will be available in the future. With responsive design, you only have one web page, so you’ll never get the “wrong version.” The site will be displayed correctly no matter what device it’s being viewed on. LESS WORK The most obvious advantage to using responsive design is that you only have to create one website, one design, one set of code, and one set of content. OPTIMIZED FOR SEARCH A separate mobile site, with a separate set of URLs, can create issues with your site’s placement in search results. If you have two separate versions of a page with the same or similar content but different URLs (i.e., http://www.example.com and http://m.example.com), search engines need to know that they are considered to be the same page so that the page can be indexed correctly and displayed as one entry in the search results listing. 1.4 Summary Summary Until responsive design was introduced, websites were generally fixedwidth, which meant the website’s design was the same width no matter what size screen it was displayed on. When smartphones came along, that really didn’t work, because websites appeared tiny on the small screens and users had to continually zoom in and out to read anything. Summary Mobile websites followed soon after, and many companies built these second websites separately from their main, or desktop, websites. Mobile websites often contained only a fraction of the content and functionality available on regular websites, so mobile users missed out. Summary As more devices came along, designers soon realized that it was impractical, if not impossible, to create multiple websites to fit each of the different screen sizes. The concept of responsive design was introduced as a way to make websites that could respond to the width of a device’s screen and display the site’s content in a way that was appropriate for that screen size. Summary Responsive web design consists of two main components: flexibility, which means that horizontal measurements need to use relative units like percentages so they can respond to the size of the screen, and media queries, which allow you to use CSS to change the design of the website depending on the width of the device’s screen Summary Responsive design allows you to provide an appropriate design for any screen size using only one set of code. Not having to maintain separate sets of code means less work. And implementing a responsive design means that your site will be optimized for search. End