Posts in the "Web design" category
A couple of years ago, Sitepoint published a book called Everything You Know About CSS is Wrong (reviewed here). The main theme of the book was the use of CSS properties and values like display: table and display: table-cell (see also CSS display property). If you have not come across these before, they allow you to assign table-like behavior to
<div> or other elements, such as
<p>. In the book, this method is called CSS tables and it seems to be an easy way of achieving grid layouts. Should we be using this method more? Here’s how it works.
Like many other Firefox users, the large number of Firefox add-ons that extend what I can do with Firefox means that it is my default browser. I probably use many of the add-ons that you know and love but I thought it would be interesting to list a few that are not so well-known… but that I find really useful. In no particular order, here they are:
If you want to embed Flash video on your website, you could do a lot worse than use Flowplayer which is an open source Flash player. The set-up process is really easy and there are lots of demos with code on the Flowplayer website. The player has many configuration options including the use of a preview image for your Flash video but the basic set-up only takes a minute or two. Excellent!
- Update: Another review of Flowplayer on Boagworld.
- Related: JW Player is another Flash player option but it’s not free and you’ll need to buy the commercial version if you want to use this for client websites.
Over the last week or so I have come across several websites that allow users to navigate using the left and right arrow keys. I think this is an interesting approach and I really like this method of navigating a website. Perhaps it’s just me but I like using keyboard shortcuts (because they seem to allow me to do things faster) …. so it’s interesting to see websites using the left and right keys in this way. Here are the website examples I have spotted that use this method.
- Crush + Lovely. This is a fantastic design and the left and right keys enable you to scroll between the various content sections. Try it and see!
- Pictory is a photo story website and it uses left and right keyboard navigation in a similar way.
- Thinking for a Living uses left and right keys for horizontal scrolling between sections/pages.
- OnSugar uses a left-right arrow key method to navigate between images in a gallery.
There is an adding keyboard navigation tutorial at jQuery for Designers which explains how a similar effect is achieved with an image slider. The jQuery Tools website has Scrollable which enables a content slider to be navigated with left-right keys.
There may be disadvantages to this method but I’m keen to find out more about it so if you know of other websites that use this approach, let me know.
One thing that I have been pondering recently is whether to use web templates or (WordPress) themes more regularly in web design projects. Yes, you might view this as a cop-out or some indication of lack of creativity. On the other hand, if you want to jump-start a website design and get straight into the front-end build CSS and HTML, perhaps a theme/template is a good starting point?
Whilst I was thinking on this, imagine my surprise (perhaps surprise is too strong a word but you get the idea) when Sabrina Dent, a designer whose work I have often admired, wrote this blog post called Confessions of a Template Whore where she outlines some of the advantages of using templates. One of the main reasons cited is for clients who don’t have a large budget. Hey, I get that all the time!
In my experience, a client is rarely satisfied with a template off-the-shelf and customisation will always be required. However, when a template or theme ticks most of the boxes, customisation becomes easier than starting from scratch. In addition, you can always learn from the way that another designer does things. Just because you always float a specific element does not mean that is the only way of doing it!
Now, I’m not saying you just choose any old template here. The client’s objectives, budget, and type of business will all influence your choice of theme. You might decide to spend quite some time at the start of the website design process choosing one or more themes or templates. Although a template can be a quick start for your web design process, don’t rush the template selection process. I like to look at a variety of themes and assess which might be best.
So, what’s your take on this? Are templates bad for web design or are they a smart way of getting the basic structure and design established quickly, with client customisation to follow?
Related: ThemeForest has some high quality templates and themes.
- Adobe Air
- Quick Tips
- Search engines
- Web design
- Web development
- Web standards
- Website review
Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!
- EphKa on CSS Tip: Placing text on top of an image
- Clive Walker on How to show and hide content areas with Perch CMS
- Andi on How to show and hide content areas with Perch CMS
- richard on CSS Tip: Placing text on top of an image
- David on Making circles with CSS3 border-radius
- Christian Connett on Why I'm using Brackets as code editor
- Carlo on LESS or Sass or neither?
- Clive Walker on WordPress Tip: Remove Items from the Admin Menu