Seth,
Here is a quickly done PS mockup of how I would have done the tablet version as well (as well as the header on Desktop.) Please understand, I’m not saying mine is “right” and your design is “wrong” This layout is just how I would have done it.
Explanation of Design
This tablet view header allows for more content to show “above the fold”. It also has a more traditional placement for the branding. In certain verticals (markets), in Google search “brand” is even overtaking websites with outstanding organic SEO practices to show the better branded sites over the better SEO sites. So as a fictional example: searching “running shoes” we’re seeing results in the SERPs coming up Nike or New Balance first. They are successful in the SERPs due to being a stronger, more established brand, not for having better SEO.
I’m not a big fan of tablet (or Desktop) views having hamburger menus. As long as the tablet menu items have a 44px height (width isn’t an issue due to words being longer than 44px), they support tapping with the pad of the average human finger, so that’s reflected here too. Doing this for real, I’d also remove the box from around the logo and make the logo a bit bigger with the established gold color of the menu bar, but in the interest of speed, I just left it in the golden box. If the company is a physical vs. a web only business, adding the brick & mortar address establishes more trust and credibility for the general public.
I manage over 20 Google Analytics accounts and Tablet is, by far, the lowest traffic share for over 99% of the sites and 18 of them are ecommerce focused. Less than .1% of all tablet traffic converts to a customer, newsletter sign up or qualified lead. Most of this traffic come in for research, not (purchase) conversions. On my accounts, Desktop is still the leader in conversions. Research suggests that people feel the most comfort and security on desktop or their home PC, if they still have one.
Similar treatment on the phone portrait view… removing the box around the logo and more content showing above the fold with the header change. Social icons can be as small as 32px square for phone, and hamburger menu icons can be 128px to 32px square, but there are also better alternatives to hamburger menus that allow for more efficient use of the thumbs by placing a menu at the bottom of phone screen and, in some cases, use of tabs.
Clients don’t like hearing it, but in mobile, you need to strongly prioritize the UX. To do this you have to find out (via surveys,heat maps, website screen recording) what customers are going to use the mobile site for and adjust it accordingly by moving content down in the site or not including it at all, which scares many website clients because they may have paid “good money” for someone to dev that content. Reminding them that an entire site loads on the phone before they can start using it! This point alone should make owners want to prioritize and thin content on mobile. Consider that there is a more urgent need on mobile, especially phone, and need to get to order information or product info faster than on desktop or tablet.
As always…your mileage may vary.
Just some thought… sorry for the long post. I was generalizing a lot, so do think I was finger pointing at you Seth.
Take Care,
~B.
