IMO this asks for a framework based approach like Foundry or Foundation. Keep in mind that the existing website is not responsive and that you will never have the same result in a modern website that works on tablets and mobiles. Your client should keep an open mind in this and take the opportunity to give the style an update as well. I doubt if you will be able to exactly recreate this site, but you can surely make something fresh and appealing based on the same structure in RW.
In any case you will need to invest in the necessary stacks to do a few tricks. Frankly, I can’t give you a list of which stacks you will need to redo this website. You will have to do some digging.
A must have is Will Woodwards Stacks4Stacks which enables you to run the other necessary stacks. If you are planning to built more websites in the future I wouldn’t waste too much money on templates and different small stacks but invest in Foundry2, Foundation6, UIkit3 or Source.
You can archive this with the Stacks pluging, lots of columns and a fair amount of hand written CSS.
However the “Menu” / Flyout’s on the bikes could be a challenge, but I am pretty sure there’s a stack that triggers a layer on mouse over.
@dripple , I should use an Accordion stack for this. Mostly not on hover but on click, but that makes it less nervous.
The Card Stack (Foundry) could be a nice option as well.
A small point but the Stacks plugin is by Isaiah at Yourhead not Will Woodgate’s stacks4stacks. Stacks4stacks have stacks that run on the Stacks plugin.
I’d agree with others, a framework is the way forward for this. Though curious as why to « rework » it you’re looking to recreate it?
It could do with a cleaner and less busy design.
Also are you looking to update it on behalf of your client or will you need a CMS solution for the client to be able to do it themselves?
Hi PMJD, thank you for your advice, it’s much appreciated.
To answer your question on the site being “re-worked’, in the past i have worked on the site but it’s messy, having been designed 6+ years ago and then having a small mobile responsiveness retro-fitted.
I’m sick and tired of Adobe ripping me off so as i’m in the process of evaluating RW I thought this would be the ideal opportunity to make the amendments the client wants and get a better-coded site.
Hi, what is it that the client wants to achieve? Is the site simply a placeholder, so people can find out their details? Or a catalogue of the products they sell? Or do they plan to sell via the site?
For sure, with RW and Stacks you could build something substantially more modern in feel than the existing site, but whether a site built with RW will fullfill their needs depends on what they want to from the new site.
In terms of the existing site, I would only echo what has already been said; it’s dated and busy. A total revamp with a fresh new look would be a far better option than a simple rebuild “as-is”.
For example there is the PopDrop Stack from Big White Duck to do these PopOvers.
As said before, the strange typography may need some manual tweaking as you will hardly find a theme which is build on this kind of taste.
It’s just a site to showcase what is sold - my client doesn’t want to sell online and has a habit of liking busy designs! I just try to follow his instructions
Can you give me a pointer? What would be your preferred method to display the thin banner at the head but with text ranged left AND text ranged right? If i were doing this in html/css i’d have a div for the banner and within it two more divs floated.
I’ve spent this afternoon trying with a 2 column stack (foundry) but positioning the text evades me… especially when at mobile 320px width - should I hide the stack and have a second one just for mobile a bit like a change in css with a breakpoint? Actually is it possible to set custom breakpoints for just this occurance?
I would go for columns / grid layouts.
Actually, if you’re comming from HTML, just keep in mind that acutally each stack is a DIV (well, a bit more, or course).
I typically have a mobile layout and a desktop layout for design elements that dont work with the mobile first approach of foundry, you can hide stacks on the different break points.
Foundry allows to set custom breakpoints, e.g. for configuring the columns. Just check “Customize Columns” and then set width of the columns (up to four, which might ne limitating)