[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

How would you make this header responsive?

Hi folks,

Please see client site at: http://www.socialscoutsla.com/

These folks want a rebuild to get a responsive site but are in love with their header navigation and want to keep it.

Given that the new site must be responsive and I'm having a mental block...how would you go about rebuilding the header to keep the somewhat oddball design but still getting a responsive effect?
0
Jason C. Levine
Asked:
Jason C. Levine
  • 6
  • 4
  • 2
  • +1
3 Solutions
 
GaryCommented:
The menu is not really conducive to responsive design.
One option and it might be too messy is to make all the balls a percentage width/height of the header bar and at 800px just drop it completely and goto a mobile menu
And then some media queries to decrease the size of the font as you go down from 1000px
I'll keep pondering on it...
0
 
Jason C. LevineNo oneAuthor Commented:
The menu is not really conducive to responsive design.

I know, right? That design is really restrictive.  Client says they like the uniqueness not understanding that it's unique because it can't really be dealt with on modern devices.

My fallback position is to make the header disappear when the viewport slips under a certain width.  But I'd at least want to take one swing at integrating it.

Other ideas to this point are:

Making it a single image with hotspots for clicking and attempting to make the hotspots resize responsively.

Animating the circles (HTML5?) so they move about as the viewport shrinks

Firing the client
0
 
GaryCommented:
Image map may work if you integrated the text into the image but you'll need a plugin
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

I like point 3
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Jason C. LevineNo oneAuthor Commented:
Everyone likes point 3, no one ever DOES point 3.
0
 
Dave BaldwinFixer of ProblemsCommented:
I'm good at firing clients.
0
 
Brandon LyonSenior Frontend DeveloperCommented:
From a design perspective, I would turn it into a stack of block links with the same background colors. On a related note, I'd tell them white text on a yellow or light colored background is incredibly difficult to read.
0
 
Jason C. LevineNo oneAuthor Commented:
I would turn it into a stack of block links with the same background colors

Can you explain further or provide a quick sketch?

I'd tell them white text on a yellow or light colored background is incredibly difficult to read.

I'll be redoing the color scheme for accessibility/readability.  Right now, focused on trying to salvage the header per their request...
0
 
Brandon LyonSenior Frontend DeveloperCommented:
I was thinking something simple like this. It doesn't have a circular design but it keeps the colorful spirit.

speechme.jpg
0
 
Jason C. LevineNo oneAuthor Commented:
Ah...

That might end up being their mobile menu after the initial header disappears.

And yes, it looks like a rainbow with a hangover.
0
 
GaryCommented:
This is in no way an answer but a proof of concept

http://jsfiddle.net/GaryC123/8c7Hc/

Resize the result window
0
 
Jason C. LevineNo oneAuthor Commented:
Cute trick.

Alright, I think I know where I'm going with this.
0
 
GaryCommented:
If it's something you want to go with then I'll work with you on it - but I think it's too much work

edit
Too much trouble for the sake of a menu
0
 
Jason C. LevineNo oneAuthor Commented:
Nah, I can take it from here and you're right...it's waaaay too much work for a menu and for this client's budget.  A simpler solution is to maintain the header more or less as is until the viewport doesn't allow it and then hide it in return for a drop-down mobile menu (your initial solution).
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 6
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now