Media Queries

[louisconway]

Adding media queries to the site is a big step as it opens the ability for more users to view the site across different devices such as tablets and mobile phones. In my Gantt chart this feature has been scheduled for a v1.3 release.

[louisconway]

[louisconway]

Have decided to remove the logo and re structure the navigation to display each element under the other one.

[louisconway]

Playing around with design layouts for mobile design. In this version there is 10px of padding around each nav button element. This functionally works however the aesthetically the navigation is now taking up too much space vertically.

[louisconway]

By increasing the font size and decreasing the padding, this creates a good balance between space to tap the button and interact with the web navigation and it is no longer taking up too much space. I believe this achieves a good balance of functional and aesthetic use elements into consideration.

[louisconway]

This is the first version of the media query for 600px, home page.

[louisconway]

From first look at the house page there needs to be a adjustment to the heading to adapt better for all content to be displayed. Blurb adjustment width required, font size needs to be smaller as well.

[louisconway]

Also the header tag should increase so it is more clear what house page you are on, this is aesthetic development.

[louisconway]

Almost have completed the media query for the house page ( 600px ), everything for the house page is now being adapted.

[louisconway]

Going to begin with developing a media query for each standard width sizing of phone screen. Mainly based of the iPhone line up as that is the most commonly used phone through out the world, but as it is being designed for standard widths then it should adapt well across the android line up as well.

[louisconway]

Having redesigned all of the media queries around the use for the iPhone X (375px) width, this allows the website to look great on most mobile phones with only one media query. I will continue to refine the layout for small phones and larger phone with set rules in place to deal with this. This is a good first media query as it is going to allow the website to look great on most devices.

[louisconway]

[louisconway]

The logo is not centred still, will need to fix this.