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?
LVL 70
Jason C. LevineNo oneAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.