Having a responsive design integrated in a website is crucially important, with innovative technologies and different screen dimensions coming out it is increasingly important for organisations to make sure their websites are responsive with different dimensions, meaning that the website should change depending on the user’s device and if its portrait or landscape position. Making sure that the relevant information for the website and organisation is still presented in an effective and efficient for the users to be able to engage with the website no matter the device and dimensions, opening their target audience further. A fitting example of a website that uses responsive design successfully is Dropbox, having three unique designs for the three different platforms – Desktop (1-3), Tablet and mobile.
The desktop and tablet versions use a layout that allows for the navigation bar to be at the top of all times for easier navigation, using the bigger and wider dimensions to their advantage by having all the important and most looked at information on top in the navigation bar. The desktop version has a different headline with a statistic from Dropbox’s website with a blue button at the bottom of the headline with ‘Find your plan’, using an image below the headline from their website.
The tablet version might share the same layout for the navigation bar as the desktop, but the colour and headline are vastly different. The tablet version of the website uses white background and instead of ‘find your plan’ it says ‘sign up for free’ which is something the tablet and mobile version share. The headline is also different, instead of a statistic the tablet version uses a quote that is relevant to Dropbox’s purpose and core. The tablet version also makes use of the white space advantage that the bigger dimension of the tablet gives by, using a split in the middle screen layout to use a headline and on the other side an image that is relevant to their website.
Due to the remarkably different dimensions in the mobile version compared to the tablet and desktop, the layout used in the mobile version is vastly different then the other versions. The navigation bar has turned into a hamburger menu that is highly characteristic for mobile design, the logo, name, and sign in option stays out of the hamburger menu even in the mobile version. The headline like the other two is different once again, it tells users one of the things that they can do with Dropbox, using black background like the desktop version and the ‘sign up for free’ under the headline like the tablet version.
1-3 – Pipedrive (2024) Website. https://www.pipedrive.com/en/blog/responsive-website-examples [Accessed 06 Nov 2024].