Posts Tagged 'Design'

I recently configured my site for mobile consumption, by using the WordPress Mobile Edition plugin along with the Carrington Mobile 1.0.2 theme. I noticed when I bookmarked my site using the iPhone that the home screen icon as missing. Today I’m going to run through how to create and setup the home icon for your website.
Create the icon
You will need to produce an image in PNG format that:

Measures 57 x 57 pixels, with square corners the (if the image measures other than this size, …

I recently had the need for some client side form validation and happened to find the jQuery Ketchup plugin. It’s a simple and flexible plugin that can be modified and styled for your own needs, plugin modifications are encouraged although the ‘out of the box’ code will work just fine for your basic needs. You’ll need to download the plugin files to get started. once download follow these simple steps to implement it into your application.
Step 1
include the files in the plugin as shown …

Whilst working on my most recent project ‘We deliver’, I had the need for a simple logo that wasn’t overly fussy but still slick contemporary and simple to design. I thought I’d put the design stages together into a short blog post explaining the simple technique.
The most important part of typographical logo design in my view is the font. A great free resource for fonts is DaFont.com, in fact this is where I found both of these fonts. the main font for the logo is …

I’ve been meaning to do something sporadic and creative for a while now but have never got around to it until now. I decided to challenge myself to build a site (wedeliver.papermashup.com) in under 24hrs from concept and design through to development. The site is a silly idea based on a simple delivery website with the twist of allowing users to deliver their precious package by an animal of their choice, much like we did in the war with carrier pigeons. I started by working …

Every couple of weeks I seem to find myself checking 9rules.com to see if they’re accepting new submissions as I’d like to submit this site. Any how on this occasion I couldn’t help but notice the browse by community section at the top of the page. Clicking the button reveals a section that contains a list of category names. I thought this would be a good example to base this post on, and to show how simple it is to achieve this effect. I’ve …

I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support …

Planning a project thoroughly is often more important than the design, app or site. If a project is badly planned and organised then your heading for a disaster.
Wireframing is usually one of the first steps to really mapping out your user flows, and is a place where all the ideas can be brought together to build a better picture of what the final project will be like. Its important to understand the purpose of a wireframe and communicate this to either your client …

There are some great JavaScript graph libraries out there and one that’s recently come to my attention is Highcharts.com which is compatible with both the jQuery and Mootools frameworks. To get started point your browser here where you can download all the files you need including examples. Highcharts features include slick tooltips to reference points on your charts, it’s compatible with all standard web browsers, the setup for a graph as demonstrated below is simple and uses the JSON data type, there are also …

“Easy PHP Websites with the Zend Framework” shows you how to use the powerful Zend Framework to build websites with amazing speed and efficiency. Embracing a teaching strategy of learning by doing, showing you how to build website features you’ll actually want to use within your own websites. Among other topics you’ll learn how to manage data submitted through web forms, send e-mail through your website (both text and HTML), manage the user registration, login, and password recovery processes, and even create a simple social …

As a designer it’s usually quite hard to get constructive feedback on a design. All the people I know are either friends or relatives who only say, ‘Yeah that looks good’, or ‘Oh I like that’. Fivesecondtest.com aims to fix this problem by allowing you to upload any design and running a series of tests. The service is free to signup however you can buy tokens to allow further customisation of tests.
I happened to stumble upon the site and added a usability test for …

If you think you can just build a website and expect it to perform well you can think again. Getting a website to the top of search results is every marketing managers goal. Im going to run through five key points that will put you in good stead to getting the results your site deserves. SEO is often percieved as a dark art. If you start out well and get the basics done the quality of your content should speak for itself. However …

Inline editing as it’s known, or being able to edit content directly on a page is a great tool have under your belt. I’m going to run through exactly how it works as well as how to POST the updated text content through to a PHP script for server side processing to put in the database.
The Code
It looks a little complex so i’m going to quickly run through exactly what’s going on.

When you visit the demo page are presented with a block of text. …

API Knowledge
A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more …

Following on from yesterdays little article about adding a simple JavaScript print link to a page, today I’m going to cover adding the functionality with jQuery for the user to adjust the text size on a page. It is important from an accessibility point of view to give your users the ability to re-size the text, and its also a handy trick that could become useful for building stand alone JavaScript applications. You will also need to include the jQuery JavaScript framework.
The Code

<script type="text/javascript">
$(document).ready(function(){
…

How many times have you booked that holiday or purchased a new gadget and been presented with a button that says ‘Print your receipt’? Users generally have to be pushed into executing a physical action such as printing a receipt or confirmation letter. So to do this we can use a simple line of JavaScript that goes in the href of our link to open the print page prompt window.
It’s also worth pointing out that to get the best results, its best to create a …

I haven’t written a post for the last week, largely because I’ve been busy behind the scenes developing the new site design. The last theme i had was a standard theme that wasn’t really modified, but this time I’ve used the Arthemia theme and heavily changed it. The most important changes that I’ve made are the ‘Popular Tutorials’ drop down section on the homepage which will change regularly with new tutorials, and the section on the right of the homepage that allows you to follow …

Carrying on the theme from yesterday with the jQuery & PHP username availability checker, i’ve got a quick tip to improve the user experience, so the user knows exactly where they are in the filling out complex forms. We could use CSS to do this alone, however it doesn’t work in Internet Explorer. So in order to cater for all browsers we can achieve the same effect with JavaScript.
The HTML
So in the code below we simply have a form input field wrapped in a div …

Over the past few years I’ve had the opportunity to work on a few personal projects. This allowed me to experiment more with techniques that I wouldn’t have normally used on client sites. During this time I was building a blogging platform, I soon found that it was difficult to present the data and make it look interesting to the user, this is where i discovered web thumbnails to achieve this.
There are a variety of web thumbnail services out there but the best and easiest …

Here’s a quick CSS tip. Firefox likes to put a dotted border around any links that you click as shown below, but there’s an easy way to fix it simply add the code below to your ‘a tag’ style either in the head of the page on in an external style sheet.

a{ outline: none;
-moz-outline-style: none;
}

I’ve never written a jQuery tooltip script before so i thought i’d give it a go and write my own. Its very much in the experimental stage but i thought i’d open it up to see what the community has to say about it. I had the most trouble with the ajax tooltip and getting the content to display in the tip. I know there are plenty of jQuery tooltip scripts out there but i really wanted to see how they were made, and the …