What are responsive designs?
A responsive design, also known as a responsive web design is a way to allow to change its appearance depending on what device the website is viewed on. Responsive design is important in web design as it will stay consistent no matter where you view it. It is about using HTML and CSS to automatically resize, hide, shrink or enlarge a website to make it look good on all devices.
Task
For todays task I am going to be designing a responsive website outlining the importance of being carbon neutral, I need to consider the transition of fossil fuels to carbon neutral. Before designing a carbon neutral webpage I have been asked to look an existing template on Elementor, then I looked on the responsive mode and seen the difference if the site is viewed on tablet, desktop or phone. This will give me an idea on how I should choose to layout my design across all devices.
Figure 1 – Photography template on PC Figure 2 – Template viewed on tablet Figure 3 – Template viewed on phone
Carbon Neutral campaign
Here is my campaign if viewed on computer. The text, photos and banners are larger as the computer has a large screen, this makes it easier to present information & to make it legible. For the campaign I added imagery of the sky, nature as the background to let the viewer see what my cause is about.
References:
W3Schools (n.d.). HTML Responsive Web Design. [online] W3schools.com. Available at: https://www.w3schools.com/html/html_responsive.asp [Accessed 18 Jun. 2023].
howtogeek (2020). What Is ‘Responsive Design,’ And How Do You Use It? [online] How-To Geek. Available at: https://www.howtogeek.com/devops/what-is-responsive-design-and-how-do-you-use-it/ [Accessed 18 Jun. 2023].
Thebulletin.be. (2023). Available at: https://www.thebulletin.be/sites/default/files/carbon_neutral.jpg [Accessed 18 Jun. 2023].
BBC bitesize (n.d.). What would carbon neutrality mean for the UK? [online] BBC Bitesize. Available at: https://www.bbc.co.uk/bitesize/articles/zfw4f4j [Accessed 18 Jun. 2023].
Natural history museum (n.d.). What does carbon neutral mean and what is net zero? | Natural History Museum. [online] www.nhm.ac.uk. Available at: https://www.nhm.ac.uk/discover/quick-questions/what-do-carbon-neutral-and-net-zero-mean.html [Accessed 2023].
Cho, R. (2018). The 35 Easiest Ways to Reduce Your Carbon Footprint. [online] State of the Planet. Available at: https://news.climate.columbia.edu/2018/12/27/35-ways-reduce-carbon-footprint/.
clear blue sky background – Bing images
United Nations (2020). The race to zero emissions, and why the world depends on it. [online] UN News. Available at: https://news.un.org/en/story/2020/12/1078612 [Accessed 2023].
World Economic Forum (n.d.). World has 42% chance of breaching 1.5 degrees if emissions stopped today. [online] World Economic Forum. Available at: https://www.weforum.org/agenda/2022/06/world-has-42-chance-of-breaching-1-5-degrees-if-emissions-stopped-today-new-study-finds/ [Accessed 2023].