I’ve created various sites using FW, but a client has asked if we are able to produce one along the same lines as the link below. I don’t use FW often enough to be able to see that some of the questions may be very easily answered, and that I have probably already used some features on other sites, but it seemed more prudent to ask the experts here for quick answers as opposed to sitting down for a few hours myself and not necessarily getting anywhere!
I’m not asking for specific instructions of how to create the different elements included, just whether they can be done without resorting to anything more than FW actions and a basic knowledge of coding.
Specifically, I’m asking whether the following items are reproducable:
full screen background image that acts like a fading slideshow but scales to fit the screen
the page elements scroll up/down whilst the background image remains static
Drop down navigation menus with a mix of text and graphics
(on any other page) the slide-out downloads menu on the RH side
Hi Neil,
I took a look at this last night mainly to see just how easy a layout like this could be created in Freeway Pro. Here’s my attempt: http://d.pr/nJI9
The full screen background images use the Background Supersizer Action (Background Supersizer - ActionsForge), the drop down menu uses Freeway’s own CSS Menus Action with a few extra CSS styles to get the background images in for each of the main menu items and the sliding Facebook panel uses a CSS transitions to slide the panel in and out of view when the user hovers over it.
The only other Action I used was my Externalize Action (http://www.freewayactions.com/test/externalize/) to clean up the page code and remove a lot of the inline code clutter that doesn’t need to be in with the HTML.
All in all I think it is pretty close to the original although there are a few things I would do differently if I had a bit more time and energy;
The CSS for the menu background images uses nth child pseudo selectors which only work in modern browsers. The fallback here is that a user using an older browser won’t see the images at all - just the plain orange background. Given a bit more time and energy I’d probably create a simple Action to add CSS classes to each of the menu items so I can target them without having to use nth child pseudo selectors.
I’d use a web font for the Rockwell menu items and headings. At the moment these will fall back if Rockwell isn’t available but will almost certainly look awful in these fonts.
I’m not a great fan of the amount of pixel data that the background image slideshow brings to the page (over a meg for 3 images) so I’d be inclined to crush the images as far as I could before they started falling apart.
Regards,
Tim.
On 3 Jan 2013, at 17:21, neil.west1 wrote:
Specifically, I’m asking whether the following items are reproducable:
full screen background image that acts like a fading slideshow but scales to fit the screen
the page elements scroll up/down whilst the background image remains static
Drop down navigation menus with a mix of text and graphics
(on any other page) the slide-out downloads menu on the RH side
Hi Neil,
I took a look at this last night mainly to see just how easy a layout like this could be created in Freeway Pro. Here’s my attempt: http://d.pr/nJI9
I’ve got the slide element working but I need to know how you got the FB link working, because thats what I’m after - but to open on the other side of the page.
I can’t at the moment David, it’s a test page on my Mac. I’m not sure about the FB link - I take it you mean the FB page that loads and not the actual button.
Need it on http://www.pal4pasw.co.uk on the home page. Would like it to work and look like Tim’s. I know that is going away from what this thread is about but looking at the page Tim’s is the best option.
I took a look at this last night mainly to see just how easy a layout like this could be created in Freeway Pro. Here’s my attempt: http://d.pr/nJI9
Wow! thanks for that Tim. The client had doubts that I/my software could produce such a site (most probably me!). Your example has proven that at least one of those opinions is incorrect!
