Matthew Knott

Standard scrolling on div tags is just plain ugly. If you want to have a div scroll only vertically, this can be done using CSS.

Get some control by using overflow-x for horizontal, and overflow-y for vertical control through CSS.

Tags: css Div Horizontal Scroll Overflow Vertical

I've been looking at evvective and stylish ways to show off room bookings and came up with this.

The room list is static, while the internal content slides smoothly based on the timeframe selected.

I didn't use a framework, instead coding this myself.

As such I haven't had time to streamline the code yet (as usual) but it's free to use if anyone wants it.

All that's missing is adding your own code to reflect the bookings.

The full source code is available here.

Tags: Javascript css HTML Room Booking Resource Div Sliding Horizontal Framework Scriptaculous

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

In any information-based website, it's important to remember that people will possibly want to print your information off. 

This could be for any number of reasons, passing to a friend, saving for your own purposes, or supporting a business case to buy a product.

When they do, they will get a mess, bits of navigation, images, cut off text. The end result is you or your customer lose business, or look unprofessional.

To fix this, use a print stylesheet. A print stylesheet is used only when printing and lets you sweep navigation and other unwanted information under the carpet.

If you're viewing this article on it's own, go to print preview and see what happens. All the navigational elements go and you're left with a nicely formatted document ready to print (Aside from the google ads which I haven't hidden yet).

Creating a print stylesheet should be the last thing you do, that way you're not constantly changing it through the project lifecycle.

When you are ready to implement your stylesheet you can add it in one of two ways. To include the stylesheet using the LINK object:

<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

Or to use inline styles use:

@media print {

/* style sheet for print goes here */

}

Either way achieves the same result. When compiling your print stylesheet, use display:none; to hide individual elements. 

Ensure any content containing div's are set to full width so that the full page is utilised.

Finally, consider colours, not all browsers allow background printing, you should bear this in mind. Minimise the use of colours in your page to improve the reproduction on laser printers.

Providing a drastic change from screen to page can set you apart from competitors and give you that slight edge. It's a little detail that can make a big difference.

Tags: Tutorial Stylesheet css display Print Professional Hidden

When building an accessible standards-based website, many developers feel it is sufficient to pass their pages through the w3c page checkers for xhtml etc. It is fairly important for your pages to pass these tests as much as possible, however, I believe that you need to go beyond the standards and look at whether or not your markup is suitable for purpose.

What I mean by this is that you need to look at each element on your rendered webpage and ask yourself if you've used the correct markup to display it. Often, designers will use spans to list items, instead of a list object, or div tags to display tabulated data instead of a table.

Correct use of tables

Whenever you want to display tabulated data, do not be afraid to use a table. The witch hunts of the CSS revolution focused on the use of tables for page layout and structure, but used correctly they are still the most effective way of displaying your data in a flexible grid layout. The question is are you coding your tables correctly? The traditional method of creating a table was as follows:

<table>

<tr><td>Header 1</td><td>Header 2</td></tr>

<tr><td>Metric 1</td><td>100</td></tr>

<tr><td>Metric 2</td><td>200</td></tr>

<tr><td>Metric 3</td><td>300</td></tr>

</table>

This works, but the best practice for creating data tables is:

<table>

<thead>

<tr><th>Header 1</th><th>Header 2</th></tr>

</thead>

<tbody>

<tr><td>Metric 1</td><td>100</td></tr>

<tr><td>Metric 2</td><td>200</td></tr>

<tr><td>Metric 3</td><td>300</td></tr>

</tbody>

<tfoot>

<tr><td>Total</td><td>600</td></tr>

</tfoot>

</table>

This approach makes your code easier to understand by both screen readers and developers alike, plus when css is turned off, your data retains it's structure.

 

Lists

When you cast a critical eye over your site, you might notice that many of your page elements are actually lists. Site navigation is a list of destinations, likewise site maps are better displayed in a list object, about us pages often list statistics. These are all comment situations where list object should be used but are not.

You can craft an effect top level navigation using an unordered list:

<ul>

<li><a href="home.php">Home</a></li>

<li><a href="blog.php">Blog</a></li>

<li><a href="contact.php">Contact Us</a></li>

<li><a href="links.php">Links</a></li>

</ul>

The magic then happens within the CSS.

ul {

display: block;

width: 100%;

overflow: hidden;

list-style: none;

margin: 0px;

padding: 0px;

}

ul li{

display: block;

float: left;

overflow: hidden;

margin: 2px;

padding: 0px;

}

ul li a:link, ul li a:visited {

display: block;

margin: 0px;

padding: 15px;

}

ul li a:hover {

display: block;

margin: 0px;

padding: 15px;

background-color: #CCC;

}

Summary

These are just two common areas of markup that are overlooked, but there are many more, It's worth brushing up on the markup available to you so that you can ensure you always choose the best markup for the purpose.

Tags: Tutorial Standards css Tables Lists Markup Tabulated

Web development is rife with fantastic words and phrases. I just read one of them in an article in .net magazine, Descendant Selectors

This term simply refers to styles applied to an element or class based on the parent element or class.

h1 { color: red; }

.header h1 { color: blue; }

The code above would render H1 tags in red, except when they occur within an object with the .header class.

For further details check out the w3c guidelines on types or CSS selectors here.

Tags: css Descendant Selectors Jargon

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

Today in work I spent some time with one of the guys from our office, a knowledge manager, who wants to upskill and become a developer.

We program our web based apps in ASP, but he has very little experience programming, really only a little html knowledge, but he is a very intelligent person. A few month ago he mentioned to me that he wanted to upskill, and wanted guidance on a learning path.

Learning Path

This is actually very difficult to guide on because if you want to start developing while learning, as he does, then you need elements from 4 key families:

 

• HTML
• JavaScript
• CSS
• VBScript / ASP

 

The order I recommended he focus on these items was HTML, CSS, JavaScript, ASP. The reasoning being is that once you can design the end product, then you can start to substitute static elements for dynamic elements.

Today, he had a task he wanted to complete, add a "Rate this article" feature to an existing application, and wanted me to help him though it. 

As I thought about how I was going to teach him how to program this feature, which combined all four programming areas, I came to the conclusion that for a first lesson, trying to teach syntax for four different languages was a pointless exercise for the time we had (about half a day), so I decided that I would focus on what I consider the hardest thing to master as a developer, non-linear thinking.

Non-linear Thinking

One of the comments I had during our lesson was that it was quite hard for him to wrap his head around developing in a non-linear fashion. Indeed, you call functions from separate documents, use sub routines, pull data from databases, it's a lot to think about.

As an asp developer, developing a standard asp data-driven solution, if I really think about it, there are probably no more that 10 / 15 different vbscript functions and objects or operators that are actually used. Consequentially vbscript becomes one of the simplest components of the education package, but if you cannot wrap your head around how you're going to achieve your programming objective, then the task becomes huge.

The way we approached the project was not on a computer, but in a meeting room, with a pen and paper. our approach was as follows:

 

1. Define what we want to achieve
   
2. Sketch how we want it to look
3. Define the process the user will go through.
4. Work out how to achieve these steps programatically.

 

For step three, we decided that the user would firstly see greyed out stars, would click the star rating they want to give the article (1-6) which highlights the rating with gold stars. Finally the user would click submit to save the rating, without reloading the page.

For step four we looked at what we'd just detailed in terms of user interaction, and I helped him detail how we would achieve each item. 

Firstly, I drew the containers for each of the 6 stars, and then outlined the syntax that would create that:

<a href="javascript:void(0);" onClick="ratingFunction('1')">

<img src.......>

</a>

Then I explained the need for a javascript function to accept and set the rating, one to submit the form, and a variable to set to show that the rating had been set (Not essential but makes it easier to understand what is happening).

I implemented an AJAX call for him to send the rating to an asp page that inserted into the DB, and we created the table in sql. 

Summary

From a programming perspective, we agreed that this was a fairly ambitious task for the timeframe, and whilst he picked up bits and pieces, the important thing is he started to learn how to think as a developer, and that sometimes, finding the correct syntax is a lot easier if you clearly understand what you are trying to achieve.

 

Tags: Javascript css Plan HTML Demetrie Developer Training Learning ASP VBScript Education Thinking

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