{"id":12318,"date":"2016-02-16T20:09:57","date_gmt":"2016-02-17T04:09:57","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=12318"},"modified":"2021-08-08T01:11:04","modified_gmt":"2021-08-08T08:11:04","slug":"responsive-web-design-crash-course-the-technical-side","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/","title":{"rendered":"Responsive Web Design Crash Course: The Technical Side"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">It\u2019s time to delve into the nuts and bolts\u00a0of responsive web design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a technical medium, RWD requires a working knowledge of the code that makes it work. Designers who ignore the basics fail to understand what browsers can and can\u2019t do.<\/span><\/p>\n<p>Since I&#8217;ve been a web designer and developer for nearly 20 years, I hope to distill the technical side of responsive design into a quick crash course below. The below foundational knowledge certainly helps me improve the feasibility of my own designs when I&#8217;m creating responsive prototypes in <a href=\"https:\/\/www.uxpin.com\" target=\"_blank\" rel=\"noopener noreferrer\">UXPin<\/a>.<\/p>\n<p><span style=\"font-weight: 400;\">First, Cascading Stylesheets, or CSS, is the language that makes responsive web design possible. CSS is\u00a0a series of directives that spell out how browsers should display data depending on certain conditions like browser width. Now, understand that while most modern browsers obey the same rules in the same way, CSS rules are suggestions. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s review\u00a0the fundamentals<\/span><span style=\"font-weight: 400;\">. CSS works with <\/span><i><span style=\"font-weight: 400;\">selectors<\/span><\/i><span style=\"font-weight: 400;\"> and <\/span><i><span style=\"font-weight: 400;\">properties.<\/span><\/i><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Selectors:<\/b><span style=\"font-weight: 400;\"> HTML affected by the CSS. Examples: HTML &lt;p&gt; elements, &lt;li&gt; elements and &lt;div&gt; elements.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><b>Properties:<\/b><span style=\"font-weight: 400;\"> what the CSS will change on a given selector. Examples: Text color, border and padding.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><b>Values:<\/b><span style=\"font-weight: 400;\"> the change itself. Examples: Red, 10px and sans-serif are three values.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now let\u2019s put this together. \u201cdiv { color: #333; }\u201d has one selector, one property and one value.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12319\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image0010.png\" alt=\"image00\" width=\"238\" height=\"136\" \/><\/p>\n<h2><b>Media Queries Are the Technical Heart of Responsive Web Design<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">To account for different browsing conditions, responsive web design dictates that different rules must take place under different circumstances, usually the browser\u2019s or device\u2019s screen (the \u201cviewport\u201d) width. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">How do we define these rules? <\/span><a href=\"http:\/\/www.w3schools.com\/css\/css_rwd_mediaqueries.asp\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Media queries<\/span><\/a><span style=\"font-weight: 400;\">. Media queries are CSS commands that determine under what conditions other CSS selectors take effect. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, one media query might tell a browser, \u201cpay attention to rules 1\u201310 when the screen is up to 320 pixels wide,\u201d while another might say, \u201cpay attention to rules 11\u201320 when the screen is 321 pixels wide or greater.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Media queries are easy to identify: they begin with \u201c@media\u201d. Browsers read the CSS rules (e.g. selectors) listed between the media query\u2019s { curly brackets }.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12320\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image019.png\" alt=\"image01\" width=\"730\" height=\"345\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image019.png 730w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image019-635x300.png 635w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Above, CSS says to make all text red on visual devices, not screen readers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Media queries can build upon each other. For example:<\/span><\/p>\n<p><strong>@media screen and (width: 320px) { body { color: red; } }<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Rules take effect on visual devices that display exactly 320 pixels horizontally.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The different minimum and maximum widths that media queries use are called <\/span><i><span style=\"font-weight: 400;\">breakpoints.<\/span><\/i><span style=\"font-weight: 400;\"> A query that specifies (max-width: 768px) would change layouts when the viewport measures 0\u2013768 pixels wide. Oddly, nothing actually \u201cbreaks\u201d at that point. The term simply means that new rules will take effect within a given range, in this case 0\u2013768 pixels, or the width of an average tablet.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s no technical limit to the number of conditions a media query can display. This query is perfectly valid:<\/span><\/p>\n<p><strong>@media screen and (min-width: 480px) and (orientation: landscape) and (aspect-ratio: 4\/3) and (color: true) { \u2026 }<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">It says that any color screen at least 480 pixels wide, held in landscape position, with an aspect ratio of 4 to 3 that\u2019s exactly 320 pixels wide should take on certain properties.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The two most popular conditions are minimum and maximum width, the upper and lower limits a browser window can be to take on the given properties. But we can manipulate other important properties.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Resolution, for instance, suggests at what quality we should create our graphics. Screens capable of high-density graphics, e.g. <\/span><span style=\"font-weight: 400;\">Apple\u2019s retina screens<\/span><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/developer.android.com\/guide\/webapps\/targeting.html\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">high-res Android screens<\/span><\/a><span style=\"font-weight: 400;\">, will show text and vector art with crisp lines that make regular-density images look fuzzy. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cHigh-density images\u201d are those that use more <\/span><a href=\"http:\/\/www.quirksmode.org\/blog\/archives\/2010\/04\/a_pixel_is_not.html\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">device pixels<\/span><\/a><span style=\"font-weight: 400;\"> (actual dots a browser can display) vs. those defined in CSS. That means for an image to look its best, it needs four times the usual number of pixels. Something displayed at 300\u00d7300 pixels on a small screen actually needs 600\u00d7600 pixels total \u2014\u00a0when our media queries detect high-res screens. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re curious, here are additional properties we can control with media queries: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Aspect-ratio:<\/b><span style=\"font-weight: 400;\"> a comparison of a browser window\u2019s width and height.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Color:<\/b><span style=\"font-weight: 400;\">\u00a0whether a device has a color screen or not.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Color-index:<\/b><span style=\"font-weight: 400;\"> the number of colors a screen can display.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Device-aspect-ratio:<\/b><span style=\"font-weight: 400;\"> a comparison of the screen\u2019s width and height.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Device-height:<\/b><span style=\"font-weight: 400;\"> the number of pixels a displayed vertically by a device.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Device-width:<\/b><span style=\"font-weight: 400;\"> the number of pixels a displayed horizontally by a device.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Height:<\/b><span style=\"font-weight: 400;\"> the number of pixels displayed vertically by a browser viewport screen.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Monochrome:<\/b><span style=\"font-weight: 400;\"> how many bits that pixels in a grayscale screen uses.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Orientation:<\/b><span style=\"font-weight: 400;\"> whether a user is currently holding the device horizontally or vertically.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Resolution:<\/b><span style=\"font-weight: 400;\"> the number of pixels per inch or centimeter displayed by a screen.<\/span>&nbsp;<\/li>\n<li style=\"font-weight: 400;\"><b>Width:<\/b><span style=\"font-weight: 400;\"> the number of pixels a browser viewport uses horizontally.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As web layouts <\/span><span style=\"font-weight: 400;\"><a href=\"http:\/\/www.smashingmagazine.com\/2015\/08\/flexible-future-for-web-design-with-flexbox\/\" target=\"_blank\" rel=\"noopener noreferrer\">become more sophisticated<\/a>\u00a0with technology like Flexbox<\/span><span style=\"font-weight: 400;\">, orientation and aspect ratio will help us decide how much to show users at a glance. The \u201cfold\u201d may not be relevant as users scroll, but what they see when they stop scrolling needs to be as self-contained as possible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For now, though, width and resolution are most useful for responsive web design. Since contemporary site design lets us scroll up and down, width determines the available space a layout can use. <\/span><\/p>\n<h2><b>Best Practice According to the Experts<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">It might not surprise you to learn that Google, whose search engine reads a page\u2019s information and ignores viewports, <\/span><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/layouts\/rwd-fundamentals\/how-to-choose-breakpoints?hl=en\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">recommend setting media queries by content<\/span><\/a><span style=\"font-weight: 400;\">, not specific devices. That makes sense as new devices appear every month, meaning device-based CSS would need constant updates.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s where media queries help us most: they allow us to plan for browsers based on content and capability, not expectations. That is, we can tell browsers that our designs look best under ranges of conditions, like 0\u2013300 pixels vs. 301 \u2013\u00a0600 pixels, and write our code to suit our needs rather than what the browser requires.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Google also recommends adopting a <\/span>mobile-first approach<span style=\"font-weight: 400;\"> which, in addition to focusing on essential content that users want, encourages designers to use the fewest breakpoints possible. That means easier troubleshooting during development and maintenance later on.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019d like to learn more techniques for CSS media queries, we recommend the following resources: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/media-queries-responsive-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Use Media Queries in Responsive Web Design\u00a0<\/a><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"http:\/\/kyleschaeffer.com\/development\/responsive-layouts-using-css-media-queries\/\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive Layouts Using CSS Media Queries<\/a><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"http:\/\/line25.com\/tutorials\/create-a-responsive-web-design-with-media-queries\" target=\"_blank\" rel=\"noopener noreferrer\">Create a Responsive Web Design With Media Queries<\/a><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"http:\/\/www.toptal.com\/designers\/responsive\/introduction-to-responsive-web-design-pseudo-elements-media-queries\" target=\"_blank\" rel=\"noopener noreferrer\">Introduction to Responsive Web Design: Pseudo-Elements, Media Queries, and More<\/a><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a href=\"http:\/\/alistapart.com\/article\/quantity-queries-for-css\" target=\"_blank\" rel=\"noopener noreferrer\">Quantity Queries for CSS<\/a><\/span><\/li>\n<\/ul>\n<\/section><section class=\"related-books-section\"><h3>Grab design ebooks created by best designers<\/h3><p class=\"section-desc\">All for free<\/p><ul class=\"related-books-list\"><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/design-collaboration-devs-mockups\/\" class=\"action-get-ebook\" data-name=\"Designing UX With Developers\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Designing-UX-With-Developers.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Designing UX With Developers\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Designing-UX-With-Developers.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Designing-UX-With-Developers-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/design-collaboration-devs-mockups\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Designing UX With Developers\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-responsive-adaptive-web-design\/\" class=\"action-get-ebook\" data-name=\"Responsive &#038; Adaptive Web Design\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book3.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book3\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book3.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/the-book3-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-responsive-adaptive-web-design\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Responsive &#038; Adaptive Web Design\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/responsive-web-design-best-practices\/\" class=\"action-get-ebook\" data-name=\"Responsive Web Design Best Practices\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/the-book1.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book1\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/the-book1.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/the-book1-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/responsive-web-design-best-practices\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Responsive Web Design Best Practices\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-trends-2016-ebook-bundle\/\" class=\"action-get-ebook\" data-name=\"The 2016 Web Design Trends Bundle\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/the-book_bundle.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book bundle\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/the-book_bundle.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/the-book_bundle-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-trends-2016-ebook-bundle\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The 2016 Web Design Trends Bundle\">Download<\/a><\/li><\/ul><\/section><section class=\"related-books-section-single\"><section class=\"post-content-wrapper\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/the-book_bundle.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book bundle\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/the-book_bundle.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/the-book_bundle-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><article><h3>Do you want to know more about UI Design?<\/h3><p>Download 'The 2016 Web Design Trends Bundle' <span>FOR FREE!<\/span><\/p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-trends-2016-ebook-bundle\/\" class=\"btn btn-flat btn-darker action-get-ebook\">Download e-book for free<\/a><\/article><\/section><a href=\"#closeEbookPanel\" class=\"icon-close action-close-ebook-panel\">Close<\/a><\/section><section class=\"post-content-wrapper\">\n<h2><b>Compressing Resources for Faster Load Times<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Like images, we can shrink CSS files to use as few bytes as possible. Smaller files require less time to load, making websites faster and keeping users from wandering away.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Many techniques exist to keep files small, but we recommend starting with a few basics.<\/span><\/p>\n<h3><b>1. Minification<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">With good spacing, CSS and HTML files are easy for designers to develop and maintain. But browsers don\u2019t care about spaces between elements, properties and selectors. Extra spaces mean extra bytes, so we want to minimize those spaces (hence the term).<\/span><\/p>\n<p><b>Before<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">body {<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> \u00a0background: #fff;<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> \u00a0color: #444;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">p {<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> \u00a0padding-bottom: 1rem;<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> \u00a0margin: 0;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><b>After<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">body{background:#fff;color:#444}p{padding-bottom:1rem;margin:0}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tools like <\/span><a href=\"http:\/\/cssminifier.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">CSS Minifier<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"http:\/\/csscompressor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">CSS Compressor<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"http:\/\/jscompress.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">JS Compress<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"http:\/\/www.willpeavy.com\/minifier\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">HTML Minifier<\/span><\/a><span style=\"font-weight: 400;\"> by Will Peavy let you quickly strip away excess spaces from production copies of your code, while keeping the original lets you easily edit the original. <\/span><\/p>\n<p><b>Best practice<\/b><span style=\"font-weight: 400;\">: <\/span><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">check your code<\/span><\/a><span style=\"font-weight: 400;\"> and always minify copies of your HTML, CSS and JavaScript files before uploading them to the live website.<\/span><\/p>\n<h3><b>2. GZIP<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Like <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Lempel%E2%80%93Ziv%E2%80%93Welch\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">LZW compression<\/span><\/a><span style=\"font-weight: 400;\"> used in PNG and GIF files, GZIP scans files for redundant bytes. This is a deeper compression technique than minification. Google reports that <\/span><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/optimize-encoding-and-transfer#text-compression-with-gzip\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">this works best with text-based files<\/span><\/a><span style=\"font-weight: 400;\"> like HTML, CSS and JavaScript. <\/span><\/p>\n<p><b>Best practice<\/b><span style=\"font-weight: 400;\">: zip files after minifying them to make sites load faster, especially on smaller, less-capable devices.<\/span><\/p>\n<h2><b>HTTP requests<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">An often-overlooked means to speed up your sites is to reduce the number of files that a browser must download per page view. Simply put, the fewer files to download, the faster browsers can display a page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each request can take from 200 ms (milliseconds) to several seconds. That adds up quickly since (as we explained in the free e-book\u00a0<\/span><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/interaction-design-best-practices-tangibles\"><span style=\"font-weight: 400;\">Interaction Design Best Practices<\/span><\/a><span style=\"font-weight: 400;\">) users start losing their feeling of control <\/span><a href=\"http:\/\/www.nngroup.com\/articles\/website-response-times\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">after a 1-2 second delay<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once again, the advantage here is speed, especially for small devices with limited bandwidth or slow connections. <\/span><\/p>\n<p><b>Best practice:<\/b><span style=\"font-weight: 400;\"> whenever possible, save time by combining your minified CSS and JavaScript files. Every few hundred milliseconds counts.<\/span><\/p>\n<h2><b>Takeaway<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Technical details like these are just as important to responsive web design as the visuals. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designers who neglect performance and understanding media queries risk delivering poor experiences to their users.<\/span><\/p>\n<p>For more responsive design\u00a0advice, check out the free e-book <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/responsive-web-design-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive Web Design Best Practices<\/a>. As a co-author, I&#8217;ve distilled my own experiences into 100 pages of hands-on advice. We also analyze 35 responsive design case studies from top companies.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/responsive-web-design-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/fb-promo2.png\" alt=\"\" width=\"720\" height=\"303\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.<\/p>\n","protected":false},"author":27,"featured_media":12321,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7],"tags":[],"class_list":["post-12318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-web-design"],"yoast_title":"","yoast_metadesc":"Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Responsive Web Design Crash Course: The Technical Side | UXPin<\/title>\n<meta name=\"description\" content=\"Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Web Design Crash Course: The Technical Side\" \/>\n<meta property=\"og:description\" content=\"Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-17T04:09:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-08T08:11:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/rwd2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"557\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Responsive Web Design Crash Course: The Technical Side\",\"datePublished\":\"2016-02-17T04:09:57+00:00\",\"dateModified\":\"2021-08-08T08:11:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/\"},\"wordCount\":1490,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/rwd2.png\",\"articleSection\":[\"Blog\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/\",\"name\":\"Responsive Web Design Crash Course: The Technical Side | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/rwd2.png\",\"datePublished\":\"2016-02-17T04:09:57+00:00\",\"dateModified\":\"2021-08-08T08:11:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/rwd2.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/02\\\/rwd2.png\",\"width\":1024,\"height\":557,\"caption\":\"rwd2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-web-design-crash-course-the-technical-side\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Web Design Crash Course: The Technical Side\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive Web Design Crash Course: The Technical Side | UXPin","description":"Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Web Design Crash Course: The Technical Side","og_description":"Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/","og_site_name":"Studio by UXPin","article_published_time":"2016-02-17T04:09:57+00:00","article_modified_time":"2021-08-08T08:11:04+00:00","og_image":[{"width":1024,"height":557,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/rwd2.png","type":"image\/png"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Responsive Web Design Crash Course: The Technical Side","datePublished":"2016-02-17T04:09:57+00:00","dateModified":"2021-08-08T08:11:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/"},"wordCount":1490,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/rwd2.png","articleSection":["Blog","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/","name":"Responsive Web Design Crash Course: The Technical Side | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/rwd2.png","datePublished":"2016-02-17T04:09:57+00:00","dateModified":"2021-08-08T08:11:04+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Get a 10-minute practical overview of the nuts and bolts of responsive design. Written by a responsive designer with 20+ years web experience.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/rwd2.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/rwd2.png","width":1024,"height":557,"caption":"rwd2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-web-design-crash-course-the-technical-side\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Responsive Web Design Crash Course: The Technical Side"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=12318"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12318\/revisions"}],"predecessor-version":[{"id":31237,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/12318\/revisions\/31237"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/12321"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=12318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=12318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=12318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}