Designing for Modern Monitors

How do you like yours? A recent post discovered through Smashing Magazine got me thinking about a topic that effects me every day within my line of work. When I started designing websites 2 years ago I was led to believe at the time that sites couldn’t be made any wider than 750px, (780px max) to compensate for people using monitors at 800x600px resolutions. This is accessible – this is caring for our users? Over time I began to get sick of 750px. I was designing on a 19″ PC with Firefox at 1280x1024px. Why wasn’t everyone else! Annoying people with their 15″ 800x600px resolutions (for example my secondary school). I then began to consider, with no appropriate research, that the majority of people now used 17″ monitors at a resolution of 1024x768px. So I’ve stuck to this for a long time – designing sites anywhere from 800px to 950px wide.

Read the full article »

Firefox 100% Height Bug Fix

Hello I have to post this because I want to spread the word. I haven’t had this problem for a very long time because of the designs of my sites. But today I’ve been working on rebuilding someone’s site with valid mark-up, and while converting the table-based layout to semantic divs – I encountered the dreaded Firefox Height bug. This problem is when you have a ‘container’ or ‘wrapper’ div that has a background image, colour or border that you want to repeat to the bottom. Unfortunately, specifying 100% height in your CSS for the html or body just doesn’t cut it – the background will only stretch to the bottom of the viewable window and no further when you scroll, or for some reason just doesn’t even display at all. Anyway, after lots of hunting and stressing out, I’ve found a fix which wonderfully works! As so: #wrapper { width: 775px; min-height: 100%; margin: 0 auto; border: 1px solid

Read the full article »

Creating a WordPress Theme – Part 3: Functionality

OK folks, here’s the final installment of the hefty ‘create your own wordpress theme’ tuts. What I’m basically going to do to this time is demonstrate a few different small php scripts that bring that ever-important wordpress functionality to your site. I will outline where the different snippets go within your code, and what each bit means, so you can play with the variables yourself! The fantastic thing about WordPress is; there is so much you can do with it, it’s so versatile and there’s a massive community out there constantly coming up with new plugins, ideas and improvements. To discover more that you can do with this awesome blogging platform – visit the WordPress site at www.wordpress.org or go to the wordpress codex section for more code and help. Blog functionality OK, let’s attack the bulky bit first. WordPress’ central use is as a blog. The wordpress backend already gives you all the tools you need to create, edit

Read the full article »

Creating a WordPress Theme – Part 2: Design

We’re Back! OK folks, here’s part 2 of the 3-part series on creating your own WordPress theme. To view the first part – Layout, click here. This tutorial isn’t as long, I’m basically going to create a simple design in Photoshop that I can incorporate into the dimensions I’ve already specified for my theme. As I stated in part 1, I’d normally design my site first then build the HTML and CSS around the design, but for the purpose of these tutorials I created the code first. Photoshop – The Design Of course this design is purely for example purposes, it’s not copyrighted and as it’s designed to be very simple, I’m sure you’ll wish to build your own designs. Therefore this is NOT A PHOTOSHOP TUTORIAL – I’m assuming that you can already create your own designs and are capable with Photoshop/Fireworks or whatever image editing software you choose to use.

Read the full article »

Creating a Reflection Effect

Web 2.0! Web 2.0! Web 2.0! Glossy! Glossy! Glossy! Agh! Yes there have been literally thousands of ‘Web 2.0′ glossy roll-overs, buttons, highlights, reflections and artificial 3D tutorials spawned over the past few years. So what? Here’s another! The reflection effect is widely used on the web today and is especially popular with logo design. I’ve made a consistent use of it on my Sans Design website (www.sansdesign.co.uk) and it still never gets old for me! It’s also surprisingly easy once you get to know it, plus it can be completely adapted for your own tastes. I’ve started by creating a 400px x 300px canvas in Photoshop, of course this is completely irrelevant – use whatever size you wish. I’ve started by creating some text as part of a completely made-up logo, as so:

Read the full article »

Creating a WordPress Theme – Part 1: Layout

NOTE FROM AUTHOR I wrote these articles over 2 years ago. Although I’ll leave them on the site for reference I would recommend trying somewhere else for tutorials on WordPress theme development. WordPress has changed massively over the years and is now far more accessible and sturdy then when I wrote these articles, thus I doubt wasting your time following this series will be of much benefit. Thanks for all the kind commenters so far. Nathan Waffling Intro As Usual Welcome one and all to the first part of a 3 part series I’m tirelessly venturing to create on how to create your own WordPress Theme. 2 questions come to mind regarding this tutorial. Firstly – why WordPress? Well the simplest reason is that I’m quite handy at WP – I use in on the majority of my websites whether a client’s looking a blogging system or just the ability to edit their own sites. It’s also one of the

Read the full article »

CSS Horizontal Menu

I’m big into horizontal menus. I think the majority of the web community are. In my eyes their only pitfall is the general inability to expand past a set width if you wish to add more links in. But who wants to do that, anyway? I’m aware that there’s a multitude of different ways to create the classic ‘hover-over’ menu. Either with CSS or good old javascript, the way Dreamweaver used to throw it out, and possibly still does. There are several reasons why I choose not to use javascript hover-over effects; a) It’s ugly, just to look at. Little brackets and weird symbols and colons everywhere, b) In some way or another it’s going to want to attack your site’s accessibility, and we just can’t let that happen, c) CSS is just better. In every way. It’s cleaner, easier to apply and moderate and just stays out of the way in it’s little file. With javascript you’d either have

Read the full article »