{"id":273,"date":"2022-06-17T22:28:39","date_gmt":"2022-06-17T11:28:39","guid":{"rendered":"http:\/\/mobisoft.com.au\/?p=273"},"modified":"2022-08-29T13:25:21","modified_gmt":"2022-08-29T02:25:21","slug":"what-is-responsive-design","status":"publish","type":"post","link":"http:\/\/www.mobisoft.com.au\/?p=273","title":{"rendered":"What’s Responsive Design?"},"content":{"rendered":"

A bit of background history…<\/strong><\/p>\n

In the early 2000’s, whenever a new monitor came onto the market that had a different resolution or aspect ratio, web developers would scramble to come up with a whole new design for each screen. To focus and conserve their resources though, many web developers would use a \u2018majority rules\u2019 approach as far as which audience they would choose to cater to at the time, at the exclusion of others.<\/p>\n

For example, when say 80% of users were using 800 x 600 monitors, many developers would concentrate solely on catering to only that portion of the market. But then later they had to redo everything when the majority of users moved to 1024 x 768. But by using this method, a good chunk of the audience had to endure a poor user experience when their web page layouts did not display properly, or behave as expected.<\/p>\n

\n

\"Liquid<\/a>In 2004 Cameron Adams demonstrated Adaptive Layouts<\/strong><\/em> – layouts that adapted to the browser viewport width, and by 2008, a number of related terms such as \u2018flexible’, \u2018liquid’, \u2018fluid’, \u2018elastic’ were being used. But as smartphones and tablets were slowly introduced, creating a website version for each individual device became impractical.<\/p>\n<\/div>\n

Fast forward to today when every business requires a mobile version of their website, and we\u2019re not just talking about a slight change in a monitor size. We\u2019re talking about displaying the same content (albeit, not<\/em> in the exact same configuration) on a 30\u201d desktop screen in landscape mode, as a 6\u201d smartphone screen in portrait mode, whilst still giving the end-user a good experience. Fortunately, that\u2019s where Responsive Web<\/strong> design comes into play.<\/div>\n

 <\/p>\n

In a nutshell, it\u2019s a single website that works for every<\/em> screen and makes pages look great at any<\/em> size. <\/strong><\/span><\/div>\n

 <\/p>\n

\"Responsive<\/div>\n

This approach suggests that design and development should respond to the user\u2019s behaviour and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images, and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.<\/p>\n

In other words, the website should have the smarts to automatically detect<\/strong><\/em> & respond<\/em><\/strong> to the user\u2019s preferences. This eliminates the need for a different design and development phase for each new gadget on the market.<\/div>\n

 <\/p>\n

\"Boston<\/p>\n

However there are things to consider when choosing to go the Responsive route.<\/div>\n

 <\/p>\n