Richard Stelmach - Web Design and Multimedia Portfolio

The endless page / infinite page technique is becoming an increasingly common design feature. For people who aren’t familiar with what it is - it basically removes the need for paging or next / previous buttons on a page with a list of results. Instead of people needing to click next or a page number to see more results - be it a list of products or blog posts, when the user gets to the bottom of the page, it automatically loads in more items, if the user kept scrolling they could effectively see the entire list of items on one page.

This sounds amazing but as it’s a new feature the usability of the concept hasn’t seemed to have been discussed much. I have seen both good and bad implementations of the endless page and people shouldn’t assume that it’s always the best solution just because it’s the latest trend.

Good Examples of the Endless Page:

Film Review Friday

http://filmreviewfriday.com/

Film Review Friday works well as it has a large and clear ‘click here for more reviews’ button at the bottom of the list. As the user is clicking the link they are clear on what the page is doing when more results appear.

Bing Image Search

http://www.bing.com/images/search?q=creativebinge&go=&form=QBIR&qs=n

Bing works quite well as the endless list is contained in the scrolling box. This is good as it means the user can still access anything below the list and the page doesn’t jump around when more results are loaded in.

CSS Line

http://cssline.com/

This works fairly well as there isn’t much in the footer, so the user can still easily access the links, also it indicates when teh results are loading so the user hopefully knows what’s going on. On the downside, you still have no idea of when the list will end or how many results there are.

IDSGN Design Blog

http://idsgn.org/

Again, this design benefits from making the user click to load more results in. This allows the user to be clear on what the page is doing. They may have likely chosen this option as they have a number of links in the footer.

Bad examples of the Endless Page:

• http://www.paranaiv.no/inspiration
• http://doitforthefame.com/
• http://reformrevolution.com/
• http://visuelle.co.uk/

In my view, in these examples, usability suffers from the use of endless page. When the user scrolls to the bottom I think they are most likely to believe they are reaching the bottom of the page, and as the results are automatically loading, the user may be initially unclear what is happening. In the first example, Eventually the scroll bar gets tiny and is hard to browse the massive list of results.

Also there is no indication of how many results there are. The results are infinite but surely the user may want to know when it will end, or if they’re going to be sat there forever until the length of the page is unmanageable.

Also, if any of these pages had footer links, they could be unreachable.

Summary

So to summarise, I think endless page is far better when using the ‘view more results’ type link at the bottom of the page or have the list contained inside a scrollable box. When not used I think there are some serious usability issues with the page automatically extended without any user action and that case would favour going ‘old school’ and using good old paging!

Here are a few tips for keeping your Photoshop files nice and tidy for web designs.

Usually when designing I’m not overly tidy in keeping my layers nice and organised, and it’s probably not a good thing to be too anal whilst in the haze of a creative explosion, ordering layers when you might end up deleting them later.

But certainly when a design is signed off or you’re just tweaking it, it saves time to keep layers organised so that you can easily move things around, try out different sections etc.

Folders

Folders are the best way of keeping things tidy. You can really have every layer in a folder, things like “header”, “footer”, “top nav”, “left nav”, “background”.

Inside your main folders you can create sub folders. Say for example you have a top nav folder with individual buttons inside. Each button could have its own folding which makes duplicating elements and moving them around easy.

Naming

Again I would probably only name layers once a design has been signed off and more than one designer is working on the file. But as designing I will still name folders. I think it goes without saying - make them easy to understand.

Colour Coding

You can colour code folders by right clicking on the folder and clicking ‘Group Properties’. I don’t use this that often but sometimes comes in handy with particularly complex documents.

Deleting Excess Layers

This can be particularly useful when tidying documents up. When you get to the point when you know you won’t be using all the hidden layers you’ve disregarded as crap, Layers > Delete > Hidden Layers. The resulting cleanliness is beautiful.

PSD Templates

If you are creating graphics following the same format each time, creating a clean, organised PSD template is really helpful in speeding up the process.

For example, you may create images for a HTML email that need cutting up each time.

All you have to do is ensure that all the things you won’t be editing such as the header, footer are either locked or flattened. Always keep a fully editable version somewhere but flattening all the layers you’re not going to be changing makes the document simpler and saves file size.

Use guides to form the areas you’re going to be slicing up each time.

Don’t save over the template file. Keep this as the original template and each time you create a new version (such as a new email following the same layout), save it as a new document.

Easily Selecting Layers

One of my favourite shortcuts is using the arrow tool (V) and then CTRL+ALT+Left click the layer you want to select. In complex documents this is an absolute life saver.

In response to a recent tweet by Elliot Jay and discussion with Craig Burgess, I felt I needed to air my views on what skills a web designer should possess.

I think it goes without saying that a web designer first and foremost, should be able to design! This encompasses a wide variety of skills - creativity, knowledge of usability, accessibility, technical restraints, good communication, to name a few. A good web designer should be able to create a design that fulfills its objective.

A good portfolio seems to be usually the most important aspect when going for a job. Your work should speak for itself. But from a technical point of view, what should a web designer know?

Elliot Jay made a slightly controversial statement that all web designers should be able to code their site ( i presume he means HTML/CSS opposed to php, asp.net etc).

All the web design jobs i’ve seen have HTML/CSS as a requirement, it’s classed as ‘front end’, which the designer generally deals with.

But should designers be writing html/css and do they need to know it to be a good designer?

Certainly, design is a creative industry and most designers come from artistic backgrounds. Given that HTML/CSS is not artistic or creative, should designers be doing it and is it detrimental to their design skill?

Personally I believe that HTML/CSS is not to the advanced, technical level of programming languages such as PHP or C#, so isn’t hard for a designer to pick up. They’re not complex or mathematical and the amount of time taken to learn them shouldn’t be so intense that it takes away from all the things that enhance a designer’s skill.

Also I believe that knowing how a page is constructed, the possibilities and restraints of the web medium benefit the designer’s ability to create something suitable. And the best way of understanding this is to use html/css yourself and create websites.

In short, i don’t think there’s any harm in it!

Maybe if the process of having a guy doing the designs and guy doing the html/css was faster, but I don’t see that making much of a difference.

Print designer, web designer or ‘designer’?

It comes down to experience. I may offend a few people here but many web designers i’ve met who’ve come from a print background aren’t as good at web design as they are print. Then again with practise, there’s no doubt that their web skills would become just as good. There’s no reason you can’t be both or just specialise in one area.

Designer + programming hybrid?

I may shoot myself in the foot here as I do know a bit of php, asp.net, c#, sql, javascript and often refer to myself as a hybrid! Hey, I just love the name. But if a company wants the best programming and best design, hire a programmer and a designer. My design doesn’t suffer from programming but there’s no way I have time to get as good at programming as people who’ve been doing it for years.

Alas, I think I have aired all my views. In short, I think a web designer should know html/css as well as design.