Ok havent started the coding for this yet, but this was the final design and here is how it needs to function.
The Amethyst Mine logo and triangle will need to highlight each area that it is currently in so it’ll move or slide or something would be nice but if this cant be achieved then just show up there when on that specific page. The footer needs to always be there no matter the screen size unfortunately. Also the green right triangle kind of need it to be there, is there a simple way to create this layout responsively so it doesnt distort etc on different resolutions maybe if its always full browser screen or something the middle section where the content goes that will be the main content and can scroll but the footer with the illustration will always be at the bottom. If anyone has an idea how to do the navigation and maybe whats best way to tackle this layout please let me know.
Below are links for pictures of different sections of the site.
To be honest, this is pretty impractical for the web. I wouldn’t even attempt to code that unless the client were willing to spend bucketloads of money. As hard as it is to say it, the layout might be better done in Flash, and just hang iPhones etc. But really, the web is about content, not (primarily) fancy design, in my view, so it’s not worth trying to attempt overly tricky layouts like this.
You should be able to create a design using CSS that will allow you to have the man in the bubble move up and down as they scroll, so no worries there. Same with the footer. I am pretty sure the menu is going to have to be Flash or similar. That triangle moving across the menu doesn’t look terribly easy to implement. Responsive designs in general take a lot of work / planning, but the design doesn’t look that difficult beyond the menu to implement.
I think the layout looks great, BTW.
That’s a bit of a monster to code and as Ralph said is not really web friendly!
For the nav you will probably have to overlay an absolute element for the triangle so that you can overlap the other nav items but you will need to carefully adjust the z-index of the other links or they can’t be clicked. It may be better not to do a rollover effect and just have the triangle visible on the current page. Just let the other links underline. Otherwise you will not only have to create the rollover but at the same time remove the current item or they will clash. It can be done but its awkward to implement.
The big center image would probably need to be a background image unless you are using something like the js supersize to get it to stretch. I would probably just use a large background image that fades at the edges on large screens. For the green arrow I would probably again use an oversized background image but it could be tricky to line everything up.
The fixed footer will be awkward because its quite deep and will take up a lot of real estate. You would probably be better off with a normal footer instead.
There is not really much room to manoeuvre as that layout is more like a picture than a web page and I see little scope for it to be responsive other than using media queries to alter the layout at a range of different screen sizes.
It’s one of those layouts where you will have to get your hands dirty and try things out first and see what works. Start with the nav and then just work one section at a time and see how it develops and see what will work on a web page. The design could easily be done more easily as a fixed width design but making it fluid or responsive would be a challenge.
Thanks everyone, hopefully going to try to solve this best way possible without using Flash and yes this needs to be the layout, so if anyone could shed a light on what may be best or if have any quick CSS./HTML solutions they can help me out with that would be excellent, cause I’m really needing some help with this one on the best step to take for the layout to achieve client satisfaction and usability.
Got some more questions ok since like the map page is going to be interactive when you rollover a purple dot info will come up and the illustration of the guy will have different info for each different section of the website, at first I thought best way to achieve this site is a one page site so the navigation could work properly and the info sliding in for each different page, now when I think about it this may not be best way to approach it, may be best for separate sections weather they fade in and out or something so you go to a new page so the Illustration can have different things he says when you roll over him during each section but now if it does open up in a new page can I still achieve the sliding nav? Its easy just to have the Amethyst Mine logo over each section thats not my problem its making it slide if it opens new page for each one. Also I quickly put together this…
It’s not right yet, is it possible to stop the scroll of the main content so it doesnt scroll down. Also I’m thinking 1000px wide is where all the content will fit like Navigation, Footer, Illustration, any text in the content div throughout the page, with just the background images of the section and the traingles being always large and reflect to what size the browser is, do you suggest this route or should I make everything liquid.
Also here is the link for that green triangle if you would be able to show me best way to put it in
Also if it is best to go different pages for each section due to the Illustration needs to say different things when rolled over on different sections and the map needs to be interactive, is it still possible to do the sliding navigation thing if so that would be great, its quite important to include. Also, I really like that js supersize but is it possible to do that with just CSS as well. Please take a look at it and see if its in right direction and if you could help with any layout changes or recommendations to make this work more effectively and the best way to achieve still the look and functionality.
