I plan to experiment more with typography and layout. Firstly I will be digging out my old graphic design books, possibly buying some more and replicating some of the layout techniques in HTML and CSS. Web designers will be aware that technical restraints can give us limitations that print designers do not face (they have their own set of restraints). It will be a task of experimenting with what can be achieved in layout with HTML and CSS, exploring that edge first. And then reigning it in to what can be achieved with considerations of browser deficiencies, optimal screen resolution for audience majority and how layout sits within the heuristic factors an interface should abide by.

There is no reason why good layout cannot be used commercially, in a content managed system or otherwise. So why have so many, me included, been playing it safe for so long? I am going to push the boat out today and design an 80px gutter. Strike me down.

Using the fine adjustment techniques above, the clarity and beauty of the web safe typefaces we have available to us becomes clear. Even the use of emboldening and emphasising key typographic areas can vastly improve an otherwise uninspiring type set for a web page.

This won’t of course stop me from hunting down new typefaces and ways to deploy them online. Each typeface tells a different story and assists the branding. However, this is food for thought and all the necessary type setting techniques should be used in conjunction with the chosen typeface. Simply replacing system font text for a sassy typeface just because you didn’t like the look of the system font is plain lazy and without skill.

Another point Michael made which I shall leave you with is that some of the best typography uses just one typeface. Take a look at this example Michael showed me for the Seed Conference. This site makes excellent use of uppercase, emboldening, italics and all of the techniques I mentioned previously with just one font, Times New Roman. The hierarachy is well defined. I would argue that Times New Roman isn’t a web safe font. It is a system font, but designed for ease in reading of printed documents. Legibility of this typeface at small sizes on screen is poor.

I also work in the same manner for my global CSS document. I keep this stylesheet semantically written and looking very tidy, grouped by the regions within the HTML markup, so, for instance ‘Header’, ‘Content’, ‘Footer’. Within a commented area at the top of the document I detail this structure and other useful document meta data such as the colours used in the design, when I wrote the document and when amendments have been made. Rather than going into too much detail on this I will instead direct you toward Jina Bolton’s extensive post on creating sexy stylesheets.

So how does this help? If you’re working alone then it means that you’ll be standardising your working convention which will help when you return to projects in the future for amendments and updates. You’ll instantly be familiar with the code and its structure. Employ this in an agency environment or within a team of designers and you can pick up each others projects safe in the knowledge that it will be familiar too.

I have been working in this way now for around 2-3 years and I wouldn’t go back. Of course there will be the odd project that breaks convention and has to be structured in a different way in order to make it behave – in these instances try to keep to the usual formatting style as closely as possible and comment your code well for the abnormalities.

Here is the podcast episode for you to listen to

Download ‘Content Page Design Best Practices’ episode

I have implemented one of the recommendations by Luke immediately. I was actually pretty shocked at what I am about to tell you. I was listening to the episode and Luke described how so many websites give so little screen real estate to the bread and butter of the page. The content. He mentioned how some websites expect the readers landing on content pages to engage with the content and have trust in it, yet they only give the content 25% of the screen real estate – or less!

When I heard this I was thinking to myself, ‘Yeah that’s not me, I put a lot of emphasis on my content. It’s a large block with a small sidebar of sign posts to my RSS feed and my social media goodness around the web. I’m alright Jack.’ So, I take a screen grab of DigiKev working on the basis that the majority of my visitors are using 1024×768 pixel screen ratio and bring it in to Photoshop to do some measurements on how much percentage I actually give my content in relation to the rest of the page.

The figures were in, there in black and white I saw the following:

1024×768 = 593609 pixels
of which 162870 pixels are given to the main content block.

162870 / 593609 * 100 = 27%

Uh-oh, I thought. 27% is not very good. The problem was that on my content pages I was providing a breadcrumb which was eating too far into the vertical screen real estate. I had plenty of margin around this though so there was lots of room for maneuvre. I have a rather large masthead which contains my branding, art work and menu structure. I like the impact of this and I feel it gives a good impression about who I am and the skillset I own.

After editing the page to shift the content and breadcrumb up I recalculated the percentage of page given to content:

195200 pixels dedicated to the main content block

195200 / 593609 * 100 = 32%

So I reclaimed an extra 5% of content relevant to the page, still not great. It could go further and it shall. I plan to either replace or reposition the side sign posting to be replaced with more relevant content to the subject of the page. This will reclaim a large proportion of the page to content:

297290 pixels dedicated to the main content block

297290 / 593609 * 100 = 50%

This will be a vast improvement by reclaiming 32% of the screen real estate to content. Content is key, we really need to make certain that we make content the hero of the page. It is of course what people visit our sites to consume. Try the sums yourself, give your content a healthcheck. What percentage are you dedicating to content?

I have been getting excited about comic prototyping recently and how it has the ability to reflect the feelings and aspirations of the end user to the client. Rather than emphasis on the interface and placing it centre of attention based on analysis, comic prototyping is end user centric. This, in my opinion opens up new design avenues. And, because the fact that what is being created is a comic, an understanding of the values, aspirations and feelings from using the interface rather than the product itself, it encourages the notion of play making. The comic prototype will never feature in the final product, the end user will never see it. There is nothing precious around the prototype and it feeds into the further iterations around the design process. I believe this is a good place to start to get the iterative process working but we must try and continue this throughout the lifecycle of the design too. But when should we stop? Until the product is at a stage where it is suitable for production? Or time and budget restraints are exhausted?

Blogging on the old platform was a chore too, there was a lot of faffing to get a Blog post to behave in the way I would like which increased the time. Time I don’t have so Blogging ground to a halt. This new Web site is using trusty WordPress with all the requirements I need and an infinite bag of bolt on plugins at the ready if necessary.

I am very kindly being hosted with Mark Steadman of Bluemilkshake, long term readers of this so far disjointed Blog will know he is a good friend of mine and gets mentioned here fairly regularly.

This is a completely new structure and design which I have built on a CSS Framework I have adapted from Blueprint CSS and the best parts of other great CSS Frameworks available. It is called frameworkThree and is ready for you to download and play with at your leisure. There may be some short term teething problems with the new Web site as I progressively test and iron out all the creases. If you spot anything please send me an email through the contact form or send me a tweet over on Twitter if you’re into that. My handle over there is @digikev

Overall, I am really happy with the new structure and design. It gives me a great platform to now develop from and with WordPress doing all the hard work in the background you will now be hearing a lot more from me again. You lucky, lucky people.

I knew my strengths lay in what we—online experts—have come to call today, digital media. Whereas the technical specifications of a graphic designer are type setting and colour separation plates, the Web designer working knowledge is in Web page expansion, graphical user interface (GUI) design and accessibility considerations.

There are cross-overs in the disciplines. Sure. Typographic sensibility, page balance and colour selection are inherent disciplines in all good designers. Essentially graphic and Web designers are bound by their maturity to design. They’re separated by their focus.

Proposed with the job to layout magazine column or brochure I would naturally put fourth a contact able to carry out the task. A thumbling attempt at completing the project would require too much learning and error on my part. Nor would it stoke my interest. I would hope that my graphic design contacts would extend the same favour and thinking if the glove was on the other hand having been asked to produce a series of Web page layout designs.

From experience in the creative industries and speaking with peers this is not always so. There is a tendency to place Web design in the hands of seasoned graphic designers. They make the decisions, call the shots, before passing the Photoshop file to a Web developer to muddle through.

Web designers have a discipline entirely their own. A Web designer is to produce unique, functional and appealing strategies that take account of a medium that will change dependent on platform, for instance the type of browser, the viewing device, even the screen resolution set by the end user. This is ever more prevalent today with mobile devices and the like.

This is merely a smattering off the top layer considerations for a Web designer. I will return to this topic in future posts. For the time being, what experiences have you of graphic design professionals attempting Web design? Perhaps you are a graphic designer who is tasked with Web related projects. Do you feel you are unable to complete the task fully due to inexperience? Does work get returned by developers saying it won’t work? What do the Web developers amongst you say, have you had to redesign work signed off for you to develop as they were unworkable?

This post will assume knowledge of building static HTML web pages and will mainly benefit those that have no prior knowledge of using PHP or ASP.NET to build a website.

Firstly take a look at a simple open source solution that can be run on Linux, Apache or other equivalent server. You do not require a database to run this, all I am going to use is some very simple PHP includes which will allow the HTML web document to be broken down into different modules so that the content of a page is separated from menus, the Head tag and other parts of the website which will be accessed by several pages. For a mini site this may only be used for one page but you will be able to see the scope for expansion.

Firstly I will separate the opening HTML tag, Head and opening Body tag into its own document. Nothing special need be done here, as soon as you write the opening Body tag save the file as header.php.

Next we will create the main menu. In a new file we begin the next line after the Body tag which we opened in header.php. I have opened up a containing Div, added in the markup for the menu and left the containig Div open in this particular file. Save this file as menu.php.

Rather than moving on to the next markup that will appear after the menu, we will now skip right down to the footer which will incorporate the copyright statement, quicklink menu items and the closing container Div, Body and HTML tags. Save this document as footer.php.

Now that we have the header, the menu and the footer that will be consistent on each page we can now call each of these elements to each new page that is created in order to complete our HTML document. This is easily done with PHP includes which are written in the following example. The header first, followed by the menu and then the markup for the particular page being worked on. This is then all closed by calling the footer. Save this file as index.php so that it becomes your home page.

This should give you a taster of how to markup a page with PHP includes. Any element that is going to be duplicated over multiple pages can be written into a separate document and called from an include. Any changes that are then made to these files will reflect site wide without unnecessary repetition.

In the next part I will take you through ASP.NET master pages and how these can be used to template a website in an even more powerful way than you have witnessed here with PHP includes.

The third camp are the self taught. They have learnt HTML and CSS off their own backs and not content with this they are hungry for more teaching themselves around graphic packages such as Photoshop and Illustrator while also dabbling in the server side programming. This is the camp I established myself in. I am in this camp at the moment. I do not wish to leave this camp for another.

There are of course some cross over and lines get blurred. I for one studied graphic communication but self taught everything web related.

We have here a wide spectrum of people that work with the web. Those that have logical minds and those that have creative minds with everything else in between. Is it possible to develop your mindset from a far more creative side to both a logical side too? This is currently what I am trying to do. To further my progression I wish to learn an object orientated language, my weapon of choice is C#. I have attempted this before but found the books I tried to learn from too much of a learning curve and demanded some prior knowledge of programming. I have now found a book that I would recommend for fledgling programmers with no previous knowledge. Visual C# Step by step, Microsoft Press. It has eased me in with the makeup of the language and familiarised the syntax in easy to understand examples. However, approaching the third section of the book I found that with the shear amount of information that I was taking in with the read so far I was unable to remember everything and then trying to look up how a particular method conducted itself quickly while following the later chapters became difficult. Instead of plodding on I began searching around the web for cheat sheets. There are some decent cheat sheets out there, but with such a sheet not everything will be detailed and of course it is all very cut down. Next I tried printing off the summaries of each chapter in the book. This wasn’t particularly manageable either. Instead, now I have begun rereading parts of the chapters and writing up C# documents with my own commenting and examples of how each method/function/whatever works. Each item is given it’s own document and saved under the name of the element I am describing. This has built up a library of easily referable documents I can call upon while reading the book and following examples.

This will be of use to others in my position so I will be making this library readily available once completed. It should be a good alternative to cheat sheets and provide just that little bit more scope when trying to learn not only a new programming language, but a new way of thinking.