{"id":1778,"date":"2016-01-11T14:00:33","date_gmt":"2016-01-11T14:00:33","guid":{"rendered":"http:\/\/okomocr.com\/?p=1778"},"modified":"2016-01-11T14:00:33","modified_gmt":"2016-01-11T14:00:33","slug":"principles-of-responsive-web-design","status":"publish","type":"post","link":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/","title":{"rendered":"Principles Of Responsive Web Design"},"content":{"rendered":"

Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it.<\/span><\/h4>\n

Responsive vs Adaptive web design<\/span><\/h3>\n

It might seem the same but it isn’t. Both approaches complement each other, so there is no right or wrong way to do it. Let the content decide.
\n\"\"<\/p>\n

The flow<\/span><\/h3>\n

As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it’s called the flow. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.
\n\"What<\/p>\n

Relative units<\/span><\/h3>\n

The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That’s where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).
\n\"Relative<\/p>\n

Breakpoints<\/span><\/h3>\n

Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. But use them with caution \u2013 it can get messy quickly when it’s difficult to understand what is influencing what.
\n\"Breakpoints<\/p>\n

Max and Min values<\/span><\/h3>\n

Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense. This is why Min\/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don’t go over 1000px.
\n\"Min<\/p>\n

Nested objects<\/span><\/h3>\n

Remember the relative position? Having a lot of elements depending on each other would be difficult to control, therefore wrapping elements in a container keeps it way more understandable, clean and tidy. This is where static units like pixels can help. They are useful for content that you don’t want to scale, like logos and buttons.
\n\"Nested<\/p>\n

Mobile or Desktop first<\/span><\/h3>\n

Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first. Often people start from both ends at once, so really, go and see what works better for you.
\n\"Mobile<\/p>\n

Webfonts vs System fonts<\/span><\/h3>\n

Wanna have a cool looking Futura or Didot on your website? Use webfonts! Although they will look stunning, remember that each will be downloaded and the more you’ll have, the longer it will take to load the page. System fonts on the other hand are lightning fast, except when the user doesn’t have it locally, it will fall back to a default font.
\n\"Webfonts<\/p>\n

Bitmap images vs Vectors<\/span><\/h3>\n

Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or a gif, for vectors the best choice would be a SVG or an icon font. Each has some benefits and some drawbacks. However keep in mind the size — no pictures should go online without optimization. Vectors on the other hand often are tiny, but some older browsers won’t support it. Also, if it has lots of curves, it might be heavier than a bitmap, so choose wisely.
\n\"Bitmap<\/p>\n

Hopefully, these principles would help you at the time of design your web site. Remember that a responsive design is everything you need to approach your publics.<\/p>\n","protected":false},"excerpt":{"rendered":"

Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up […]<\/p>\n","protected":false},"author":3,"featured_media":1664,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[17],"tags":[51,52,18],"yoast_head":"\nPrinciples Of Responsive Web Design | CXGlobals<\/title>\n<meta name=\"description\" content=\"Principles\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Principles Of Responsive Web Design | CXGlobals\" \/>\n<meta property=\"og:description\" content=\"Principles\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"CXGlobals\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cxglobals\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-11T14:00:33+00:00\" \/>\n<meta name=\"author\" content=\"Andr\u00e9s Chavarr\u00eda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9s Chavarr\u00eda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/\"},\"author\":{\"name\":\"Andr\u00e9s Chavarr\u00eda\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17\"},\"headline\":\"Principles Of Responsive Web Design\",\"datePublished\":\"2016-01-11T14:00:33+00:00\",\"dateModified\":\"2016-01-11T14:00:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/\"},\"wordCount\":692,\"publisher\":{\"@id\":\"https:\/\/cxglobals.com\/#organization\"},\"keywords\":[\"Responsive Design\",\"UX\",\"Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/\",\"url\":\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/\",\"name\":\"Principles Of Responsive Web Design | CXGlobals\",\"isPartOf\":{\"@id\":\"https:\/\/cxglobals.com\/#website\"},\"datePublished\":\"2016-01-11T14:00:33+00:00\",\"dateModified\":\"2016-01-11T14:00:33+00:00\",\"description\":\"Principles\",\"breadcrumb\":{\"@id\":\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cxglobals.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Principles Of Responsive Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cxglobals.com\/#website\",\"url\":\"https:\/\/cxglobals.com\/\",\"name\":\"CXGlobals\",\"description\":\"Digital Marketing for Technology Companies Worldwide\",\"publisher\":{\"@id\":\"https:\/\/cxglobals.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cxglobals.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cxglobals.com\/#organization\",\"name\":\"CXGlobals\",\"url\":\"https:\/\/cxglobals.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg\",\"contentUrl\":\"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg\",\"width\":128.85,\"height\":34.78,\"caption\":\"CXGlobals\"},\"image\":{\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/cxglobals\/\",\"https:\/\/www.instagram.com\/cxglobals\/\",\"https:\/\/www.linkedin.com\/company\/cxglobals\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17\",\"name\":\"Andr\u00e9s Chavarr\u00eda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g\",\"caption\":\"Andr\u00e9s Chavarr\u00eda\"},\"url\":\"https:\/\/cxglobals.com\/author\/andres_cxgs\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Principles Of Responsive Web Design | CXGlobals","description":"Principles","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:\/\/cxglobals.com\/principles-of-responsive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Principles Of Responsive Web Design | CXGlobals","og_description":"Principles","og_url":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/","og_site_name":"CXGlobals","article_publisher":"https:\/\/www.facebook.com\/cxglobals\/","article_published_time":"2016-01-11T14:00:33+00:00","author":"Andr\u00e9s Chavarr\u00eda","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andr\u00e9s Chavarr\u00eda","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/#article","isPartOf":{"@id":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/"},"author":{"name":"Andr\u00e9s Chavarr\u00eda","@id":"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17"},"headline":"Principles Of Responsive Web Design","datePublished":"2016-01-11T14:00:33+00:00","dateModified":"2016-01-11T14:00:33+00:00","mainEntityOfPage":{"@id":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/"},"wordCount":692,"publisher":{"@id":"https:\/\/cxglobals.com\/#organization"},"keywords":["Responsive Design","UX","Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/","url":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/","name":"Principles Of Responsive Web Design | CXGlobals","isPartOf":{"@id":"https:\/\/cxglobals.com\/#website"},"datePublished":"2016-01-11T14:00:33+00:00","dateModified":"2016-01-11T14:00:33+00:00","description":"Principles","breadcrumb":{"@id":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cxglobals.com\/principles-of-responsive-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cxglobals.com\/principles-of-responsive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cxglobals.com\/"},{"@type":"ListItem","position":2,"name":"Principles Of Responsive Web Design"}]},{"@type":"WebSite","@id":"https:\/\/cxglobals.com\/#website","url":"https:\/\/cxglobals.com\/","name":"CXGlobals","description":"Digital Marketing for Technology Companies Worldwide","publisher":{"@id":"https:\/\/cxglobals.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cxglobals.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cxglobals.com\/#organization","name":"CXGlobals","url":"https:\/\/cxglobals.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/","url":"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg","contentUrl":"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg","width":128.85,"height":34.78,"caption":"CXGlobals"},"image":{"@id":"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/cxglobals\/","https:\/\/www.instagram.com\/cxglobals\/","https:\/\/www.linkedin.com\/company\/cxglobals"]},{"@type":"Person","@id":"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17","name":"Andr\u00e9s Chavarr\u00eda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cxglobals.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g","caption":"Andr\u00e9s Chavarr\u00eda"},"url":"https:\/\/cxglobals.com\/author\/andres_cxgs\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/posts\/1778"}],"collection":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/comments?post=1778"}],"version-history":[{"count":0,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/posts\/1778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/media?parent=1778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/categories?post=1778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/tags?post=1778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}