News, web design articles, web design tips & tricks archive

Over the last 15 years e-commerce has changed a lot. In that time we’ve built many, many different types of e-commerce website design – from huge bespoke shops integrated into warehouse systems to the modern day Woocommerce stores. Even though e-commerce has changed one thing seems to have stayed staic – the payment providers.

The two main payment providers in the UK – excluding Paypal – have been Worldpay and Sagepay (previously Protx) and most of the e-commerce website design projects we’ve undertaken have used one of these payment providers. My personal preference is Sagepay but they’re both very similar, and they both charge a lot of money for the privilage of using their systems to deal with card payments.

E-commerce website design with Paymentsense

Paymentsense are a new kind of payment provider. They offer the same services as the other leading players in the market but with a big difference – they charge far less! For small businesses starting out on line the costs of taking payments has always been an issue which is why many businesses stick with Paypal (although even they aren’t cheap these days!) and don’t go near ‘proper’ payment gateways. Paymentsense make it easier for new businesses to dip into e-commerce without spending a fortune and their payment systems are very, very good. While some of the leading payment providers are still not supplying responsive payment pages that work on mobiles, Paymentsenses’ pages all work well on mobiles. They also supply card readers if you have a physical shop, have great support and can save you a huge amount of money on transaction fees alone.

Having recently worked with a customer changing from Sagepay to Paymentsense on a e-commerce website design project I can honestly say the integration was easy and support fantastic. When I had an issue with the way country codes were being dealt with by Paymentsense they were open to feedback and quick to make changes. Exactly what you need as a developer! And my client should be saving over £1000 per year in transaction fees.

If you’re interested in saving money on e-commerce website design and swapping over to a modern payment gateway then get in touch. It doesn’t take much to swap your website over or change payment providers and you could be saving yourself a lot of money at the same time and providing your customers with a better expereince.

Owning and running a small web design studio can be very hard work at times. I often work very long hours, sitting at my desk for long periods of time absorbed in designs or working on complicated UI problems or bug fixing code. I’ve also been a website designer for far too many years now and although I have the perfect studio in a wonderful location I still lead a very work focused life. Unfortunately, this has taken its toll over the years and back problems have become a regular occurrence.

We’ve been in the current kc web design studio for over 7 years now so it felt like time for a revamp and refit. As part of the studio redesign I looked into sit/stand desks as a way of fighting the constant desk bound nature of working on computer screens. There’s a huge amount of information on the negative health effects of sitting down at work for too long. It seems like sitting is the new smoking!

There are a number of sit/stand desks on the UK market and all of them seems to be at quite a high price of normally over £1000. Fortunately, IKEA have just entered this marketplace with a sit/stand for below £500 that is very, very good.

The IKEA Bekant sit/stand desk can be bought in a number of different configurations and the one we went for was the black corner version. The desk height is adjusted by a small keypad and motors built into the legs of the desk move the desk up and down to your required height. The motors are smooth and quiet and easily move the desk height even with 2 monitors and an array of drives and desk accessories. It looks just like any other desk and you’d never really know to look at it that it moved. Some of the other sit/stand desks look monstrous with motors and leads everywhere. The IKEA desk is simple and elegant and the style fits with other furniture that IKEA supply so we could kit out the whole studio in matching kit.

Everyday life with a sit/stand desk

There are lots of articles out there that talk about the health benefits of sitting down less so I won’t go into that here. I’ve been using the new desk now for about a month and it has completely changed the way I work and my lifestyle in the studio. I rarely sit for longer than a few hours a day now, the rest of the time I’m stood with the desk at chest height. It takes a little brain adjustment and a few days to get used to things but standing now feels much more normal. Sitting down for only a few hours now feels wrong, static and lethargic. Standing at a desk keeps you energised and moving around, your body posture is better and there’s no stress on your back. I’m sure standing all day would eventual have a negative impact on knees or other areas so getting a good balance is key. I tend to sit for a few hours in the morning then stand for the rest of the day, especially in the afternoons when you can have a bit of a lull, and then back to sitting in the evenings when things are quieter in the studio. I’m now a complete convert to standing at work and after a month or so I’m already feeling the health benefits and my back is causing far less problems than it did before. I’d recommend trying a standing desk to anyone that works long hours in the web design world or any office environment where you tend to sit for long hours at a desk.

A web app and website built by kc web design kent in 2013 has won it’s second award (It previously won HPM App of The Year 2014). The ThermaSolutions web app, designed and built here at kc web design, has come second in the HEATING & RENEWABLES AWARDS 2015 – Training Initiative app of the year category for its built in ‘education centre’ app that allows teaching organisations to set tests for heating and boiler engineers. Teachers can set the criteria and the app will give calculations and answers for testing. The idea of the ‘education centre’ was to envelop real life scenarios into a classroom environment involving and engaging students of all ages via a PC or overhead projector. Students can decide what rooms they get tested on (each with varying degrees of difficulty) from a floor plan of a real house. From there they are given the background information needed to carry out the test. They can then hold open discussions about their results, and from there the system prompts the class to run the same calculations through the on board heat loss app ‘ThermaCalc’. Here they will see how quick and easy the same calculations can be done as well as seeing additional features such AquaCalc for hot water sizing and SolarCalc for designing entire solar thermal systems. Our two phased approach to testing a class reinforces the ‘long hand’ approach to radiator and boiler sizing, as well as familiarising classrooms with the use of mobile tool technology prior to their involvement in the workplace. Integrating productivity apps such as these into a classroom environment enhances the reputation of the industry at a grassroots level. Our apps are still the first and only that not only work the exact calculations contained in the ‘Domestic Heating Design Guide’ but can be used on any mobile device including PC’s.

The Training Initiative app of the year was a tough category this year and we beat the likes of Worcester Bosch and Baxi Potterton Boilers who are industry leaders with long histories in the industry.

The awards black tie dinner is on the 10th September.

A few weeks ago I saw a tweet by Paul Boag that mentioned a new project management tool for freelance web designers. I’ve been on the lookout for a simple project management tool for some of the web design projects I work on – some directly for clients but others where I work with a group of remote workers. I’m always a sucker for a new bit of software to play with so I had a look at the Kirby Project Hub. The website looked great but I couldn’t see a way to download or signup for anything and it turned out the product was still in development. I contacted the developer, a lovely guy called Gunther Groenewege over in Paris, and he sent me a preview version to try out.

The Kirby Project Hub project management tool for freelance web designers looked great and seemed to work very well for a single client structure where you could add notes to the project and keep your client up-to-date. It didn’t seem to work as well for a small team as you couldn’t log in and see multiple projects. After a few emails back and forth to Gunther we’d worked out a way of having better admin views in the front end so that an admin could see all projects. Bingo! It now worked perfectly for a small team.

A few days later and a few more bug fixes and Gunther launched the Kirby Project Hub project management tool for freelance web designers to the public, and it looks great.

For a simple tool to keep in contact with clients and let them know whats happening with a project it works very well. It looks very clean and simple and is easy to customise for your company brand and colours. It uses the Kirby content management system and is essentially a theme for Kirby so you need to make sure you buy a license for Kirby. I’d never come across Kirby before but it looks very interesting. It’s a flat file based content management system that seems very easy to use and might be worth using for clients that only need a basic CMS and not the full power of something like WordPress. The Kirby Project Hub also looks great on mobiles!

You can get more info and download the Kirby Project Hub from the new website.

Second only to password hell comes data backup hell. In an ideal world I’d have super fast broadband (<rant>Yes, I’m pointing the finger at you BT, you who deemed it not economically viable to put in fibre broadband in our village yet less than a mile up the hill you did! Now thats really supporting British rural businesses!</rant>) and back everything up to the cloud in the blink of an eye. In reality, my 6mb internet connection manages to push up a few hundred MB of changed data per day on a regular backup to Amazon S3 for the most important bits of data and work. The rest is resigned to local hard drive backups on Time Machine.

Over the years I’ve had a lot of different hard drives in the studio at kc web design kent and believe it or not, after 10 years, some of them are still going strong. Others haven’t faired so well. A Western Digital My book drive literally lasted a few months and never really worked well from the start. I’ve never bought a Western Digital drive since.

The drives that are all still working and never seems to miss a beat in the office here at kc web design kent are all made by Lacie. No matter what other drives I try I always come back to Lacie drives because, for me at least, they seem so reliable. My latest Lacie hard drive is the one pictured above, a 4TB LaCie Porsche Design Desktop Drive, which is a new redesigned version of the one they produced in 2003 (which I still have and is still going strong). I like the simple, elegant design that looks great on your desk and the ease of use. It works perfectly with Time Machine and when its on and backing up you hardly notice its there.

The price of hard drives has come down considerably over the last few years and for 4TB of drive space its now only £150! At that price its silly not to have everything backed up. Don’t wait until you loose everything, by a hard drive and at the very least backup everything to that. And if you can do cloud backups then do those as well. Don’t loose important data or those baby videos you forgot about on your laptop because you didn’t back up, buy a hard drive and do it now!

Is your website design responsive? Does your website work well on mobile devices? No? Then you need to seriously consider making sure your website is mobile friendly otherwise it could have an effect on your search rankings. Google have announced that from 21st April all sites will be tested under a new responsive algorithm to see if they perform well on mobile devices. Sites that are responsive and do perform well will get a little rankings boost.

According to the Google Webmaster blog…

“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

In an age where Google deem mobile sites to be important enough to rank them differently and the percentage of mobile browsers is creeping over 50% in some sectors it’s time to make sure your website works well on all mobile devices.

What is responsive website design

Responsive website design means creating a website that adapts it’s layout to different screen sizes. With the large number of mobile devices in users hands it isn’t enough to just create a single mobile phone version of your website any more, it has to work well on all sorts of different devices. In some cases your website might be being viewed on 60 inch TV screens right down to small smartphones and it needs to look good and work well on those devices and everything in between. Responsive website design is a set of tools and design methodologies that help us create and build websites that adapt and scale to any screen size providing the best user experience possible on any mobile device.

We’re experts in responsive website design

At kc web design we’re experts in responsive website design and can redesign and build your website to make it mobile friendly. Give us a call today on 0845 3631162.

Google has great tools for search engine listing, analytics to help see what people do on your website all sorts of ways to bring in leads via pay per click ads. But what if potential new clients were coming to your website and not using your nice new contact form or picking up the phone to call you?

A lot of hard work goes into creating a good website design and making sure that website appears in Google for the right key words and phrases so that the right kind of customer comes to the website. Some will make contact but others may not. There can be any number of reasons for users not making the leap and engaging with that crucial call to action – they may have just been browsing and collecting names for later, they may have run out of time or just didn’t get the right feeling – whatever the circumstances, it means one more potential new client has slipped away.

When building and designing websites there are lots of ways to make sure users engage with the website in the right way and interact with call to action points leading them through the website into contact pages or buying processes. But what if the users that didn’t make contact for whatever reason could be found and contacted?

Lead Forensics is a tool that can be added to a website that gives you that missing piece of information that you don’t get from any other analytics tool – it tells you exactly which companies have been looking at your website and gives you their contact details so you can contact them. It seems like such an obvious simple piece of information to have but the power of knowing who has been on your website and having the details to contact them is very valuable.  Now, this isn’t going to suit everyone, for instance it won’t really work for consumer based websites, but it would work very well for business to business organisations that are looking to work with other companies.

KC web design are registered supplies for Lead Forensics and can set up a demo of the software on your very own site for a week so you can see the value in knowing exactly who is visiting your website. Give us a call and set up a demo today and tap into an amazing source of new business leads.

Intranets can be a complicated beast. Multiple departments fighting for importance can cause important tasks and information to be spread all over the content structure. When designing a successful intranet website design there are a few rules and recommendations that will help build a user tool for the user rather than a departmentalised catalogue.

Workshops and research – If possible undertake internal workshops and research to try and understand what you user need. What do they use the intranet for? What daily tasks on the intranet help with their day to day jobs? Why do they not use the current intranet? Most research and workshops with users and staff highlight needs for workplace solutions – task that help in daily jobs. Giving these high frequency tasks a greater priority in the navigation hierarchy will help the user find links quickly and easily. Taking a task based approach rather than something that mimics the organisational structure means more logical groupings that will transcend any organisational changes within departments at a later stage. This type of structure is also easier for the user as they’ll be going to the intranet with a specific goal or task in mind.

Navigation – Intranets can be full of information and so finding something quickly is very important. Using large menus can facilitate large numbers of sub page links in a format thats easy to scan through. Using large mega menus can also help by giving space to add descriptions below links to make it clear what info pages contain. Sub pages can also benefit from being in multiple top level categories, making them easy to find especially when a site goes through significant structural changes, as it would still allow users to find content that has moved.

Frequently used tools/Quick links – Intranets a full of tasks and so having an easy way to access the most used or common tasks is a real benefit. A quick links navigation feature could show more user focused tasks and/or frequently accessed pages such as Update my profile, My emails, etc.

Large footer area – A large footer area can be a good place to list lots of key page links in a format thats slightly different and easier to scan than a top level drop down style navigation. Footers can also hold key contact information, forms and other ways of getting in touch with staff.

Improved wayfinding – Many intranets have no clear way-finding mechanisms or breadcrumbs so once you’re on deep pages its hard to know where you are and how to navigate back. Intranets should have good breadcrumb trails and navigation highlighting to help with way-finding as the depth of information and site structure can be quite complicated.

Home page widgets – A good way of engaging with users is to show them what other users are doing. The homepage may benefit from content areas showing Popular Pages, Most Viewed Articles, etc so that important and widely used pages in the site automatically bubble up to the top level and are easily accessible from the home page. As well as news & events content areas the homepage may also benefit from other areas such as a small directory listing of some of the more common pages and tasks (with descriptions), an area showing news from a specific department based on the logged in users profile, noticeboards, etc.

With a simple task based approach, making sure key content is easily accessible and giving users a clear content hierarchy and flow an intranet can be designed to fulfil most organisations goals.

At kc web design kent we can help redesign your intranet using these simple rules. Get in touch today to discuss your intranet project.

We don’t do a huge amount of product reviews on the kc web design kent website (but please do send us stuff if you’d like us to review it!  ;o)  but when we get a product as good as this its hard not to write about it.

I recently bought a new iPhone 6 which felt like a huge leap forward from my old iPhone 4s in all sorts of ways, most notably the size. The iPhone 6 is flippin’ huge compared to my old phone! I even have to make sure I choose trousers with big pockets so it will actually fit. I hope this trend for big phones slows down, they really don’t need to get any bigger and the iPhone 6 plus is just unnecessary in my opinion. But we’ll leave all that for another review post!

To protect my – very large – new iPhone 6 I wanted a new case that would offer security and space for other bits and bobs. I’ve always been a big fan of the BookBook cases as they offer space for money and cards and considering the size of the new iPhone it would be silly to have a case for that and a separate wallet, there just wouldn’t be enough room in my pockets! Sadly, BookBook cases we’re only available for the iPhone 5 at the time so I looked around for a similar style wallet case and eventually came across the Pad & Quill luxury iPhone 6 case.

I’ve a real soft spot for anything handmade. The work that goes into creating something of high quality by hand makes for something very special. These Pad & Quill cases are hand made in America from the finest leather and the actual phone cradle is carved from a block of Baltic Birch. It arrives in the most wonderful packaging – just a brown paper envelope fastened with a wax seal! When you first open the packaging the thing you notice is the smell of rich leather. The case feels very tactile to hold and I was very surprised at how perfectly the phone fits into the cradle. Small rubber pads hold it into the corners but the fit is still perfect and there’s no fear of the phone ever slipping out. The workmanship on the leather and wood is exquisite and it really does feel like its been specially made for you. You can even have you own words embossed in the leather if thats your thing.

I’ve been using it as a case everyday for a few months now and it has to be the best case I’ve ever had. Its also started to get a bit marked and scratched and a case like this is only going to look better as it ages. One thing to note is that the case does make the iPhone 6 feel even bigger, but its worth it for a case of this quality.

Googles new No CAPTCHA reCAPTCHA could change the way we think about form security. Most web designers don’t like captcha security but they are a necessary evil these days. With the huge amounts of form spam we get some kind of auto form submission and bot security is needed on almost every form we create. Personally, I prefer to use simple captchas that don’t get in the way of the user such as asking a simple question but even these aren’t fall proof and sooner or later the bots beat them and spam gets through.

The most common captchas used by web designers seem to be of the ‘read and image and enter the text’ variety but even these can be tricky for users to use. Sometimes the text isn’t readable or the text entered wrong which all go to making a less than ideal user experience.

There have been other options for web designers to use as form security but none of them are ideal and they are all just work arounds and hacks to try and beat the bots more than help the user experience and create an easy form submission process.

Googles new reCAPTCHA services hopes to change all that with its ‘I’m not a robot’ checkbox.

Entering text in a box after trying to read a small image or do a maths question is less than ideal and asks the user to do a lot but with a simple click the new Google reCAPTCHA service can tell if you’re a bot or a human. But how does it do this with a simple click? Google uses a combination of factors to check what is happening on the page before the checkbox is clicked and it uses what happens with your mouse to see if you’re a real human navigating round a web page normally or a bot going straight for the submit button. Most of time this seems to work very well but on those occasions where Google can’t quite tell if you’re human it will show the standard text image that you need to read and enter text for.

In the world of form security this is a huge change and will make filling out forms a lot nicer for the end user. Googles service is also very easy to integrate for web designers and comes with a good API and works with all sorts of different coding languages.

To fully test out how good it is I’ll be adding it to the kc web design kent website over the next few days and using it on client sites. A few WordPress plugins are starting to appear now which will make it very easy to integrate on WordPress sites.

Its not often I say this but well done Google!

I’ve been a web designer at kc web design kent for a long time. Before that I was a print designer. Before that I did a design post grad. Before that I did a photographer degree. Before that I used to design and make stained glass windows. Before that I used to sit in my bedroom and just draw. For as long as I can remember I’ve been creative and artistic and used my eyes as part of my job every single day. It’s something I’ve really taken for granted over the years as I’ve always had 20/20 vision. Until now.

I first started noticing a change when I felt like I was holding my iPhone a little further away than normal and when it was close I was having a little trouble focusing properly. I didn’t think too much of it but over the past year my hand has been getting further and further away and reading books has become a little harder up close. It’s a very strange feeling. Where once everything was crisp and sharp things are now a little blurred and I could feel my eyes trying to do something they couldn’t quite manage. I was also getting tired working on screens and iPads all day at kc web design kent. For someone that’s spent their whole life based in the visual arts I felt this change a little unnerving. So, it was off for an eye test.

“You’ve reached that age…” the optician said. “Ah!” I said. Apparently once you get past 40 your eyes start to deteriorate and close up focusing is the first thing to be effected hence lots of people need reading glasses. Me included. I wasn’t that impressed with the range of glasses in the shop for the price I wanted to pay so I decided to look online. There are a LOT of glasses companies online now and they have pushed the price of prescription glasses down in the high street but the online retailers are still significantly cheaper. The range of glasses suppliers online is pretty good but the range in quality of these sites leaves a little to be desired.

Out of all the online retailers I researched Glasses Direct seemed to be the most professional and they did a ‘try at home’ service. The display of the glasses on the site was very good and the information we laid out. You could tell that a lot time and effort had gone in to making a great site and making sure the user felt comfortable and knowledgable all the way through the process. The home trial was great. The glasses were great and the right price range. And the buying process was superb – email updates all along the way, 2 pairs of glasses each sent as soon as they were complete, great packaging and presentation. As a user (and a web designer) I have to say Glasses Direct did it all right.

Now all I need to do is to get used to needing glasses when I’m reading, remembering where I’ve put them and taking them with me when I leave the house. I’m sure I’ll get used to it over time but at the moment it feels very strange needing external hardware to do something I’ve done all my life without a single thought.

I love sci-fi. Films, books, TV shows in fact anything with space ships, aliens or futuristic concepts normally grabs my attention. Being a web designer I also love typography. Typography in sci-fi films and books can be a wondrous thing and on the wall of the office here at kc web design we have some beautiful examples of 1960’s sic-fi book cover design in some fantastic Isaac Asimov New English Library publications. I could bore you for hours about my favourite sic-fi films or book (currently the Void trilogy) and about how 1960’s writers such as Philip K Dick used sci-fi as a means of social commentary but thankfully I don’t have to because someone else far more knowledgable and interesting than I has written a series of articles.

The wonderful Dave Addey, Senior Writer at Apple and curator of typesetinthefuture.com has written a series of articles on typography in sci-fi films. These aren’t just general articles about typography and the fonts used or the designs created for the films, they go into such minute detail you wonder how long Dave actually spent researching and collating all the screen shots and info. They do make for a fascinating read, especially if you know the films – which everybody should by now as Dave has written about Alien, 2001: A Space Odyssey and Moon – and the detail is just mind blowing.

If you love your sci-fi and even just a little bit about design or typography head over to Typeset In The Future and read the articles now…

2001: A SPACE ODYSSEY

Moon

Alien

Blocs is a new website designer app from the team that brought us Dev Rocket and other Photoshop plugins. It’s a new website design tool for Macs that allows the designer to build websites very quickly and easily.

At kc web design we like using responsive web design frameworks and our favourite is Bootstrap created by the Twitter team. Now in version 3, Bootstrap makes creating responsive website designs very easy and gives you a great foundation to build your unique website design onto.

The new Blocs website designer app uses Bootstrap as the code base so we know its going to create a website with good editable code on a trusted framework. The beauty of the Blocs app is in its interface and ease of use. Its very minimal, giving you just the right amount of tools to be able to create your layout. You can select from pre-built templates for things such as navigation, hero banners, social media, icon blocks and so on or create your own gridded column based layouts. If you stick to the template based layout you can end up with a website design that looks a lot like all the other out there but with some time and a designers eye you can create unique layouts.

Adding images, changing colours, creating forms and blocks of text are all made very easy by the simple and fluid UI design. Integrated icon fonts from Font Awesome also make things very easy when it comes to changing and adding icons. All of this makes for a very good simple website design app that allows web designers to create Bootstrap based websites very quickly. It even makes a brilliant tool for wire framing and designing in the browser as you can create and change designs so quickly.

It won’t suit everyone or all web design projects but for those it does suit it turns out to be a very handy tool indeed!

Even though it was only released a week ago there has already been a number of updates and Norm the developer has told me new features, such as dropdown menu support in the main nav, will be added soon.

One issue I did have was the way changing colours works. It doesn’t feel very intuitive in its current state and when I thought I was changing a colour for a block element I ended up changing a global colour value instead. One way round this is to define your colour swatches first so that you just pick from those rather than the colour picker.

Hats of to Norm, Blocs is a great app and I can’t wait to see how it improves.