Responsive Design

When creating my website in Adobe Muse, I want it to have a responsive design. Responsive design is an approach web-designers make to their websites and pages so that they present well on a collection of device screens, ranging from laptops to tablets to mobile phones (each has a different sized screen). Having this responsive design implemented into my product will make it accessible to my target demographic from multiple devices and this will furthermore allow me to optimise their experience on that specific device when browsing the website.

From a google search, I came across a video produced by Adobe which went into great detail about how to effectively execute a responsive design to a level at which I could understand it. Here it is:

From this video, it taught me about the basics of how to implement a responsive design into my website. Using the Breakpoint Bar located at the top of the screen, I will be able to use a slider to minimise and maximise the page to simulate different sized screens, this will allow me to see when objects within the page will contact, further showing me when I need to add a new breakpoint. After a new breakpoint is added, I would then alter the layout of the page so that none of the objects contacts each other – this is good as I can any changes I want without affecting any of the other breakpoint settings. This also means that I can optimise it the website for different devices –  as none of the settings on the current breakpoint affects any of the other breakpoints, the scale of some objects within the page can be reordered better for a smaller screen, meaning that would all be perfectly sized.

Following on from this, when the size of the webpage is smaller, some of the objects can be changed to suit the user. For example, within the video, the creator knew that when the webpage screen was at a small size, it would be predominantly used by mobile devices, this meant that she could change the banner menu to an Accordion menu to benefit tablet and mobile phone users. I thought that was really cool and would be something I would really want to incorporate into my own design.

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *