![\"mashable-responsive-design\"](\"https:\/\/www.delvinia.com\/wp-content\/uploads\/2014\/01\/mashable-responsive-design-450x25211111111111.jpg\")
Ever since the ’90s, digital designers have faced the challenge of supporting different browsers and platforms. With the explosion of mobile devices into our modern digital eco-system it has made this even more challenging. And, with the rate of adoption of smartphones and tablets that challenge isn’t going to go away anytime soon.<\/p>\n
In this post I hope to clarify two design techniques that are becoming more common in our digital vernacular: responsive and adaptive design. (Now, this is for the business folks so I’m not going to get into the technical ins-and-outs of these design methods. You digital design guys should know what I’m talking about and then some.)<\/p>\n
First of all, what’s the big deal?<\/strong><\/p>\n With so many types of devices in the marketplace it\u2019s becoming harder for companies to create an experience that would suit each one. Though mobile apps can be very engaging for consumers, they are costly to produce and replicate for each platform and device. And, creating independent mobile websites can create workflow issues for some teams having to manage multiple web properties.<\/p>\n Market-leading content management systems are incorporating responsive and adaptive design capabilities to streamline the effort to create mobile-ready web experiences with a single source of content. These can be a far more effective and economical means of content distribution across multiple devices.<\/p>\n Responsive and adaptive design are techniques that present web content to mobile devices (e.g. smartphones or tablets) using a native mobile web browser. Both can take content from a CMS and distribute it across any mobile device. And both can customize the content they serve to the device for the user. But that\u2019s where the similarities end.<\/p>\n Responsive Design<\/strong><\/p>\n Responsive design is a design method that reduces your webpage into a format that is readable and accessible via a mobile browser. Responsive design is concerned with the readability, hierarchy of information and page layout. The decision on how to present content happens in the browser on the client end. What it\u2019s doing through some CSS magic, is detecting the size or resolution of the user\u2019s browser and \u201cshrinking\u201d your webpage to something viewable on smaller screens. Rules built into the CSS match a user\u2019s screen size to \u201cbreakpoints\u201d in the page design. At each breakpoint, the CSS can reveal and hide page features, prioritize content and alter the page layout. These calculations are done entirely on the client-side regardless of device or operating system.<\/p>\n Adaptive Design<\/strong><\/p>\n Adaptive design is less concerned about the browser and screen size of the device. It is more interested in its capabilities. It begins by first detecting which device and OS the user is using (e.g. iPhone with iOS7) and then the server will deliver an optimized experience specific to that device so it can leverage the device\u2019s dimensions, native features and capabilities. This can lead to interesting design solutions that can leverage the device\u2019s GPS\/location services and touch screen capabilities to enhance the user experience.<\/p>\n Why do we need either of these?<\/strong><\/p>\n There are numerous reasons why you would consider either responsive or adaptive design. The form factor of mobile devices creates a considerable constraint on what can be seen by a user. Screen sizes are considerably smaller than traditional desktop and laptop screens. Mobile devices also have the capability of dual orientations (portrait and landscape).<\/p>\n The benefit of mobile devices is that they are, mobile. With that there\u2019s no telling where users actually are when they visit your website: on a bus, in a park, at a mall or at work.\u00a0 For mobile experiences context is very important to anticipate. A user on their smartphone at a mall could be looking for different information than a user sitting at home with a hot coffee.<\/p>\n So, which is better?<\/strong><\/p>\n First of all, end users can\u2019t tell the difference. Frankly they don\u2019t care how you give them the information they need as long as they get it when and where they want it.<\/p>\n Doing responsive is a good bet out of the gate. It has enough capability and flexibility to get your site to appear on any device. However, if your content strategy requires mobile device capabilities like geolocation, touch and accelerometer, then you need to consider adaptive design.<\/p>\n The most important thing to remember is that it\u2019s wise when considering designing any web property to define your mobile strategy first.<\/p>\n [Photo: Mashable]<\/p>\n","protected":false},"excerpt":{"rendered":" Ever since the ’90s, digital designers have faced the challenge of supporting different browsers and platforms. With the explosion of mobile devices into our modern digital eco-system it has made this even more challenging. And, with the rate of adoption of smartphones and tablets that challenge isn’t going to go away anytime soon. In this […]<\/p>\n","protected":false},"author":14,"featured_media":15995,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[54],"tags":[701,30,559],"_links":{"self":[{"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/posts\/15973"}],"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\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/comments?post=15973"}],"version-history":[{"count":15,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/posts\/15973\/revisions"}],"predecessor-version":[{"id":22616,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/posts\/15973\/revisions\/22616"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/media\/15995"}],"wp:attachment":[{"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/media?parent=15973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/categories?post=15973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.delvinia.com\/wp-json\/wp\/v2\/tags?post=15973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}