Matthew Knott

Always trying to do something to stimulate the grey cells, I have started applying the slide demo I developed a few weeks ago to a calendar object. I'm going to be using it in a personal application I'm developing to help track my finances (The green box denotes a bit, should be red).

 

The screenshot is in fact just a fireworks mockup. When it's finished I'm going to integrate it into the blog navigation, sweet.

Tags: Javascript Blog Calendar Slide Fireworks Date Time Cal Demo Mockup

How do you come up with unique, effective website designs if you've never had any formal training?

To be honest, this is something I really struggle with. Perhaps it's just me, I'm never 100% happy with any of my designs, but then I see some of the trash out there and think, well, it's not so bad after all. My mother was an artist, and a really good painter, I on the other hand have a head filled with great designs and scenes that I'd love to articulate but just can't. I think this is probably common amongst many people, but how do you solve it?

Inspiration

Firstly, you need inspiration. I've been wanting to redesign this site for a number of months, mainly because I was getting bored. I can imagine some designs, but they all tend to be much of a muchness. By that I mean that there's nothing new, nothing to make you say, wow this is a unique design. So if you can't come up with a unique design, you're going to need inspiration.

I tend to go to alistapart.com and look at the websites of the authors for inspiration. Click around a dozen or so, and make a note of the features you like the most in the following categories:

 

• Layout The general positioning of major elements.
  
• Colours The colour scheme, specifically in regards to layout and fonts.
  
• Details Design features, little details that add to the overall feel.
  
• Features Page elements such as recent posts, tag clouds etc.
  
• Fonts A key area, what fonts do you like for specific areas of your page. Typically this would include, menu, article and header fonts.
  

 

Wire framing

Once you've completed your due diligence, you can move on to wire framing. Grab a piece of paper and a pencil and start sketching out the layout you have in mind. Use a ruler if you're using a grid layout and like me aren't particularly good at sketching straight lines.

When you've got a design on paper that you're happy with, you should transfer it into a vector drawing package like Fireworks or possibly Photoshop, depending on your preference. This will allow you to get mock elements in place and see how your design holds up on the screen with your choice of fonts and colours. If you need some padding text then head over to lipsum.org.

Constructing a template

This is usually the most exciting stage, and possibly the most frustrating. You create a html template based upon your design. I can't offer you too much guidance here, other than these key tips:

• Use CSS for layouts, not tables
• Make sure your fonts can be resized
• Use the correct html markup based on an objects function (See here to understand what I mean)

Dynamic site?

If you're building a dynamic site, in php or asp etc., you need to start identifying common elements and splitting them out. What I mean by common elements is code that repeats and changes little or not at all depending on which page you're on. This includes items such as the header, footer, navigation, dynamic blocks of code such as recent posts. Split these out into include files, I tend to use the format of IncludePurpose.inc.php to make it easy to identify what you're including on your page.

Feedback

Once you've completed your design, host it somewhere and start getting some feedback from people, ask friends but don't be afraid to drop a mail or two to people in the know, people recognised for great layouts, see what they think about your design and collect some constructive feedback. However, at the end of the day this is your design and if you like it, then don't worry, because website design, like any art form, is never universally appreciated, and you shouldn't expect it to be.

Tags: Standards Design css Wire_Frame Wireframe Layout Art Colours Colors Fonts Sketch

With the summer spluttering into action slowly, I felt like redesigning the site slightly.

I say slightly, the redesign was the first job, I'm also going to be adding a few new features:

• Twitter / facebook status style feed. 
• Featured articles
• Expanded article lists

 

Status Feed

I want to add a personal status to my site. But more than just listing things I'm doing or have done, I want to break it down by location (Home, Work, In-Laws, Mums etc.) and I want to create a timeline view for the week, month etc.

 

Featured Articles

I will also be adding a featured article flag to my posts to make it easier to find recent how-to's etc.

 

Expanded Article Lists

Just a small addition to let me add some greater detail to article lists such as most read posts etc.

 

All in all not really any ground breaking changes happening, but I want to keep the site evolving at some pace. Now I'm off to overheat in the garden.

Tags: Blog Site Redesign Update Add-on

Just a quick note before bed. Over the coming weeks I'm going to be running a detailed report on CSS3 properties supported in Mobile Safari, as part of my iPhone dev work. I will screenshot each effect and compile a guide here.

Additionally, I'm working on a charting kit using canvas for advanced statistical reporting, including rate of change etc.

Tags: Safari css Mobile Mobile_Safari Canvas CSS3 HTML5 Charting Graphing

Just a very quick and simple tip for your site. Why not add an iPhone compatible icon to your site. When a user adds your site to their iPhone / iPod touch home screen, rather that a clip of the page, it will use your specified icon.

Start by creating a 60px x 60px png image that you want to show as your icon, I've opted for a cheesy example :).

Then, in your site, add the following line to the head:

<link rel="apple-touch-icon" href="/images/iphone_icon.png" />

Then, when someone adds your site to their home screen, they see the nice, purpose made icon rather than a flakey corner of the webpage.

Tags: iPhone iPod_Touch Apple Icon PNG Homescreen

Bit of a quick update tonight. Continued refining the site, changing the font again.

Also added the first non-blog page, about me. I couldn't resist the urge to write it in the third person.

Another small addition is a poorly implemented digg option. I wanted to get it live before going to bed and will improve on it tomorrow. The styling is the problem, and the fact that I only added it to the static articles at this stage.

Tags: Blog Site Changes Style Digg Me

This article really encapsulates a lot of the things that frustrate me about Microsoft's "I know best" attitude to it's web browsers. The purpose of the W3C Standards is to facilitate a common experience across all-platforms and browsers.

This site is something of an ongoing project for me, I've tackled advanced apache configuration through my work with mod_rewrite, cloud trees, which were mild challenges, but nothing compares to the sheer hair-pulling that comes from trying to get your site looking good cross-browser. This site, for example, great in Safari, Firefox, Internet Explorer 7, and Opera, yet I have margin issues in Internet Explorer 6.

This is frustrating as a developer because it means valuable time is wasted trying to flush out happy mediums, often forcing compromises on excellent designs.

IE 7 represented a step forwards in terms of compatibility, but there is still a long way to go before developers can rest assured that their site will look the same in each and every major browser.

My particular problem related to the infamous margin-doubling bug in IE6 when working with floated elements. This is documented in numerous websites, and the recomended fix is to use display: inline.

This resolves the issue, although totally against W3C guidelines. Plus, if you're using an element that requires the display property to be set to block, you have even more tinkering to do that will probably force you to deviate further from the set standards.

After some experimentation, I found that the display: inline-block existed, fixed the bug, and retained the properties of a block element insofar as the padding etc was still correct.

Tags: Standards Browsers Microsoft Design Safari Firefox Opera IE Internet_explorer css inline-block inline display property