Streaming live at 10am (PST)

Site elements not aligning correctly on all devices


#1

My site is not aligning correctly across devices. I've tried and tried and still cant get it correct.

The top nav, on tablet and phone, reduces to hamburger menu with Fb and Tw logos flanking left and right, but they arent all centered.

Also the new hero section, Pre Holiday Sale area, shows a white vertical space on right. At the suggestion of Dave at Webflow, I've made Overflow "Hidden" and will reupload the site and see if that resolves the white vertical space problem.

If anyone can take a closer look and offer solutions, it would be greatly appreciated.

https://preview.webflow.com/preview/clf-test?preview=7220fe6322592232a5cf417f896cc601

Live website is http://www.customlightingfixtures.com

Thanks.

Seth


Mobile site appears different in the editor than it does when made live at its destination URL
Mobile site appears different in the editor than it does when made live at its destination URL
#2

Seth,

I'm not sure what you mean by this...

Are you saying you want those two social icons in the center of the page or what?

The solution for the white space on the right hand side of the Sale Promo is to use Tablet view, then click into the symbol, go to background image, double-click the image and remove the background image "cover" setting. The white space goes away.

A Short Video of the process...

Thanks,
~B.


#3

Yes I would like everything at the top centered.

I will give your solution a try. Thanks Brian.


#4

Seth,
Re: Centering

You have a lot going on in the Nav Section symbol's structure. This is all it's contents:

Nav Section
Generic "Container"
"nav top table"

"Column 1"
"top nav logo" picture
text: "Formerly Custom Lighting Fixtures Inc."

"nav social column 2"
FB wood icon
Twitter wood icon

"nav bar"
(Desktop view navigation resides here)
menu button (hamburger menu)

About 11 elements or so...

I would look into simplifying the structure for the Nav, since there are a lot of extra elements that aren't really needed and making things too complicated for tablet and mobile. That'll make your centering of your elements and content much easier.

Is this your layout, or are you producing it in Webflow for someone else? There are some interesting design choices and I was just wondering.

Good Luck,
~B.


#5

Thanks Brian. This is my layout for my company, built from scratch as I taught myself Webflow. Believe me there were quite a few iterations prior to landing on this one.


#6

Seth,

May I offer up another "iteration" without offending you?

Let me know.

Thanks,
~B.


#7

All help is appreciated. Thank you.


#8

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.


#9

Thanks Brian. I appreciate the time and will review your notes.

Best.


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.