Development Blog 7 - Responsive Design

Responsive Design – Excercise 1

Figure 1; Using the Nav Menu plug-in to change the menu layout on different devices

By using the Nav-Menu plug in, the menu can be adjusted to fit the dimensions of the device being used to veiw a website. In the video above, the menu is adjusted depening on the break point of the device. For mobile phone users the menu will be presented in a hamburger icon, this is so the menu can be compressed due to the limited screen space on a phone.

Responsive Design; Becoming Carbon Neutral

Figure 1; A visual walkthrough the design of the Carbon Neutral website. It shows the content on different devices.

The website adresses the theme of the transition of fossil fuels to carbon neutral. The site adresses a diffreent UX at each device which can be seen in the video above. Most notably, the mobile phone version will not be as content heavy, and feature more photos with less text. It is a reduced version of the website, this is beause the user will not have to scroll so much and be over whelemed with written text. The website version has maximum information and interactive elements, this is more eaily ran on a pc and the screnn size means there is more opportunity for more information. The tablet serves as a mid-level for the information, it does have some interactive elements but these are reduced compared to the website.

The website can be veiwed below to experience all responsive elements.

References

https://www.cnbc.com/2021/05/12/us-gives-go-ahead-for-first-major-offshore-wind-farm-.htm l

https://globalsportmatters.com/culture/2019/09/19/sports-push-to-be-climate-neutra l

https://aura-innovation.co.u k