SetSeed white-label CMS now available for resellers

Our very own Content Management System (CMS), SetSeed, has been the cornerstone of our web development and design business for several years. It's ongoing development and success has led us to recently launch the CMS as a commercial product, making it available to other web design and development businesses. This means they too can offer the CMS to their customers in the same way we do.

We've very excited about taking SetSeed CMS to the next level and look forward to actively continuing it's development.

Unlike most Content Management Systems, SetSeed CMS doesn't rely on vulnerable WYSIWYG editors. We believe the way a content administrator inserts actual text content onto a page is the most important aspect of a CMS, which is why we built our own text editing system from the ground up. If you're a web developer you'll probably be aware how easy it is for your clients to break their page's layout by pasting in content from word processing applications. We built SetSeed to address this fundamental issue with, as far as we know, all other CMS's out there.

However, SetSeed CMS doesn't stop there. The Content Management System is a complete back end for your clients websites, powering a blog, contact forms, image galleries, livechat, a PayPal shop, RSS feeds, a newsletter mailing list, calendars, video and much, much more.

The other significant aspect of SetSeed CMS is that it powers multiple websites from a single installation on your own server. This means you can keep that single installation up to date and ensure all your clients are using the most stable and feature rich version. No longer will you have countless requests to update your old client's CMS software when they discover it has gone out of date. SetSeed lets you keep everyone up to date.

SetSeed is also completely brand-able, so you can use your own logo on the CMS interface. What's more, we offer a complete training video library which will show your branding in each of the video screen casts. This is an amazing addition to the package and is sure to complete your white-label CMS offering.

We're also offering free installation, subject to availability, of SetSeed so you can get started without having to worry about installing it for the first time. Hop over to SetSeed.com to learn more.

Thanks to the CSS design galleries that featured our new website

The newly redesigned Phototropic Productions website has been featured on several CSS website design galleries. Many thanks to them for taking the time to consider us.

You can find us on the following CSS design gallery websites:

• Design Shack
• CssGlance
• CSS Impress
• CSS Design Yorkshire
• CSS Star
• CSS Brigit
• CSS Container

New website is here at last

After nearly a year since our last redesign we have launched a new-look website today. After an experimental stage of replacing a standard navigation menu with mini-content areas on each page, we have brought back a global navigation system. We've realised our last way of doing it didn't work, users just weren’t visiting as many pages per visit as they did before. It was a fun experiment though and worth trying I think.  

So, welcome to the 2009 Phototropic website. We hope you enjoy it and find what you're looking for, be it articles from our blog, information on our web design or filmmaking services. Of course, this website is now powered by our content management system, SETSEED™, and built using CSS and XHTML.

Accessible CSS drop down menus with and without Javascript and in IE 6

Stylish CSS drop down menus are nothing new. They can be easily coded to be semantic with nested unordered lists and can also be made accessible to keyboard users with a bit of helpful javascript. They can even work without javascript enabled by adding the :hover pseudo class to the parent list element. However, IE 6's lack of support for this means without javascript IE 6 users simply won't be able to see the links.

There is a simple solution.

Step 1. Build the page for browsers without javsacript
Because we want this to work in IE6 we can't use the :hover pseudo class on the list items. Instead build your css and xhtml page but make sure all nested lists in the navigation menu are visible. Style it up as best you can to make it look acceptable, even though all the menus will be expanded. In the case of drop down menus that overlap if they're all visible, you will need to turn the menu into a normal line-by-line menu with the sub menus indented. This is how all users without javascript will see your page.

Step 2. Add some Javascript.
Now that we have a non-javascript menu that works in IE 6 we can make it work as a drop down menu for users who have javascript enabled. We're using jQuery to make this easier and to allow a nice fade in on the drop down menu. The first thing to do is add a class to our main menu as soon as possible. Then add the code to make the sub menus fade in and out on mouse over.

$(document).ready(function(){
	$("#mainNav").addClass("js");
	$("#mainNav li").hover(function(){
		$("ul",$(this)).fadeIn();
	},function(){
		$("ul",$(this)).fadeOut();	
	});
});

Step 3. Add some style.
Now, we can use the “.js” class in our CSS to re-style the menu and override any of the style we added in step 1. Styling CSS drop down menus is well documented elsewhere so I won't go into too much detail here.

Step 4. Add some more javascript to enable full keyboard access.
What we have so far isn't enough to allow full keyboard control. Keyboard users would have to disable javascript as well as CSS to see the links. By adding a bit more jQuery we can make the drop down menus fully navigable via the keyboard.

$(document).ready(function(){
	$("#mainNav").addClass("js");
	$("#mainNav li").hover(function(){
		$("ul",$(this)).fadeIn();
	},function(){
		$("ul",$(this)).fadeOut();	
	});
	$("a").focus(function(){ // hide drop downs
		$("#mainNav ul").fadeOut();
	});
	$("#mainNav li a").focus(function(){ // main nav anchor focus
		$("ul",$(this).parent()).fadeIn();
	});
	$("#mainNav li li a").unbind(); // unbind hide drop downs from sub nav anchors
});

Lets first look at the rule labelled ‘main nav anchor focus’. This is assigned to the top level anchors in the main menu as that is what the keyboard will tab between when the user uses the tab key to cycle through links. When the anchor gets focus it shows the drop down menu associated with it. The fact that this is now visible means the next time the user hits tab the first sub menu item will have focus, and as such can be visited.

When the user tabs past the last sub menu item we want the down down to fade out. This is why we added the ‘hide drop downs’ rule to all anchors. This means, when any item is tabbed to all menus will close. We want to avoid this happening when the user tabs to the sub menu items and of course when they tab to a sub menu parent item. That's why we add it before the $("#mainNav li a") rule. This means it will fire the sub nav hide first and then open the one that is tabbed to. We prevent the sub nav links firing it with the unbind rule at the end.

Thats it, CSS drop down menus with keyboard control in all browsers, with and without javascript enabled.

New website design: The Devon Carpenter - Phil Szaniszlo

Phil Szaniszlo commissioned us to build a new website to use an advertising tool for his capentry services in Devon. The website was built with search engine optimization in mind and just a few weeks after launch his website is appearing at number one for his main Ggoogle phrase 'devon carpenter'.

We installed our new content management system on Phil's site to allow him to maintain and add to his website as time goes on. One of our philosophies here at Phototropic Productions is that we don’t want our customers to feel trapped in a circle of expensive mainatence fees just to make small edits to their websites. Phil can now edit his webiste when and how he wants and at no futher cost.

Most companies charge a lot to give this control to their customers as they know they won't get any more money out of the customer for making changes to the site. We believe that giving this control at a reasonable cost will help our word-of-mouth marketing and increase customer satisfaction, which is our first and foremost goal.

Learn more about our Exeter based website design services.

New website design: Shillingford Organics

We built a new website for Exeter organic farm Shillingford Organics as they were keen to have more control over the content of their website as well as update the look of the old site.

We redesigned the website to come up with a consistent and attractive new look for Shillingford Organics. Due to their old website being quite difficult for them edit themselves; they had ended up with various different text treatments throughout the website and agreed with me in thinking that the content should be made much more consistent.

The new Shillingford Organics website is powered by our content management system which allows them to control not only the page content but also add images to galleries, build contact forms, and publish regular diary entries and recipes via a blog system which has full search functionality. The content management system even has a new 'Newsletter Module' which allows Shillingford Organics to send the content of any page on the site as an email newsletter to their mailing list.

Learn more about our Exeter based web design services. If you're based in Exeter and would like to use a friendly, local company for you web design services feel free to get in touch.

New website design: David Bullivant - Writer / Photogrpaher

Devon-based travel writer / photographer, David Bullivant recently commissioned us to build a completly new website for him based on his own design.

We had to work to the highest of standards when recreating his design as David has an almost obbseive attention to detail! Of course there were a few technical issues with his design such as it was too wide for a 1024x768 computer screen so we had to work together to get his design to fit within that minimum width.

David originally thought of building the website in Flash but, as that is not an area in which we work, I explained the merits of accesible, css-based web design and that we could use Javascript to achieve his desired interface animation effects.

Davidbullivant.com is powerered by our new content management system, SETSEED, which allows him to have full control over the content of his website. We modified the behaviour of the existing image gallery functionality to get the custom gallery effects that David wanted. Not only can David fully administer the images that appear in his collections, he can also add, remove and rename the galleries themselves. David is also making use of the content management systems' blog feautre.

Learn more about our Exeter based web design services.