Mobile Site Documentation Page

You employ adaptive images.

Adaptive Images
Adaptive Images Code

I added images to the main and both sidebars. I gave them a max width of 100% and a height of auto.

You employ media queries for tablet size display.

Tablet View

I changed the layout so the two sidebars would be beside each other under the main area.

You employ media queries for phone display.

Phone View

I changed the layout so that the two sidebars are following the main area.

You restructure navigation for different size displays.

Mobile Navigation

I did not change the navigation for the tablet because it was still sufficient. For the mobile view, I added the mobile navigation menu.

You apply the pixel width of the average index or thumb finger in your design.

Mobile Menu

The navigation is at least 300px x 60px. I did this so the navigation would be easy to click.

Techniques employed are 100% functional in devices of choice..

Samsung Galaxy A02s

Samsung Galaxy A02s

You apply search engine optimized for page titles, meta tags, body text, headings, images, internal links, and navigation.

Meta Data Code

I optimized my page titles, added meta tag descriptions and keywords. I used headings, alt tags with all my images, and my navigation titles.

Design elements such as typography, body text, headings, graphics, links and color are balanced, practical, and aesthetic in order to create unity and consistency resulting in a harmonious visual appearance applying standards of web design and development including HTML and CSS validation when applicable.

Samsung Galaxy A02s

Aestetics of Responsive Website

I optimized my page titles, added meta tag descriptions and keywords. I used headings, alt tags with all my images, and my navigation titles.

Back to Top ↑