Geocel/Ronseal responsive website design

Over the past few months we’ve been working with QRBT and Geocel (part of Ronseal) to produce a brand new responsive website design for Geocel to showcase their huge range of building and DIY products.

Objective

To create a modern, responsive website for Geocell to bring the brand up-to-date and allow users to view all of Geocells products.

Goals

To allow users to browse and search all Geocells products and allow merchants to login to see merchant specific offers and product information.

Solution

The website was built using Expression Engine with additional modules to handle the complex structure and layout of the products and categories. Products needed to be shown under different top level headings and in multiple categories to enable the user to quickly find products by brand, usage or product name.

Every product in the range has a huge amount of additional information that the user can access but this information is mainly used by building trade professionals. kc web design kent built a user friendly front end system that was easy for the user to find and download this extra information and an intelligent admin system for Geocel to manage their products quickly and easily.

More and more trades-people are now using mobile devices and the building trade in general in the UK is amazingly quick at taking up mobile technologies so the new website had to be responsive and offer an optimum experience on all mobiles and tablets.

Merchant areas, stockists maps and other features will be added over the coming weeks as the website grows.

 

Visit website

kc web design and Fujitsu UK

For a while now kc web design Kent have been working with Fujitsu UK & Ireland to improve large sections of their website. Over the past 12 months the changes that kc web design have made to specific sections and user flow have had a significant effect on user interaction, contact requests and engagement.

One of the big projects we were involved in last year was the redesign of the Fujitsu UK websites contact process. The original contact process was a bit confusing and many users ended up trying to contact wrong departments or just gave up along the way. As a large IT company, Fujitsu needed a simple contact path for all types of user and department. The design and user journey for each type of contact at Fujitsu was researched, wire-framed and redesigned and the changes we made had a very significant effect…

…in 2013-14 we noticed that a large number of people were completing the wrong forms, and more people were visiting the contact page than were getting in touch with us. We commissioned some usability research, which identified problems with the contact process. kc web design recommended changes to the home page and the contact page, and provided the necessary design elements to place on these pages to maximise use of the correct forms. In addition, they made recommendations regarding effective imagery and placement of contact placards. That work made the contact process considerably more efficient, reducing the number of people incorrectly using the B2B contact forms by over 70%. The design elements used are now being adopted by other countries – for example, the Fujitsu Australia and New Zealand home pages now use the new contact process designed by kc web design.

kc web design will be working with Fujitsu on more projects over the coming months and we hope to create more changes to the UK website that will have a significant effect on Fujitsu’s online business.

Amazon Prime Video and the Lovefilm fiasco

I’ve been a user/renter with LoveFilm for many years using their DVDs by post service. Over the last few years the streaming side of DVD rental has grown and grown and now there are lots of different offerings for watching DVD online. Lovefilm is still the only one doing rentals by post and as much as I try and use iTunes and Lovefilm instant we do still watch DVDs that come in the post.

Sometime last year Amazon bought Lovefilm. Nothing changed. The service still worked, they added more films to the streaming service (I could now watch The walking Dead!), the website was easy to use but not perfect (it was a little tricky to browse and find films) but generally all was good. Then, a few months ago Amazon announced that they would be changing Lovefilm to Amazon prime video. Not the snappiest of titles for a company, I preferred Lovefilm, but kind of an expected move by Amazon. Then one day I went on to the lovefilm website to choose some DVD rentals and I got a huge shock! The old lovefilm website had disappeared completely and was now Amazon prime video which looked just like Amazon’s retail website. In fact it was Amazon’s retail website just with extra bits of navigation for adding titles to your rental list. Trying to find DVDs to rent in amongst all the other crap on the Amazon website was impossible. When I’m buying products on Amazon I don’t really mind being shown other things I might want or suggestions in the search for similar products but when all I want to do is quickly find some new films to rent I really, really do not want to have to wade through a million other navigation links, be pestered with products to buy or be shown so many search options that I’m not sure whether I’m looking at a DVD to rent or one to buy.

I think Amazon have made a huge mistake combining the DVD rental service into the rest of the already huge Amazon website. What was once a focused, simple and quick process is now a confusing mess that’s hard to navigate. When I’m picking a film I want to focus on that task.

Amazon need a dedicated website for loveFilm, sorry Amazon Prime Video (nope, still doesn’t sound like a great name!), like Netflix and other similar services otherwise they WILL be losing a lot of customers. Like me. As a website designer I would never advise a client to do what Amazon have done, its a bad idea on so many levels but it shows that Amazon are just interested in one thing…trying to sell you more stuff!

Paymo Pro Beta 3 Review

For a long time now I’ve been using Billings here at kc web design Kent for dealing with out invoicing and time tracking. I like Billings, it works well, has good invoice template customisation and is simple to use but it is no longer getting updated. Marketcircle have chosen to move a perfectly good single payment OSX app over to a monthly subscription fee so for an app I bought for £30 over 4 years ago I now would have to pay £10 per month for not much more benefit. So, time to look at some other options.

A while ago I had some dealing with Jan Lukacs at the company that make Paymo about another app they created called Viewflux (which is also a very good app for showing creative web designs to clients to get feedback) and remembered that Paymo looked good. The beta of version 3 is free to use for 100 days so I talked to Jan and got an invite.

Paymo is an online invoicing and time tracking app that is very simple to use and has a clean, easy on the eye user interface. iPhone and iPad apps are available as well for those on the move but the web app should suite most users. Its very easy to set up and start using and provides all the basics you need to create and manage projects and tasks, create invoices and estimates and track time. The project management side of things is very good and allows you to set tasks and milestones and add times against them so you can see what the total time allocated is and what actual time you’ve spent if you use the time tracker against that task.

Customising invoices was a big selling point for me in Billings  because as a designer I like everything that comes from kc web design kent to look good and that includes the simple things like invoices. Paymo doesn’t really give you much customisation of the invoice template but the one that is provided isn’t bad at all. It might be nice if we had the ability to edit a custom style sheet to make changes to the invoice template and allow a bit more customisation.

On first impressions I like Paymo, time will tell how good it is and I’ll be interested to see what changes in the beta. Once I have a few projects in there and some billed invoices then the dashboard and reporting should become more useful so I’ll do an updated review in a few months time.

For a great full review of the newest version of Paymo see Lewis Parrotts Paymo review.

 

Web designer footer links

As web designers and developers we all do. We do it all the time here at kc web design kent. We spend weeks crafting a website design, building and coding the templates, adding content and tweaking for all the browsers and just before it goes live we add a link back to our web design sites in the footer. We’re proud of the website designs we create and we want everyone to know who designed and built that website. Its also good for SEO…isn’t it?

Are a web designers footer links good for SEO

YES! And no. Ever since I can remember web designers have been adding footer links back to their websites and for as long as I can remember it worked. It was a great way of getting quality back links and driving business back to your websites but things change. Most importantly, Google has changed. Over the last few years Google has changed and adapted the way organic search listings are ranked and so old techniques we’ve been using for years have suddenly stopped working. The rate a which SEO has changed over the last 18 months is phenomenal and keeping up with all the new changes is a job of its own. It’s why a lot of web design companies work with specialist SEO companies like we do here at kc web design kent.

One thing that has changed over the last few years is how Google deals with site wide links. It seems that site wide links now get a thumbs down as Google classes them as un-natural. Its common sense when you think about it. You design a website for a restaurant and stick a link to a web design site at the bottom of every single page. To Google that looks unnatural and they presume its someone trying to side step their system.

What can be done?

You can have your web design link in the footer but just have it on the homepage. Or have a do-follow link on the homepage and no-follow links on the internal pages. If you’re using WordPress its easy to use the if_homepage or if_frontpage variables to put an if statement around a link.

We tried a few test here at kc web design kent and changing our footer text on a few large commerce sites had a really positive impact. We jumped from page 5 to page 3 almost over night.

kc web design Dribbble invite giveaway 2014


This Dribbble invite giveaway is now closed…

So, it turns out the one person who was going to get the invite has now already got one! I may give out the invite to a runner up…

 

kc web design Kent have another Dribbble invite giveaway for 1 (or 2 if we’re feeling generous and we have lots of fantastic designers apply!) lucky web designer! If you’re a talented web designer, graphic designer, UI designer, icon designer, iOS designer or any other type of designer with a fantastic web design portfolio and you’d like a Dribbble invite then enter kc web design’s latest Dribbble invite giveaway 2014.

I’d love to see some design work from web designers local to Canterbury or in Kent but any web designers after a Dribbble invite giveaway can apply.

Step 1

Post a message to Twitter and spread the word. Just retweet this…”@Dribbble invite giveaway 2014 from @kcwebdesign – http://goo.gl/9n8bbR”


Step 2

Follow me on Dribbble – http://dribbble.com/kcwebdesign

Step 3

Send 2 pieces of your absolute best web design work and a link to your portfolio to dribble @ k-collective.co.uk

Thats it!

I’ll be announcing the winner on February 28th 2014 so you have plenty of time to get your designs sent in to us at kc web design kent.

 

Dribbble? What’s Dribbble?

For those designers out there that don’t know what Dribbble is (and there surely can’t be many of you!), here’s a little overview…

Dribbble is an invite only community for all types of designers to show their work and get feedback from other designers. Its a brilliant way to showcase your work, get feedback from other designers, get inspiration from some of the worlds top designers and see what design trends are popular in all kinds of different design disciplines.

Dribbble is invite only which has kept the standard of design work very high so you need to be good to get an invite. Competition for invites is very high and so the standard of your work will need to be high to get an invite. If you go pro you also get a lot of advanced features and the option to be available for jobs. You can check the jobs board for the latest design jobs from all over the world and it can be a great place for freelance web designers to pick up work. At kc web design kent we’ve picked up a few jobs from Dribbble although competition is pretty tough so you do have to be good.

I’d recommend Dribbble for any designers out there so don’t be shy, enter our Dribbble invite giveaway and get yourself on Dribble!

 

Fujitsu UK & Ireland blog responsive website design

At kc web design kent we’ve been working with Fujitsu UK and Fujitsu Global on a number of exciting projects for a while now. The latest project for Fujitsu UK is a complete redesign of their UK blog. Last year we created a brand new WordPress blog for Fujitsu UK that was quietly launched and gradually built up over the coming months. After the success of the first 12 months and a massive increase in readership it was time to revamp the website and create a brand new responsive design.

kc web design kent worked very closely with a great team at Fujitsu UK to design and build a new blog website that would enable a large amount of written content to be viewable on a multitude of different devices. A unique look and feel was created by kc web design kent to differentiate the blog from other Fujitsu websites while keeping within the strict brand guidelines. Unique identifiers were created for each of the 5 main sections that would allow users to easily scan different stories on the site. The layout was kept simple but intuitive to maximise the readability of the content and minimise distractions.

To create the responsive website design kc web design kent utilised the fantastic Twitter Bootstrap responsive framework to build the WordPress theme templates and create a truly universal viewing experience on all devices. The in-house design team at kc web design kent used a combination of apps and technologies to build the initial templates including Twitter Bootstrap, Coda 2, LESS, LiveReload, Hammer and Ghostlab for testing on our suite of different devices. Using this suite of Mac products enables us to design responsive websites swiftly while being able to view as we build on lots of different devices.

Other projects that kc web design kent have been working on with Fujitsu include social media branding, contact and business lead user flow and processes, email newsletter design and more.

Visit website

 

Optimising WordPress and the server

At kc web design kent we’ve become obsessed with getting WordPress to work at peak performance over the last few months so we thought it would be good to document some of things we’ve been doing to increase WordPress performance and reduce loading times. Not all of these things work on all servers and you may get different millage out of some but they’re all worth a try and a look at the principles behind them. First off, lets look at the server…

Server optimisation

The first thing to look at is the server and with htaccess files enabled there are a few tricks that we can use to speed things up. A great place to look at advanced htaccess rules is the brilliant HTML5 Boilerplate but it can get quite complex. To start with lets just tackle the major ones.

GZIP and Deflate

Compression is very important and can speed up your WordPress site a considerable amount. Check if either of these modules are installed for Apache or just add the code for both into your htaccess file. Here’s an example for deflate. Please note the mod_filter wrapper around this code, if you don’t have the filter module enable in Apache then this won’t work so check its installed or in later versions of Apache just remove these wrapper tags.

 

<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/x-javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/x-httpd-php \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/javascript \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule> 

EXPIRES CACHING

Setting the cache expiry means the server won’t be dishing out new files with every page request which will speed things up for the user. Make sure to set the limits at a realistic level and if you site is always changing then set them shorter. If it never changes then set them longer!

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

Set keep-alive’s

When you run Googles Pagespeed tests – which you really should be doing – it sometimes alerts you to keep alives. This is to do with the server keep connections open while serving all the files and not closing the connection after each file is served. If you’re serving lots of small files then closing and opening new connections each time can slow things down. To keep connections open you can add this to the htaccess file.

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule

Memory limits

WordPress can be power hungry at times. We’ve had instances at kc web design kent where a new VPS with only 256 memory was struggling with a basic WordPress site. If you can, go for more memory on your server and then change the default memory allocation for WordPress by adding this in the htaccess file.

php_value memory_limit 128M php_value upload_max_filesize 20M php_value post_max_size 20M

There are many, many more things you can do with a htaccess file but these will make a big difference on the speed and performance of you WordPress site and should be done on all installations.

WordPress optimisations

When using WordPress it’s important to know what it’s limits are and how it works on a server. We’ve already mentioned that it can be quite power hungry so just throwing any old template on it for a professional website isn’t always the best idea.

When creating your won WordPress web design theme for a client try and limit the amount of database calls you use to pull out paths to CSS and JS files and reduce the amount of queries. When using a bought theme check its not one that gives you endless options for this frontage or 3 different shop systems or endless page layouts as these will significantly increase the amount of data pulls on the site even if you’re not using half of what available in the theme. You can trim things down by removing php paths and hard coding things.

Another area to be watchful of is plugins. They can add lots of files and weight to a page that you just don’t know about. If you can do it yourself with code you know in the theme files then thats the way I would go first. If you do need a plugin then try a few out, read reviews and forums and test on a dev platform first before using on a live site.

Be careful of render blocking elements. Google Pagespeed loves this one and its always cropping up, especially on WordPress sites. Render blocking elements are CSS or mainly JS code in the head of a page that prevents the rest of the page loading and working before these files have loaded themselves. Jquery is the main culprit and some WordPress plugins like to stick a lot of code in the head so watch out for those. These days its good practice to put all JS in the footer to avoid this problem. If you have to put scripts in the head you can add this little bit of PHP code just before you body tag to help ease the problem…

<?php flush(); // http://developer.yahoo.com/performance/rules.html#flush ?>

And lastly, minify all HTML/CSS/JS and use a caching plugin such as WP Super Cache to speed up serving pages to users. After you change any of these points above check on Google Pagespeed for improvements and keep optimising until you get a good score.

Oh, and one more thing, you could also use a CDN service like Cloudflare to server all you static files. We used it on kc web design kent as a test and saw some big improvements.

What! No screen cloth! iPad Air Review

My ageing original iPad 1 is still going strong but has slowly been relegated from a work device to a kiddies play thing so it was time for a long overdue upgrade. The original iPad isn’t supported in the latest OS’s and so trying to test new iPad apps we’re designing at kc web design kent was proving a little tricky. I’d been reluctant to fork out for a new iPad this year knowing that a new iPad would arrive at the October Apple event so I’ve been waiting and waiting until now.

It was a tough choice between the new iPad Air and the retina iPad mini but having had a Nexus 7 in the office for a while now I decided that the small size was nice but not a practical for working on as the larger screen. The iPad Air seemed a great half way house as its screen is bigger but it’s considerably lighter than any other 10″ iPad.

What! No screen cloth!

As soon as the new iPad Air was available I grabbed one from the Apple store along with a case and it turned up at the kc web design kent studio a few days ago. It’s a lovely piece of kit – as you’d expect from Apple – and its size and weight feels perfect. The lightness makes it easy to hold and use and it really doesn’t feel much heavier in use than the first gen Nexus 7. One thing that was noticeably missing from the box though was a screen cleaning cloth! Every other Apple device I’ve bought has come with a cloth – even my giant 27″ iMac that we use in the kc web design kent studio has a small cloth! – so an iPad without one felt a little harsh, especially when paying a premium price. The stickers were there (I must have about 20 of these now and no idea what to do with them!) but now screen cleaning cloth – that’s a bit mean Apple!

I’ve not been a massive fan of iOS7 but I have got used to it now on my iPhone. There have been reports of it not working to well on the iPad but the iPad Air feels very nice. I think the ultra fast processor helps make iOS7 feel very fluid and tactile and whizzing around between apps using the multitouch gestures makes working very easy.

Having not used the old iPad very much for work over the last year or so at kc web design kent having the new iPad Air around and using it for more work related tasks feels great. It gets me away from the desk a bit more which is always nice! So, all-in-all it’s the perfect iPad – light, fast, slick and a joy to use. Just what everyone expected!

 

Dash – The API Documentation Browser and Code Snippet Manager

I came across Dash – The API Documentation Browser and Code Snippet Manager for OSX – in a tweet the other day and thought it sounded interesting and maybe useful at kc web design kent. At kc web design we work a lot with html, css, WordPress, Expression Engine and all sorts of other code bases like PHP, Jquery, etc at kc web design kent and when forgetting syntax or functions it’s a case of using Google or Stack Overflow to refresh your memory. When I’m using Coda I sometimes use the books to lookup syntax while I’m coding but they don’t always cover everything you need and don’t have the full documentation for things such as WordPress or Expression Engine which we use a lot at kc web design kent.

Dash is a desktop app for the Mac that gives you access to a searchable, offline selection of over 80 API’s. You can download just the ones you need, search for specific words in all documentation and even store your own code snippets and make your own searchable documents. It sits nicely in the menu bar at the top and hides away until you need it. One really nice feature in Dash is when you search it also searches google and Stack Overflow so if it doesn’t find an answer for you in the API documentation then you have the option to see whats there as well. After testing Dash while doing a bit of WordPress dev the other day at kc web design kent I found it extremely useful. It doesn’t always give you what you need when searching but it does make it very easy to look through the documentation without having to search through online codecs and docs.

I’m not sure how useful the snippet manager will be at kc web design – I tend to store all my code snippets directly in Coda so they’re right where I need them – but it could be good for storing large chunks of code for templates and themes.

And, as I’m writing this I’ve just had a notification window pop-up to tell me the WordPress 3.7.1 docs have been updated so it looks like it updates all docs in the background. Bonus!

Speeding up your website design with Cloudflare

Recently, while sifting through Google Analytics data, I noticed that page load times on this particular website design were over 10 secs. This is a long time for a page to load and well over the recommended times. Google uses page speed as a metric now and so slow page load times could have an impact on search listings so having a fast website design is important.

After optimising javascript loading and images as much as possible the website design was still loading quite slowly. To begin with it seemed like the issue could be with WordPress but after a few tests it looked like static html pages were loading very quickly but php files were not. Could this be a server issue? I contacted the hosting company but they seemed to think the load times were ok which could have been a symptom of me being in the UK but the website being hosted in the US. The hosting company didn’t seem to think that would be a problem though so I looked at the website design files and tried to optimise some more. There’s only so much you can do with a website design to optimise speed and everything possible had been done including minifying CSS/JS/HTML, optimising script loading and images, reducing plugins in WordPress, etc. One plugin issue I did come across was the WordPress super cache plugin seemed to be increasing the initial load times so I swapped this for the ‘Quick Cache’ plugin which seemed to make a difference. While looking at the load times in detail it was obvious that the biggest lag was the initial ‘time to load’ which is the time it takes for the server to issue its first response back to the browser. Some of these times for this website design were over 4 secs which seemed a long time to me. With no more help from the hosting company it was time to look at other options.

I cam across an article talking about CDN delivery systems for whole websites which I thought might be worth looking at. CDN’s are well know for serving images and external javascript files but less so for serving whole websites. Cloudflare looked like a very interesting system and with a free account for 1 website it’s easy to test. Essentially, what Cloudflare does is take your DNS and route it through Cloudflare first where it stores cached files of your website. You have full control over all the speed settings and there’s the added bonus of security threat detection as well which they filter out before anything hits your non-cahced pages in your website design. Its a bit scary swapping nameservers and DNS settings but Cloudflare make the process very easy and within 24 hrs my website design was being severed by Cloudflare.

Did it make a difference? Yes, quite a big difference actually. Page load times are now down below 4 secs for the quite large homepage design and much less for the internal pages. For a free service its actually very good and well worth testing out. I’ll keep an eye on my Google stats over the next few weeks to see if average page load times start to come down and hopefully search rankings will go up as well.

CIOB Carbon Action 2050 website design

As well as the website design work I do at kc web design kent I also work with a number of other large companies as a website design consultant and project designer. One recent website design project I was involved with was on a series of projects for the CIOB (Chartered Institute of Building). As well as designing banners and other promotional material I was asked to re-design the Carbon Action 2050 website with our partner company – Hydrant.

Hydrant were the project leaders, I designed the website and it was built by CIOB dev team (i01). Not quite the unified team I’m used to working in and not being able to have a hand in the development of the site was very difficult (and ultimately I think it effected the final product) but all in all it was a great website design project to work on.

The new Carbon Action 2050 website is an important website for the construction industry pushing the boundaries of what can be done to make the building industry more eco-friendly…

The CIOB Carbon Action 2050 toolkit is an action plan of simple, practical steps that can be taken by the Institute, its members and the wider construction industry to reduce carbon emissions from the built environment. Now. Anywhere in the world.

The Carbon Action 2050 website was designed to make the information more engaging and create a sense of value to the information. Reducing carbon emissions in the construction industry is an important mission and so the website design needed to be in keeping with the CIOB global styles but also offer a unique identity of its own while making the wealth of information easy to find and read.

The website is responsive and works on all mobile devices although the exact implementation of this wasn’t carried out by Hydrant or myself.

 

kc web design kent – Why I LOVE iOS 7

In our previous article – kc web design kent – Why I hate iOS7 – I spoke about the reasons why I didn’t like iOS7. Since that article there have been many more reasons not to like iOS7 and its many inconsistencies. Text padding and spacing still really plagues the OS in some very odd places such as when the wi-fi icon disappears and is replaced with the GPRS text. On my O2-UK network the GPRS text is almost overlapping the time. Buttons that would normally have had a border to even them out symmetrically now look very strange and misaligned. In the Messages app you sometimes get the Messages and Contact buttons (Can we still call them buttons? Aren’t they are now just text links?) on either side with a long phone number in the middle with no proper spacing between them so they all seem to merge into one long line of text. At least buttons with edges would have had a visible divider between each bit of text…anyway, before I get on to another stream of iOS7 bashing…

Why I LOVE iOS 7

Yes, I know it seems a bit strange to have one article called “kc web design kent – Why I hate iOS7” and another one called “kc web design kent – Why I LOVE iOS 7” but that’s just what iOS7 seems to be doing to people. Most, if not all, of my iOS7 hates come from a design and UI perspective. Because I am a web designer and UI designer I am being very over critical (Something Apple should have been as well!) on the design side but as with so many Apple products, design IS very important.

After using iOS7 for a few weeks at kc web design kent I am beginning to really like it (design gripes aside) and it’s the overall feel that’s really starting to grab me. In general use iOS7 on my iPhone 4s feels pretty quick and some of the new interactions are very, very nice. The OS feels sharp and quick but fluid and easy to whizz around. Everything feels in the right place (if not looking quite right) and there’s a fluidity and continuity to it that iOS6 didn’t have. Going back to iOS6 now feels a little clunky, like everything is a bit too solid and boxed. There is a lot I miss from the old OS but iOS7 has a lot to like. It’s not there yet though and I’d like to see some of the design and UI niggles fixed in the next big release, but overall, yes, I do LOVE iOS7!

That just leaves one more question though…what is iOS7 like on the new iPhone 5s? Where’s my wallet…

Google web designer tool

So, Google has thrown its hat in the ring of web design tools with Google Web Designer. There seems to be a new web design tool coming out every other day at the moment, some good, some bad, some trying to be that all encompassing tool that will do everything a web designer needs.

I’m not so sure as web designers that we need one tool that does everything. I like using Photoshop. I like coding in Coda. I like using Hammer for local dev. I like using Ghostlab for testing. I’ve tried Adobe Edge Code but it doesn’t beet Coda. I’ve tried other web design tools that claim to make responsive web design easier but they just don’t suite my workflow and hand coding practices. Web design changes so quickly these days that the ‘one tool’ that works today will be next years Fireworks. Not every web design project is the same and some will require tools that others don’t. I prefer to use a tool that lets me focus on the job in hand; Photoshop for graphics, Coda for coding, Gridstep for responsive grids, etc.

Google Web Designer

When I saw the tweet from Project Meteor about Google Web Designer I instantly took a look at the website and was instantly confused as to what the tool was claiming it could do. As the title of the tool suggests – Google Web Designer – you’d think it would be a tool for creating website designs. After downloading Google Web Designer and having a look around it became apparent that this wasn’t a ‘Web Designer’ tool at all but a way to create interactive HTML5 adverts and animations. There are some preset document types for a range of ad sizes and components that you can drag to the page to create sliders and galleries. The other side to the Google Web Designer tool is creating slick HTML5 animations and the Google Web Designer tool has a raft of 3D and other tools for creating some very good animated elements. No drag and drop components here yet but then Google Web Designer is still in early Beta.

Would I call it a web design tool? No. I’d call it a tool for creating animations and interactive ads. I really wouldn’t like to start creating a website with Google Web Designer, it’s just not the right tool for that kind of job. Maybe as the Beta grows it will become a fully fledged web design tool but at this stage its just not. It might come in handy when I need to work on some interactive (Non-flash) banners on an upcoming project so another review then might reveal its hidden charms.

It probably would have been better to call it ‘Google Web Ad Animator’.

Woocommerce – How to delete all products

While developing a series of websites using the great Woocommerce for WordPress the development process we’re using at kc web design kent meant we needed to make copies of existing website designs and then redevelop them into new websites. Part of the process we went through at kc web design kent was changing the design and then adding a different set of products but to do this we first have to delete the existing ones. Adding products in Woocommerce is made very easy with the CSV import suite and updating existing products using a merge CSV import but there is no easy way to delete all products, especially when there are thousands of them. A nice feature in Woocommerce would be a way to bulk delete products but until that appears in the core or until someone makes a plugin the only way to delete products on-mass is to do it directly on the database.

Working directly on the database is always a bit scary, especially if you don’t know MySQL syntax and how to write complicated queries. Because of the way Woocommerce uses posts to store product data and the fact that products can have variations and custom post types, it can make it very difficult to know where all the data is stored. Woocommerce spreads the product data across posts, terms, taxonomies, term_relationships and post meta which makes things tricky if you want to do it in a visual SQL client. The best way is to use a few SQL queries. On this recent project at kc web design kent we needed to delete a lot of products and so after a bit of searching around on Google we came up with these queries.

Before using these remember to backup your database in case anything goes wrong. You’ll also need to change the default table prefix (wp_) to whatever you have used in your database. And remember, its always good practice not to use the default wp_ prefix on any WordPress websites. The queries below also have to be run in this order.

DELETE relations.*, taxes.*, terms.*
FROM wp_term_relationships AS relations
INNER JOIN wp_term_taxonomy AS taxes
ON relations.term_taxonomy_id=taxes.term_taxonomy_id
INNER JOIN wp_terms AS terms
ON taxes.term_id=terms.term_id
WHERE object_id IN (SELECT ID FROM wp_posts WHERE post_type='product');

DELETE FROM wp_postmeta WHERE post_id IN (SELECT ID FROM wp_posts WHERE post_type = 'product');
DELETE FROM wp_posts WHERE post_type = 'product';

kc web design kent – Why I hate iOS7

I hate iOS 7. There, I said it!

There’s been a lot of talk about iOS7 over the past few months and last week it finally launched. Lots of people won’t update yet but working in the web design and iOS design industry you kind of have to. So I did. To be honest I find it messy and cheap looking. The famous gradient icons just don’t seem to work in places especially on the dock with certain colours. The dock – annoyingly (why can’t we choose a colour for the dock?) – takes on an automated colour based on your wallpaper image and sometimes that colour clashes badly with the icon gradients making them blend into the background and look really nasty. On my iPhone only dark backgrounds seem to work well. Anything in a mid tone fights with the icon colours too much. And those folder icons are the same, they take on an automated colour that just doesn’t seem to work and they look a mess. With all the emphasis on nice transparent layers in iOS7 I would have thought that some transparency on the folder and dock backgrounds would have looked very nice.

Another thing that adds to the messy feel of the app screens is the padding around app names. A lot – far too many for my liking – of the app names on my iPhone touch each other. It’s as if there’s not enough padding on the grid and names are overflowing into each other. Now come on, any web designer knows that padding should be set so that grids flow nicely and text names don’t touch or overlap. On every project we do at kc web design kent its one of the THE most basic things to get right.

The icons on my phone look really inconsistent because many apps haven’t updated their icons to the new style. I guess this is only a matter of time and once developers update their icons it will feel more consistent but it shows that the new iOS7 isn’t very forgiving. Because of its very unique style anything that doesn’t use that style now looks out of place. Surely the iOS should facilitate a certain amount of freedom and not dictate what looks good. The old iOS6 seemed to deal with this a lot better and the vast array of different styled icons still looked ok on the screen.

And fonts, oh those fonts. I don’t actually mind the Helvetica Neue, it looks quite nice, but in some places the size is too small and the weight is very light. On some apps the icons at the bottom have text underneath and they’re barley readable. So many people I know that wear glasses find them unreadable. Again, this is basic design stuff and Apple should have got this right.

I know these seem minor gripes but as a web designer at kc web design kent I have to deal with and make sure these types of design rules are done right every day, and I make sure they are. Apple, with all that man power and money, could surely do the same. At kc web design kent I’m looking forward to working on our next iOS app design project so that I can play around with the new styles.

Lets hope some updates appear over the coming months that fix these teething problems. And on a brighter note, lets not forget that iOS7 is a huge update and a massive leap forward for the worlds leading mobile OS. When I think back to the first iOS it was revolutionary, but it had a lot of issues too. It took a few years and a few iOS updates for it to feel like a proper iOS and I feel iOS7 is the same. It’ll mature and grow over the next few years.

Expression Engine plugins – GWcode Categories & Low Seg2Cat

At kc web design kent we’ve spent the last few months building a new website for a well known sealants and glues company (Not Unibond, the other one!). It’s a large project and the final website design will allow users to view a lot of products in a lot of different categories. Products can be listed in multiple categories such as products, brands and applications and be shown on the website in lots of different places. To accommodate the large number of categories kc web design kent needed to build a flexible, intuitive navigation system that was easy to find products and easy for the client to administer from the backend. As we were using Expression Engine for the CMS we knew it could handle this type of layout but what we found was that the structure wasn’t so intuitive for the client and the categories started to get very messy and not easy to code flexible navigation systems.

Expression Engine has a good community and a wealth of plugins so after searching around we came across GWcode Categories. This simple plugin makes it incredibly easy to create complex category navigation systems with Expression Engine and meant that here at kc web design kent we could construct some very flexible templates to deal with products from any number of categories and show relevant nested navigation levels without having to build duplicate templates for each category. The flexibility it gave us has made building this new responsive website much, much easier than using the standard EE tags.

While building the navigation systems we also came across some small issues with using the EE {segment} variable and so after a bit of Googling we came across Low Seg2cat. Again, this simple plugin opened up a world of possibilities and in conjunction with GWcode Categories enabled us to create some very complex templates and category navigation systems.

Finding solutions like the two mentioned above are why here at kc web design kent we love using Expression Engine. Its hugely flexible, has great support, is client friendly and cost effective. If you need a new website built on one of THE best content management systems available then give kc web design kent a call today.

Rushracer Facebook App

kc web design kent were asked by a leading major travel brand to help create a Facebook App competition for the up-coming launch of the new Ron Howard (A Beautiful Mind, Apollo 13) film – RUSH.

The Rushracer Facebook app was design by the in-house design team at this leading travel brand and built and coded by kc web design kent. The Facebook app was built using the Facebook app API and features some advanced SVG animations to show the stage of the competition round an F! race track. Users can vote on which team they want to win – Team Hunt or Team Lauda – and prizes are won at different stages of the game. All the standard social media mechanisms where used to promote the game through Facebook and Twitter and the competition will run throughout September.

kc web design kent worked very closely with the in-house design team and have created a compelling app targeted at a specific age range. For more information about the Facebook app and the new RUSH film please visit the app.

Visit Facebook App

Google Chromecast – Apple TV killer?

Being so busy at kc web design kent doesn’t leave much time for relaxing but when I do I love to watch films. Big screen, big sound, bliss. For a while now I’ve been looking at how to improve my media centre and get a setup that allows me to watch HD movies whenever I want, stream catch-up services and view my own media and music.

There are a LOT of devices out there that try to be full on media centers – small ones, big ones, expensive ones and truly terrible ones! Because of my day job as a designer at kc web design kent any system I buy has to be user friendly with a great UI design which seems to rule out 90% of the list. Why are home media interfaces so bad? All they need to do is connect with the user and make it easy to find things – sounds simple yet most companies get this wrong. Of the few that get this right, their media centers never quite hit the mark, there’s always one component I need missing. Living and working at kc web designer in the uk I want uk catchup tv such as BBC iplayer and 4OD as well watching films from LoveFilm but there are very few systems out there that allow all of this. Most seem to have Netflix but in the uk there offering is pretty dire.

I’m still considering an apple tv but until they allow apps on it then iplayer and lovefilm are a dream. Recently Google released the Chromecast. At first glance it seems to simple to be worth looking at. After looking at how it works and the potential for add-ons then it might become a contender. It’s such a simple idea – and a cheap one looking at the £23 price tag – that it just might work and take the market by storm. Google have had 2 other attempts at this market so time will tell but at the moment it looks interesting and at this price is not going to break the bank to try it. It might also be an interesting way of showing showing a simple stats page in the browser on the TV in the office at kc web design kent. Who knows what interesting third party apps will be created by the community!

I don’t think the perfect media centre is out there just yet but things are changing and google might just push apple into changing the apple tv for the better.

WordPress e-commerce website design

WordPress has come a long way since it’s early days as a simple CMS. At kc web design kent we used to build bespoke e-commerce systems for big wholesale clothing companies that would take months to develop and integrate with internal stock management and ordering systems. These days we don’t do many bespoke e-commerce solutions but we do still create e-commerce website design here at kc web design kent. The costs involved in creating a bespoke e-commerce web design solution are high and can be prohibitive to most businesses so these days we tend to use different solutions.

There have been some very good e-commerce packages in recent years including the noes debunked Trading Eye and the very good, and still with us, Lemon Stand. At kc web design kent we’re experts in WordPress and Expression Engine and these top class content management systems can be used for e-commerce website design. Having created a number of e-commerce website design solution with both of these systems I have to say that WordPress comes top of my list.

The ease of setup and user friendly control panel makes WordPress ideal for small to medium e-commerce solutions. With the addition of the fantastic Woocommerce plugin a feature rich e-commerce website can be designed and built in a very short time and at minimal cost to the customer. The Woocommerce plugin gives website owners a rich suite of tools to deal with products and a complete order management system. Building this on top of WordPress means a whole e-commerce website can be built that our customers can have full control over including all page content, news sections and shop. Woocommerce is built by Woothemes and has a wealth of additional plugins to deal with all sorts of e-commerce features such as payment gateways, invoicing, Google product feeds, EU VAT, wish lists and anything else a modern shop needs.

Even though the combination of WordPress and Woocommerce can enable us to create fantastic e-commerce website designs, like all good e-commerce websites, it’s how that functionality gets translated into a good user experience that matters. Just grabbing a free theme and creating a shop isn’t always the right option. Making sure the buying process and user interface design is intuitive and sticks to standard design patterns is the key to creating a good online buying experience. At kc web design kent we’re experts in e-commerce website design and user interfaces and our bespoke designs will make sure your e-commerce website succeeds.