{"id":10259,"date":"2012-04-23T10:49:53","date_gmt":"2012-04-23T14:49:53","guid":{"rendered":"https:\/\/www.delvinia.com\/?p=10259"},"modified":"2020-02-10T09:19:05","modified_gmt":"2020-02-10T14:19:05","slug":"responsive-design-what-is-it-and-how-does-it-work","status":"publish","type":"post","link":"https:\/\/www.delvinia.com\/responsive-design-what-is-it-and-how-does-it-work\/","title":{"rendered":"Responsive Design: What is it and how does it work?"},"content":{"rendered":"

\"\"<\/a>Ricardo Queiroz, our Art Director, recently led a Lunch and Learn<\/a> session on Responsive Design for the members of our Delvinia and AskingCanadians<\/a> teams. Here\u2019s a look at what he had to say on the topic.<\/p>\n

What is it?<\/strong>
\nResponsive design is a design approach that adapts the medium to the users\u2019 needs. On the web, it\u2019s about adapting the interface, and how the content is displayed, to different screens. Basically, it involves scaling down a web page to a tablet and\/or smartphone or scaling up from a mobile device to a web page.<\/p>\n

Why use it?<\/strong>
\nThe way users access the web is changing and with new devices coming out every day, the need for a more flexible structure is necessary, meaning: It\u2019s all about user experience. We want to translate the experience we\u2019re creating for the desktop to other screens like tablets, mobile and TV. Responsive layouts are a more future proof approach to what\u2019s to come.<\/p>\n

But, responsive design is not a final answer. It\u2019s still important to consider the project goals. Responsive design may not be suitable for every site. Considering the strategy and user experience are key.<\/p>\n

How does it work?<\/strong>
\nResponsive design is made possible by a new module of the CSS3 specification called media queries. Media queries have been around for a long time but it\u2019s now possible to specify different styles to different targets (think screen resolution, window size, and number of colours).<\/p>\n

Working only with CSS doesn\u2019t allow us to change any content, so by adding other technologies like HTML5 and Javascript it is possible to load specific content to certain devices, like smaller images to mobile for example.<\/p>\n

Workflow<\/strong>
\nUnfortunately, creating a responsive site is not an automated process and the very first step should be developing a strategy and deciding whether responsive design is the best approach for the project.<\/p>\n

If it is, you will need to choose which devices and resolution breakpoints to target as there\u2019s still the need to architect, design and develop the different layouts for different resolutions.<\/p>\n

From a content point of view, there are a couple of approaches that can be used: mobile first or desktop first.<\/p>\n

For the first option the idea is to create the project by using mobile as the starting point and scaling up. By doing so, you\u2019ll make sure that the most critical and important content is displayed, adding extra content and functionality as the site scales up.<\/p>\n

Designing for desktop typically begins with defining all of the content and functionality your site or application needs and then scaling down to mobile by optimizing and reducing content to what the user needs on the go.<\/p>\n

The idea of a responsive interface basically gets us thinking of creating for different platforms at the same time, which makes the process a bit more complicated but the outcome and the experience for the user is worth it.<\/p>\n

See for yourself.<\/p>\n

Examples<\/strong>
\n\u2022 The Boston Globe<\/a><\/em> \u2013 This is one of the biggest projects to date to be created as a responsive layout. The grid changes as you increase or decrease the size of the screen adapting the content nicely to different resolutions.
\n\u2022 MacDonald Hotels & Resorts<\/a> – Navigation and buttons adapt to a mobile browser changing measurements and keeping in mind the user experience when navigating on mobile.
\n\u2022 Smashing Magazine<\/a><\/em> – A good example of a site adapting not only to a small screen but also to a large display. The navigation and ads shift to the side when the site is viewed in a large resolution, making good usage of the whole space.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ricardo Queiroz, our Art Director, recently led a Lunch and Learn session on Responsive Design for the members of our Delvinia and AskingCanadians teams. Here\u2019s a look at what he had to say on the topic. What is it? Responsive design is a design approach that adapts the medium to the users\u2019 needs. On the […]<\/p>\n","protected":false},"author":26,"featured_media":17427,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[46,947],"tags":[78,559,561],"_links":{"self":[{"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/posts\/10259"}],"collection":[{"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/comments?post=10259"}],"version-history":[{"count":3,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/posts\/10259\/revisions"}],"predecessor-version":[{"id":26222,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/posts\/10259\/revisions\/26222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/media\/17427"}],"wp:attachment":[{"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/media?parent=10259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/categories?post=10259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/tags?post=10259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}