Responsive Design of my Web page

[THEOPHILEACHIZA]

I will now work on the responsive design of my web page. Responsive design or adaptive web design, is essential to ensure that my site displays correctly on all devices, whether smartphones, tablets or desktop computer.

Techniques to implement:

1. Media Queries: Define breakpoint to adjust the style according to the screen size.
2. Responsive images: Adapt the size of images to avoid slow loading times on mobile devices.

By integrating these elements, i will ensure that my web page will not only be aesthetically pleasing but also functional on all types of devices.

[THEOPHILEACHIZA]

After following some lessons and tutorials about Responsive web design, I was advised to start by designing for mobile before designing for desktop screen.

I had made a mistake to start with design for desktop screen. Now I went to correct and change some properties of my CSS so that it can start first for mobile and then on desktop screen.

The advantage is that if we start with design for mobile this will make display faster on smaller devices.

[THEOPHILEACHIZA]

1. The problem I encountered was that I had started by designating for desktop screens instead of applying the 'mobile first' principle, which pushed me to rebuild my entire design to start with a design for mobile.

The disadvantages of not implementing the mobile-first principle are:

• Non-mobile-friendly design: By prioritizing desktop design, it is common to neglect the specificities of mobile users, which can make navigation difficult on these devices.

-Layout complexity: Designing for desktop first can make adapting content for small screens more complicated, leading to display and usability issues.

-Performance and loading time: Sites designed without mobile devices in mind can be heavier, which negatively impacts loading time on mobile networks.

-Degraded user experience: A non-mobile-first approach can lead to a poor user experience, increasing bounce rates and decreasing time spent on the site.

2. I learned a lot about RWD, firstly the 'mobile first' principle, some techniques like media queries which are used to apply specific CSS styles depending on the screen size.

I learned 3 things about media queries:

• Adapting layouts: Media queries allow you to change the layout of elements based on the screen size. For example, you can switch from a multi-column layout on a large screen to a single-column layout on mobile.

-Changing styles: These can be used to adjust properties like font size, background color, or even hide certain elements on smaller screens.

-Breakpoints: Media queries use "breakpoints" to define at which screen sizes the styles should change. Standard sizes include 480px for mobile and 768px for tablets.