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.

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’.

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.

kc web design make hand-crafted websites

“kc web design make hand crafted websites…” – that’s what it says on the new kc web design kent homepage. But what do we really mean by hand crafted website design?

There’s been a lot of talk on twitter recently about the word “craft” with a few top web designers saying it shouldn’t be used in the web design industry but I disagree. Kc web design kent do make hand crafted website designs. The word craft, for me, means time, care and attention to detail and doing that with skill and knowledge built up over many years.

At kc web design kent we don’t use tools like Dreamweaver that try and do it all for you, we hand code HTML and CSS from scratch in a text editor like Coda. One thing that has always stuck with me in the 15 years I’ve been doing web design is something a wise old (no longer with us sadly) web designer said to be when I was just beginning…”the clue is in the code”. Hand coding using skill and knowledge means you know the code, you know what you’re writing and that makes it easier to debug. Using a web editor that does it all for you but generates unreadable code isn’t much help in the long term. It pays to learn the basics of web design coding inside out as this allows you to craft your code or design.

I’ll admit, it’s not really the same as spending a whole lifetime learning to craft axes from raw metal and hickory, but I do believe there is a craft to learn and to do it right takes time and skill. Building websites and creating pixel perfect website designs takes time and effort and to me that’s a craft.

If you want hand built website, designed and coded with skill, care and attention to detail then call kc web design kent today.

kc web design kent – CSS notes, advice and guidelines

I enjoy writing CSS here at kc web design kent but sometimes in the thick of development my nice neat CSS documents can become a bit, well…messy. Most of the time I’m working alone on web design projects at kc web design kent so I always think it won’t matter too much. But then I go and open a CSS style sheet from and old web design project to make some changes and I always have to edit the “messy” bit I left in. Still, I only have myself to blame.

The other day I came across this fantastic article on github about how to write, layout, structure and use proper selectors in your CSS documents. There are quite a few of these types of articles knocking around but for some reason this one seems to strike a cord with my style of writing and thinking about CSS in web design. This article is well worth a read and a bookmark and I can see myself coming back to this again and again.

From the simple contents structure to how to indent and layout your document in a well ordered, easy to read manner with nicely formatted comments, indenting and hierarchy (cascade) for easy finding of CSS styles in a structure similar to your HTML doc it all seemed to make more sense than previous articles I’d read. As well as small web sign projects at kc web design kent I do work on other large website design projects in bit teams of people and have never rally seen a perfect way of dealing with CSS doc layout. I’m very keen to try and stop my CSS docs becoming messy on web design projects at kc web design kent, and to try and clean up team based CSS doc writing, so I’m going to try and stick to the methods in this guide for a few months and see if it makes a difference to my web design projects and those larger team based projects to.

dribbble freebie – Stacked note box icons

It’s been a while since I’ve done a dribbble freebie so with a few minutes free today I decided to pull out an old logo and do another dribbble freebie for the web design community. So, kc web design kent is proud to give out another dribbble freebie – Stacked note box icons.

Eagle eyed web designers may notice and striking similarity to the logo for Noteboxapp.com. Well, it was kc web design kent that built Notebox back in 2010 and as the web app is no longer running as a service I thought the logo could be used for other things. I’ve always liked the logo we designed for it so maybe other web designers could put it to good use and use it in other web design projects. There’s probably a tonne of old designs in the kc web design kent vaults that could be used for dribbble freebies so over the next few weeks I might dig out some more to share with the web design community. And while working on lots of front end coding it’s nice to throw a little bit of design into the middle to break things up a bit!

If any website designers out there do use this dribbble freebie for a design project please leave me a comment on dribbble and let me know where it’s been used. It’s always nice to see how other designers use little design snippets like this and it’s fun seeing how it ends up on those “40 best dribbble freebie” type blog posts!

Download the Dribbble freebie

New iMac 27″ fusion drive review

A few months ago at kc web design kent my trusty 2009 27″ iMac started playing up. The screen started flickering in the left bottom corner and over the new few weeks it got progressively worse until one day the screen went black. Gulp! Deadlines. Panic…

Luckily, I managed to get the screen working again, albeit with only one side working effectively. It turns out there are two LED’s in the old iMac screen and the one on the left had blown sending that side of the screen into a grey muted mess. It’s actually very hard trying to design when one side of your screen is white and the other dark grey…very confusing! We’ve been using iMacs’ here at kc web design kent ever since they first came out and for a web designer they are fantastic, especially with the 27″ screen. I also use a second 24″ screen as well which gives a huge amount of screen space.

After a quick scramble in draws for old documents it dawned on me that the poor old iMac was out of Applecare support and destined for the back room. And so a spangly new iMac was purchased.

The new iMacs’ are a thing of beauty. Much thinner than the old ones and they deal with heat a LOT better. The old iMac could BBQ sausages on top some days! This time round I opted for the new fusion drive which is a dual 1TB HD and 128GB SSD and I have to say it is fantastic. The iMac is an i7 stacked full of 32gb of ram with the OS on SSD and it absolutely flies! The start up time is unbelievable, it literally takes less than 10 seconds to start the OS then another few seconds to start a few apps. Compared to my old iMac its a million miles away. The SSD also makes OS tasks ultra fast and frequently saved files also get the SSD treatment as the OS learns what you do most which makes saving those files fast to.

Being a freelance web designer in Kent means every minute of my day has to be well spent and the speed of this new iMac means I’m saving time on every task. They’re not cheap, but when it’s your main business tool it’s worth spending the extra cash.

Apples iOS 7 redesign

It’s been everywhere this week. Apples’ new iOS 7 design has sparked much discussion in the web design world and the interwebs are rife with comments, critique, moans and admiration for the new iOS design. Designing iOS apps as we do here at kc web design kent means we have a vested interest in what happens with Apple products. A huge redesign of the core interface means a lot of changes for app designers in the future so its something that everyone in the industry is watching.

The new design is a radical step forward away from the current iOS design and pretty much everything about iOS7 is different from whats come before. Over the past few years there have been lots of moans and grumbles from the design community about the over-use of skeuomorphic design elements in iOS and OSX. Far too much leather, linen and stitching. So it goes as no surprise that when Jony Ive took over the team for iOS UI design people thought things would change. And so they have! iOS 7 is completely different.

On the whole I think the look and feel of the new iOS is good. It has given it a new lease of life which was badly needed as the original feel was becoming dated. But, even though its still in beta there are things that are still very wrong from a design perspective. The true beauty of a design is how it interacts so until we can get our hands on a useable device it’s very hard to give a proper opinion and I’m sure it will be gorgeous to use once it’s on the phone. We shouldn’t be judging the new iOS purely on the way it looks but that is a big part of the new design. I think it’s getting such a bad wrap from the design community because it’s such a radical change but things do change and they have to change to stay fresh and exciting and I think iOS7 is definitely fresh and exciting. It still has fundamental flaws though.

The art of creating wonderfully complex iOS icons has turned into it’s own art form over the last few years but Apple have changed that now with the new look flat app icons. The new look app icons are very flat, with no gloss or shadow and some of the default app icons have horrendously bad gradients. I’d like to see them with far more subtle gradients or no gradients at all to be honest. The other problem with the new iOS design is the font. It looks like Helvetica Neue Light which kind of works but doesn’t offer up its own unique style to the user interface. Surely Apple could create their own unique iOS7 font that would give it a unique identity and really shout ‘this is iOS7!’.

Overall I do like it. Apps will change and adapt to the new UI design and here at kc web design kent we’ll be looking differently at any new apps we design now for iOS. If I designed an app now I’d use some of the new UI design but incorporate some of the old style as well. Hopefully it will evolve over the coming months and by Autumn Apple will have ironed out these inconsistencies and iOS7 will be a lovely new UI. Lets hope Apple listen and adapt and keep iOS at the forefront of mobile devices.

Ghostlab review

While struggling with Adobe Inspect today at kc web design kent on a new responsive web design project I saw a very timely tweet by Andy Clarke…

Goodbye Edge Inspect, you subscription based son of a bitch. Hello @ghostlabapp, my new best friend.

I’d never heard of Ghostlab before and had no idea what Andy was talking about but the mention of Adobe Inspect got my attention, especially as I was battling with testing a website design in multiple browsers on multiple devices.

After a brief look at the Ghostlab website (which is very well designed and worth a look just for that!) is was obvious that this app would be incredibly useful at kc web design kent. Ghostlab is an alternative to Adobe Inspect that makes testing responsive website designs very easy. Once the Mac app is installed you can open an existing URL or drop a folder onto the interface and create a new testing project. Once you click on the project you get to open it up in the Ghostlab browser which creates a local server to view the site on.

Now that the project is open and viewable on the local server you can view the website in any browser and on any device just by going to the local IP address shown in the UI. Not only is it very easy to view a single site on lots of devices but whatever you do on one device replicates through all the devices and browsers which is brilliant if you want to test clicks and forms and don’t want to have to repeat a set of tasks in every browser.

It might sound a little complicated but it was simple to setup and get using and straight away I had my test site open in lots of browsers and on my iPhone and Nexus. Tweaking CSS and reloading the page was made even easier because as you reload on one browser it does it on all of them! Ghostlab is well worth a try and its now become THE app we use at kc web design kent for testing our responsive website designs.

kc web design kent are experts in responsive website design. If you need a new website that works on all devices then give us a call.

Web design consultancy for Fujitsu.com

kc web design kent are absolutely delighted to be working as web design consultants for Fujitsu.com, the global website of the electronics giant. After a successful launch of the new UK blog website kc web design kent were asked to come in at a high level to consult on web design issues on the global Fujitsu.com website.

kc web design kent will be working very closely with Progress SEO to ensure any design and content related changes to the Fujitsu.com website are made based on factual design and SEO data. All web design and layout changes to the website will be consulted over and important design decisions validated, tested and checked.

Asked to become web design consultants at this level is a huge responsibility and one that we take very seriously here at kc web design kent. Working alongside Progress SEO is always a pleasure and we’ll be using this partnership to improve and re-structure specific sections of the Fujitsu.com website starting with the sustainability section and then moving through other parts of the Fujitsu.com website when content or web design structure needs changing.

The Fujitsu.com website is huge and encompasses over 100,000 individual pages so changing anything on a website this large has to be thought out very carefully. The layout, design and content all have an impact on the user journey and how effective the information is digested so even minor changes at this level can have a massive impact, especially on a website this large. The importance of good page structure, content hierarchy, user flow, information retention and visual cues and call-to-actions cannot be underestimated and it is our job at kc web design kent to make sure any changes on the Fujitsu.com website are changes that will improve the experience for the user and improve lead generation and SEO rankings for Fujitsu.com.

ThermaSolutions web app design

kc web design kent are proud to announce the launch of a large web app design project for ThermaSolutions. Back in early 2012 kc web design kent were contacted by ThermaSolutions and asked to produce an iOS app for the building and construction industry. After many months of hard work on the iOS app the project was shelved due to various reasons but kc web design kent worked hard with ThermaSolutions to bring something to market that far exceeded the original project scope. ThermaSolutions continued to evolve over the coming months and has now been launched as a web app subscription service.

kc web design kent designed, built and crafted the web app and the new website is now live. The ThermaSolutions web app was built using Expression Engine with the Membrr subscription module to handle the payments and subscriptions. The web app design is fully responsive to enable it to work on all mobile devices as well as desktop browsers and utilises advanced HTML5 and Javascript technology to allow the web apps to work in offline situations for construction staff out in the field with little or no connectivity. All parts of the web app work independently as stand alone apps that can be saved to the iOS device home screen and work like normal iOS apps. This enables the user to have access to a remote web app thats stores their reports but still be able to use the reporting tools and calculators when offline.

An advanced subscription system and seamless payments were integrated into the web app to provide easy access and signup flows for the user. Over the next few weeks kc web design kent will also be producing a hybrid iOS app that will allow users to download selected parts of the web app directly from the Apple app store.

Visit Website

Potable Water Solutions – Hydro voyager 3

We had a very interesting call at kc web design kent last week from Potable Water Solutions. Potable Water Solutions make the Hydro Voyager 3 – a new solution for purifying contaminated water.

At kc web design kent we love helping out with good causes and Potable Water Solutions needed a quick landing page created for their new water purification system. We had very little time to get something designed for them and needed to take complete control of the whole process so that Potable Water Solutions didn’t have to worry about a thing. We quickly designed a responsive website design landing page that would show some basic information on the Hydro Voyager for potentially interested parties and allow them to make contact. A fuller, more detailed website will be coming in the future but for now anyone interested can at least see how wonderful this project is a what a difference it could make to people in situations were water is scarce or not of great quality.

For more information on this wonderful project take a look at the Hydro Voyager 3 website created by kc web design kent.

Callagenix website design

kc web design kent were approached by Callagenix back in October 2012 to redesign their current website. Callagenix are a supplier of telecommunication services to businesses and they need to redesign their slightly dated and content heavy website and bring it up to date with a responsive website design. The challenge was to allow the user easy access to the wealth of information on the website but at the same time making it easy for the user to quickly get to information about products and services and allow them to enquire of buy online.

The new website design created by kc web design kent was built on the fantastic Expression Engine and Zurb Foundation with advanced functionality added with bespoke PHP. Plugins were used to enhance the website features and make sure previous blogspot posts could be easily imported. Advanced article tagging for the news section, offsite backups, import and export routines, social media integration and dynamic categories and call to actions were all integrated using Expression Engine. A lot of hard work has been put in to making sure old content was rewritten and external blog posts were integrated into the new website. SEO was a major concern after failings with the previous website and SEO company so content structure was redesigned and advanced SEO integrated into Expression Engine to allow Callagenix staff to produce new pages and articles that would maintain good SEO presence and help improve page rank in organic searches.

The responsive website produced by kc web design kent allows the website to be viewable on all mobile and tablet devices which is very important for a website in a technology based market place. With mobile devices rapidly becoming a large percentage of browsing users its imperative that all modern website designs are tailored to these devices.

After 5 months hard work at kc web design kent the new Callagenix website design went live this week.

 

Visit Website

Yohondo iPad app UI design

kc web design kent were contacted by the lovely John and Jane from Yohondo a few months ago about designing the user interface for their new iPad app. Yohondo have spent the last 12 – 18 months designing and building a skeleton app that will completely change the way people learn graded music lessons. A huge amount of research and testing had gone into the app and kc web design kent were offered the task of creating and designing a beautiful user interface for the iPad app that would help bring all that research together into a good looking, usable app.

kc web design kent designed a completely new user interface that uniquely combine the research by Yohondo with an intuitive and user-friendly design. Ease of use was paramount in the design process as well as creating a user interface that compliments the user flow and actions throughout the app. The Yohondo ipad app is aimed at a younger audience, as well as adults, and so small elements of gameification were built into the design to create an experience that kept users coming back and help with progression through the lessons.

The iPad user interface design that kc web design kent have created is unique in this market place and was designed to fully compliment the hard work undertaken by Yohondo in building a world class iPad app. The app will be completed over the coming months and launched in the summer so watch out for it in the app store. Next on the list will be a brand new website for Yohondo design and built by kc web design kent.

Why staying on top of SEO writing is important

We all know we have to do, but finding time to write content for SEO can feel like a chore especially when you’re working all hours on client web design work. Keeping on top of SEO writing and keeping your website full of fresh new relevant content is hard work and something that has to be maintained. We’ve been so busy here at kc web design kent for the last few months that I’ve let the content writing slip a little. I was writing 2/3 articles per week which really helped with the ‘web design kent‘ keywords and meant that kc web design kent were on page 3 for ‘web design kent‘, page 1 for ‘freelance web designer kent‘ and a few others. Unfortunately, after a month or so of not writing many articles and letting things slip a little we have now dropped down to page 6 for ‘web design kent’! Thats a few pages down is as many weeks!

For any online business, staying up in the organic search results is extremely important and this little (unscheduled) experiment shows that you HAVE to keep up with the content writing for your listing to stay consistant. At kc web design kent we know have a hard slog in front of us to get back up to page 3 for ‘web design kent’ and our other search terms. Sometimes, when you’re working hard it difficult to think of things to write about. Checking news websites and setting up Google alerts on related topics can help find inspiration, then it’s just a case of finding the time. Setting aside 15 minutes and writing a new article first thing in the morning is the best way. It gets it done before any other distractions take over. If you find inspiration hits then don’t forget to write as many articles as you can, you can always save them or schedule them for publishing later when you’re a bit stuck for time.

So, the lesson learnt is to stick with it, keep on writing regular articles and stay up in the search listings.