Website Anatomy: Part 1

WordPress websites have 5 areas:

1. header
2. navigation menu
3. content
4. sidebar
5. footer

I design on a big screen, but think for mobile. That’s because more than 50% of all web searches are done on a mobile device (phone or tablet) and it’s growing each year.

HTML5 and Mobile Responsive

HTML5 is the new coding standard. Mobile responsive means the design changes to accommodate the size of the screen. It will look great on a cell phone — which is different than seeing a miniature version of a website on your smart phone.

When a site is mobile responsive it will automatically reflow and display in this order:

1. Header left
2. Header right
3. Navigation menu
4. Content area
5. Side bar items top to bottom
6. Footer left, center, right

Plan for Success

Now that you know the visual hierarchy you can plan for mobile and maximum engagement.