I’m happy to say that I’ll be up, speaking at WordCamp Stockholm on October 22. My session is going to be about user interfaces, more specifically on the importance of spending time on admin interfaces for clients.
As WordPress developers and designers, I think we have an obligation not to come up with complicated ways to manage custom features that are not in core. Whenever we make a custom feature, we also need to think about how working with it from an administrative point of view makes most sense for our client. I’ll be sharing experiences, examples and solutions so please join me. Meanwhile, I am interested in hearing your thoughts on the topic too.
WordCamp Stockholm is going to be a really fun day and I hope to see you there. Don’t forget to follow the event at the hashtag #wpsthlm and if you’re going to be there, come up and say hi!
A few weeks back we launched a new website for Caparol, a paint manufacturer (if that’s the English term…) here in Sweden. This was done in collaboration with VimleWebb who we work a lot with.
Our part in this project was to help make parts of the site easier to update by building custom functionality to extend upon the core WordPress feature-set.
Part of what Caparol wanted was a store locator where they could easily insert new resellers where buyers could find their paint. This store locator had to be easily updatable so we decided to utilize the custom post types in WordPress to essentially build a store display.
By integrating this with the Google Maps API, we were able to create a user friendly page for finding the store nearest to the customer location, at any given time.
I’ve always been a big fan of the fonts that Adobe has made and when they released a new one, specifically for code editors last week, I was overjoyed. The new font is called Source Code Pro and is based on their also recently released, open source font, Source Sans. The difference is that Source Code is made to work best with code editors.
Since the release, I’ve been using Source Code Pro in all my editors (Coda 2 and Sublime Text 2 if anyone is wondering) since the release and I must say that it is looking very nice indeed! Check it out.
Anyone who’s had a website for a while knows that you will ultimately end up having someone try to hack your site or do something malicious. Over the past months, we have been asked more than usual to consult companies on improving their WordPress security or fixing sites that have been hacked.
Luckily, protecting your site doesn’t have to be rocket science and involve a lot of technical know-how. With just a few simple steps your site’s security can be dramatically increased. Continue Reading »
Earlier this year, Scott Kelby came to me and asked if we wouldn’t be interested in helping him re-design and re-launch the Photoshop Hall of Fame website which had been left alone for a few years. Needless to say, I accepted and over the past couple of months we have been working closely with the teams at NAPP to create this new website and we are very happy to finally be able to share the new site with everybody. Continue Reading »
Custom Post Types in WordPress are superb! More often that not, websites that we build for clients have more than one custom post type which inevitably will clutter up the admin menu slightly. The solution to the problem is one that WordPress itself employs: De-clutter the meny by inserting a separator in between sections.
Doing this requires just a couple of simple PHP functions that you can add to your functions.php file. One to create the separator, one to add any number of separators at any position in the menu and finally an action hook into the menu to add it. Continue Reading »
For most web development, Coda 2 from Panic is the main application of choice. The reason I favor Coda for site development is a combination of all of its features but mainly its ability to organize sites and handle publishing of edited files. A benefit is the ability to set up the user interface for super quick development, which is what I wanted to share with you guys today.
The way I set up Coda when starting the development of a site is to take advantage of the columns feature, splitting the window up in three columns on my 27″ screen. One for the HTML code, one for the CSS and a final for a browser preview. The browser preview is automatically updated when you change something in the CSS or HTML views. This way, you get instant references from your HTML code (when coding CSS) and get the instant update in the browser too.
So far I haven’t had a chance to check out the new plugin as I just saw the release notes. You will be able to publish to people’s timelines by tagging them in your post as well as directly integrate Facebook comments and the like send and subscribe buttons on each post. You also get a few widgets for your sidebar too.
We have been working with local personal fitness and training company Team Hälso & Friskvård for several months to create an improved website for them to attract more customers.
Their old website wasn’t bad at all and we have kept the design, which is deeply rooted in their graphical identity and just improved on it.
We had a number of goals that Team HF set for us to make the new website look better. Firstly, it needed to perform better. They had a fairly high bounce rate on the site and were not getting any major leads of their contact us section. Attracting more leads became the lead goal.
Secondly, Team HF wanted to increase the number of people that used their training center and gym by updating its training section with a more appealing page design.
Finally, we were asked to make the site easy to keep up to date with new content and information.
What we did.
Let’s now take a look at what we did to improve their website and make it perform better.
Backend System Change to WordPress & Code Tweaking
The site used to be powered by a .NET based content management system that was custom made by the agency that initially made their website. We suggested that we change the backend system to WordPress for several key reasons:
Extensibility: The custom CMS would be hard to extend with new features, even contact forms.
Ease-of-use: WordPress allows us to make it easier for Team HF to update more of the website themselves which was one of their key requirements.
Security: By choosing WordPress, we can ensure that the site is constantly being updates to patch the latest security threats which would be harder and more costly on the custom CMS.
Redesigning the Frontpage
Team HF’s previous frontpage did not have much information to lead you through and want to explore the site. It was pretty unclear where you should be heading next. To solve this, we created a new design (within their existing layout and graphical identity).
Specific services are immediately visible along with good-looking photos to attract the viewers attention and make them go deeper into the site and become interested in the services that Team HF offers.
Finally, we chose to clean up the page, make the design simpler and make it less cluttered with inconsistent font sizes and families.
Introduced Quick Contact Form
To make it easier for them to convert visitors into customers, we added a contact form on each informational page on the site that asks the visitor if he/she wants to learn more, allowing them to painlessly drop their name and contact information. This can be picked up by the team at Team HF to call or email the lead and close the deal.
By allowing users to painlessly contact them, we dramatically increase the likelihood of new customers as Team HF themselves can personally contact the client and sell the products in a more personal way than the website can, without the client having to do much work.
Cleaner Design & New Training Page
As a final part in reaching our goals, we opted to fully re-design the main landing page for the training section to promote the different services that are offered and overall make it more visual instead of the old text based section.
Many of the links and graphics on the old site lacked contrast, making it hard to use and navigate the site. This was improved by altering some of the colors, still keeping it within the main graphical identity.
Even though the new site was only just released we have seen an increase in leads coming through the instant access contact forms on every page of the site. With time, it remains to be seen how much the bounce rate is being affected, but we are confident that Team HF will ultimately gain more customers through their updated website.
It is very simple to add a Twitter feed to your own website without using Twitter’s default UI widget, which frankly looks quite ugly. If you want full customization ability, keep on reading and I’ll show you what to do using a bit of PHP. Continue Reading »