Provide Responsive Design October 2, 2017 admin Post in HTML What Is Responsive Web Design? Responsive Web design is that the approach that means that style and development should answer the user’s behavior and environment supported screen size, platform and orientation. Almost every new client lately wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and every one screen resolutions must be compatible, too. within the next five years, we’ll likely got to design for variety of additional inventions. When will the madness stop? It won’t, of course. In the field of Web design and development, we’re quickly going to the purpose of being unable to stay up with the endless new resolutions and devices. For several websites, creating an internet site version for every resolution and new device would be impossible, or a minimum of impractical. Should we just suffer the results of losing visitors from one device, for the advantage of gaining visitors from another? Or is there another option? What Is Responsive Web Design? Responsive Web design is that the approach that means that style and development should answer the user’s behavior and environment supported screen size, platform and orientation. The practice consists of a mixture of flexible grids and layouts, images and an intelligent use of CSS media queries. Because the user switches from their laptop to iPod, the web site should automatically switch to accommodate for resolution, image size and scripting abilities. One can also need to consider the settings on their devices; if they need a VPN for iOS on their iPod, for instance, the web site shouldn’t block the user’s access to the page. In other words, the web site should have the technology to automatically answer the user’s preferences. This is able to eliminate the necessity for a special design and development phase for every new gadget on the market. Adjusting Screen Resolution With more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed a day, and every of those devices could also be ready to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we all know from the rising popularity of the iphone, iPad and advanced smart phones, many new devices are ready to switch from portrait to landscape at the user’s whim. How is one to style for these situations? In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in a moment upon page load), we must consider the many different screen sizes. Yes, it’s possible to group them into major categories, design for every of them, and make each design as flexible as necessary. But which will be overwhelming, and who knows what the usage figures are going to be in five years? Besides, many users don’t maximize their browsers, which itself leaves far an excessive amount of room for variety among screen sizes. Mortem Hjerde and a couple of of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below is a number of the foremost common: Since then even more devices have begin. It’s obvious that we can’t keep creating custom solutions for everyone. So, how can we affect the situation? PART OF THE SOLUTION: FLEXIBLE EVERYTHING A few years ago, when flexible layouts were almost a “luxury” for websites, the sole things that were flexible during a design was the layout columns (structural elements) and therefore the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they might give or take a couple of hundred pixels, but they often couldn’t adjust from an outsized display screen to a net book. Now we will make things more flexible. Images are often automatically adjust and we have workarounds in order that layouts never break (although they’ll become squished and illegible within the process). While it’s not an entire fix, the answer gives us much more options. It’s perfect for devices that switch from portrait orientation to landscape in a moment or for when users switch from an outsized display screen to an iPad. In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout: The entire design may be a lovely mixture of fluid grids, fluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there is variety of techniques for creating fluid images: Hiding and Revealing Portions of Images Creating Sliding Composite Images Foreground Images That Scale With the Layout For more information on creating fluid websites, make certain to seem at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickey Gillenwater, and download the sample chapter “Creating Flexible Images.” additionally, Zoe provides the subsequent extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.” While from a technical perspective this is often all easily possible, it’s not almost plugging these features in and being done. Check out the brand during this design, for example: Header according images If resized too small, the image would seem to be of inferiority, but keeping the name of the web site visible and not cropping it off was important. So, the image is split into two, one (of the illustration) set as a background, to be cropped and to take care of its size, and therefore the other (of the name) resized proportionally. Above, the h1 element holds the illustration as a background, and therefore the image is align consistent with the container’s background (the heading). This is only one example of the type of thinking that creates responsive Web design truly effective. But even with smart fixes like this, a layout can become too narrow or short to seem right. Within the logo example above (although it works), the perfect situation would be to not crop half the illustration or to stay the brand from being so small that it becomes illegible and “floats” up. Flexible Images One major problem that must be solving with responsive Web design is functioning with images. There are variety of techniques to resize images proportionately, and lots of are easily done. The foremost popular option, noted in Ethan Marquette’s article on fluid images but first experiment with by Richard Rutter, is to use CSS’s max-width for a simple fix. img { max-width: 100%; } Copy As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The utmost width of the image is about to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you simply deliver images at the utmost size they’re going to be used at. You don’t declare the peak and width in your code, but instead let the browser resize the pictures as required while using CSS to guide their relative size”. It’s an excellent and straightforward technique to resize images beautifully. Size NoAte that max-width isn’t support in IE, but an honest use of width: 100% would solve the matter neatly in an IE-specific sheet. Another issue is that when a picture is resize too small in some older browsers in Windows, the rendering isn’t as clear because it need to be. There’s a JavaScript to repair this issue, though, found in Ethan Marcotte’s article. While the above may be a great band aid and good start to responsive images, image resolution and download times should be the first considerations. While resizing a picture for mobile devices are often very simple, if the first image size is suppose for giant devices, it could significantly slow download times and take up space unnecessarily. FILAMENT GROUP’S RESPONSIVE IMAGES This technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. This technique requires a couple of files, all of which are available on Github. First, a JavaScript file (rwd-images.js), the .htaccess file and a picture file (rwd.gif). Then, we will use just a touch of HTML to reference both the larger and smaller resolution images: first, the tiny image, with an .r prefix to clarify that it should be responsive, then a regard to the larger image using data-fullsrc. Copy The data-fullsrc may be a custom HTML5 attribute, defined within the files linked to above. For any screen that’s wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t got to load the larger image, then the smaller image (smallRes.jpg) will load. JavaScript The JavaScript file inserts a base element that permits the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewrite to their original forms, and only the massive or small images are loaded as necessary. With other techniques, all higher-resolution images would have had to be downloading, albeit the larger versions never are use. Particularly for websites with tons of images, this system is often an excellent saver of bandwidth and loading time. This technique is fully support in modern browsers, like IE8+, Safari, Chrome and Opera, also as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize together would expect of a responsive image, except that both resolutions are downloaded together, therefore the end advantage of saving space with this system is void. STOP IPHONE SIMULATOR IMAGE RESIZING One nice thing about the iPhone and iPod Touch is that Web designs automatically rescale to suit the small screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the small browser, with no need for scrolling or a mobile version. Then, the user could easily concentrate and out as necessary. There was, however, one issue this simulator created. When responsive Web design took off, many noticed that images were still changing proportionally with the page able. It they were specifically made for (or could otherwise fit) the small screen. This successively scaled down text and other elements. For Example Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s <head> section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below: <meta name="viewport" content="width=device-width; initial-scale=1.0"> Copy Setting the initial-scale to 1 overrides the default to resize images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag. Custom Layout Structure For extreme size changes, we may want to change the layout altogether. Either through a separate style sheet or, more efficiently, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same. While specific style sheets can inherit these styles and move elements around with floats, widths, heights and so on. For example, we could have one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined. If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet. Then just redefine the layout’s structure. Here is the style.css (default) content: /* Default styles that will carry to the child style sheet */ html,body{ background... font... color... } h1,h2,h3{} p, blockquote, pre, code, ol, ul{} /* Structural elements */ #wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px; } #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } Copy Here is the mobile.css (child) content: #wrapper{ width: 90%; } #content{ width: 100%; } #sidebar-left{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } #sidebar-right{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } MEDIA QUERIES CSS3 supports all of the same media types as CSS 2.1, such as screen, print and handheld, but has added dozens of new media features, including max-width, device-width, orientation and color. New devices made after the release of CSS3 (such as the iPad and Android devices) will definitely support media features. So, calling a media query using CSS3 features to target these devices would work just fine, and it will be ignored if accessed by an older computer browser that does not support CSS3. In Ethan Marcotte’s article, we see an example of a media query in action: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> Copy This media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less then load shetland.css. CSS3 New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. Look at “The Orientation Media Query” for more information on setting and restricting widths. Based on these media query features. One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths. — even for landscape vs. portrait orientations. Be sure to look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples and a more thorough explanation. Multiple media queries can also be dropped right into a single style sheet. Which is the most efficient option when used: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } Copy The code above is from a free template for multiple media queries between popular devices by Andy Clark. See the differences between this approach and including different style sheet files. This in the mark-up as described in his book “Hardboiled Web Design.” CSS3 MEDIA QUERIES Above are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Let’s now look at some specific how-to’s for using CSS3 media queries to create responsive Web designs. Many of these uses are relevant today, and all will definitely be usable in the near future. The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles. (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored. The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query. For Example Note in the examples below that we’re using the syntax for media queries that could be used all in one style sheet. As mentioned above, the most efficient way to use media queries. This is to place them all in one CSS style sheet, with the rest of the styles for the website. This way, multiple requests don’t have to be made for multiple style sheets. @media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } } Copy The class specified in the media query above (hereIsMyClass) will work only if the browser or screen width is above 600 pixels. In other words, this media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider). Example @media screen and (max-width: 600px) { .aClassforSmallScreens { clear: both; font-size: 1.3em; } } Copy Now, with the use of max-width, this media query will apply only to browser or screen widths with a maximum width of 600 pixels or narrower. While the above min-width and max-width can apply to either screen size or browser width. Sometimes we’d like a media query that is relevant to device width specifically. This means that even if a browser or other viewing area is minimized to something smaller. The media query would still apply to the size of the actual device. The min-device-width and max-device-width media query properties. This are great for targeting certain devices with set dimensions. Without applying the same styles to other screen sizes in a browser that mimics the device’s size. For Example @media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; } } Copy @media screen and (min-device-width: 768px) { .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; } } Copy For the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation). For Example @media screen and (orientation: landscape) { .iPadLandscape { width: 30%; float: right; } } Copy @media screen and (orientation: portrait) { .iPadPortrait { clear: both; } } Copy Unfortunately, this property works only on the iPad. When determining the orientation for the iPhone and other devices. The use of max-device-width and min-device-width should do the trick. Combie There are also many media queries that make sense when combined. For example, the min-width and max-width media queries are combined all the time to set a style specific to a certain range. @media screen and (min-width: 800px) and (max-width: 1200px) { .classForaMediumScreen { background: #cc0000; width: 30%; float: right; } } Copy The above code in this media query applies only to screen and browser widths between 800 and 1200 pixels. A good use of this technique is to show certain content. Or entire sidebars in a layout depending on how much horizontal space is available. Style Sheet Some designers would also prefer to link to a separate style sheet for certain media queries. Which is perfectly fine if the organizational benefits outweigh the efficiency lost. For devices that do not switch orientation or for screens. Whose browser width cannot be changed manually, using a separate style sheet should be fine. You might want, for example, to place media queries all in one style sheet (as above) for devices like the iPad. Because such a device can switch from portrait to landscape in an instant. If these two media queries were placed in separate style sheets. The website would have to call each style sheet file every time the user switched orientations. Placing a media query for both the horizontal and vertical orientations of the iPad. In the same style sheet file would be far more efficient. For Example Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable media queries in one style sheet would be best. Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag: <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> <link rel="stylesheet" media="print" href="print.css" /> Copy JAVASCRIPT Another method that can be used is JavaScript, especially as a back-up to devices. That don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers.(IE 5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries. Just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js. In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly. — if one prefers a more hands-on approach: Syntex <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).bind("resize", resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); // If width width is below 600px, switch to the mobile stylesheet if(newWindowWidth < 600){ $("link[rel=stylesheet]").attr({href : "mobile.css"}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth > 600){ $("link[rel=stylesheet]").attr({href : "style.css"}); } } }); </script> There are many solutions for pairing up JavaScript with CSS media queries. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design. When it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with media queries. look at “Combining Media Queries and JavaScript.” Showing Or Hiding Content It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit. (reasonably well) as a screen gets smaller. It’s great that that’s possible, but making every piece of content from a large screen available on a smaller screen. Or mobile device isn’t always the best answer. We have best practices for mobile environments. Simpler navigation, more focused content, lists or rows instead of multiple columns. Responsive Web design shouldn’t be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years! Ex display: none; Copy Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet. Or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet. (for bigger screens) that should be available only in mobile versions or on smaller devices. For example, as we hide major pieces of content. We could replace them with navigation to that content, or with a different navigation structure altogether. Note that we haven’t used visibility: hidden here; this just hides the content (although it is still there). Whereas the display property gets rid of it altogether. For smaller devices, there is no need to keep the mark-up on the page. It just takes up resources and might even cause unnecessary scrolling or break the layout. Here is our mark-up: <p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p> <div id="content"> <h2>Main Content</h2> </div> <div id="sidebar-left"> <h2>A Left Sidebar</h2> </div> <div id="sidebar-right"> <h2>A Right Sidebar</h2> </div> Copy In our default style sheet below, we have hidden the links to the sidebar content. Because our screen is large enough, we can display this content on page load. Here is the style.css (default) content: #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } .sidebar-nav{display: none;} Copy Now, we hide the two sidebars (below) and show the links to these pieces of content. As an alternative, the links could call to JavaScript to just cancel out the display: none when clicked. The sidebars could be realigned in the CSS to float below the content (or in another reasonable way). Here is the mobile.css (simpler) content: #content{ width: 100%; } #sidebar-left{ display: none; } #sidebar-right{ display: none; } .sidebar-nav{display: inline;} Copy Wіth thе ability tо easily show аnd hide content, rearrange layout elements аnd automatically resize images, form elements аnd more. A design саn bе transformed tо fit а huge variety оf screen sizes аnd device types. Aѕ thе screen gеtѕ smaller, rearrange elements tо fit mobile guidelines. Fоr example, uѕе а script оr alternate style sheet tо increase white space. Or tо replace image navigation sources оn mobile devices fоr bеttеr usability. (icons wоuld bе mоrе beneficial оn smaller screens). TOUCHSCREENS VS. CURSORS Touchscreens аrе bесоmіng increasingly popular. Assuming thаt smaller devices аrе mоrе lіkеlу tо bе gіvеn touchscreen functionality іѕ easy, but don’t bе ѕо quick. Rіght nоw touchscreens аrе mаіnlу оn smaller devices, but mаnу laptops аnd desktops оn thе market аlѕо hаvе touchscreen capability. Fоr example, thе HP Touchsmart tm2t іѕ а basic touchscreen laptop wіth traditional keyboard аnd mouse. Thаt саn transform іntо а tablet. Touchscreens obviously come with different design guidelines than purely cursor-based interaction, and the two have different capabilities as well. Fortunately, making a design work for both doesn’t take a lot of effort. Touchscreens have no capability to display CSS hovers because there is no cursor. Once the user touches the screen, they click. So, don’t rely on CSS hovers for link definition. They should be considered an additional feature only for cursor-based devices. Designing Look at the article “Designing for Touchscreen” for more ideas. Many of the design suggestions in. It are best for touchscreens, but they would not necessarily impair cursor-based usability either. For example, sub-navigation on the right side of the page would be more user-friendly for touchscreen users. Because most people are right-handed. They would therefore not bump or brush the navigation accidentally when holding the device in their left hand. This would make no difference to cursor users, so we might follow the touchscreen design guideline in this instance. Many more guidelines of this kind can be drawn from touchscreen-based usability. A Showcase Of Responsive Web Design Below we have a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screenshots provided. Many have several solutions for a variety of browsers, and some even adjust elements dynamically. In size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action. Art Equals Work is a simple yet great example of responsive Web design. The first screenshot below is the view from a standard computer screen dimension. The website is flexible with browser widths by traditional standars, but once the browser gets too narrow or is otherwise switched to a device with a smaller screen. Then the layout switches to a more readable and user-friendly format. The sidebar disappears, navigation goes to the top, and text is enlarged for easy and simple vertical reading.
Everything is very open with a really clear explanation of the challenges. It was really informative. Your website is extremely helpful. Thanks for sharing! Reply
Wow that was unusual. I just wrote an really long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say superb blog! Reply