Archive of: 2010
-
CSS Tip: Using max-width for flexible images
23 December 2010 by
When you are working with fluid or elastic website layouts or perhaps using CSS Media Queries, it's essential that the designs cope with large images.
-
Form validation with PHP. Help!
16 December 2010 by
I was recoding a form the other day and I needed a different form validation method (using PHP). We all know that JavaScript validation provides a neat user experience but it doesn't work if someone wants to circumvent it.
-
Web design books for Christmas reading
03 December 2010 by
At this time of year, I normally pick out some web design books that I want to read over the Christmas holidays. I'm spoilt for choice this year.
-
Website inspiration - 28-11-10
29 November 2010 by
Here are four websites that I’ve come across in my web travels which ( I think) are fantastic designs. Perhaps for different reasons but all great nonetheless. Read on for more details and why I think they are so good.
-
How to show random text and images with Textpattern
15 November 2010 by
Here’s my problem: I want to show a (linked) random image (and possibly a short description) on a Textpattern website. By random, I mean that the image and its link should be different every time the page loads. After a quick search, here’s what I found for displaying some random content using Textpattern.
-
Box-shadow for Internet Explorer
06 November 2010 by
Box-shadow is a great CSS3 property that allows you to add a subtle (or not) shadow on an element.
-
CSS tables revisited
29 October 2010 by
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.
-
It's been a funny old year
14 October 2010 by
Earlier in the year, I found myself twiddling my thumbs on a few occasions when freelance web design work seemed to be very slow.
-
Internet Explorer 9 is coming
29 September 2010 by
Internet Explorer 9 has been released in beta form with a full release due in the next few months. As a web designer and front end developer, I've been looking forward to the new browser.
-
Links for light reading 13-9-10
13 September 2010 by
Every so often, I post a few links to interesting sites that I have seen on my travels around the web. If you would like to see more of this type of post, let me know in the comments.
-
Information is beautiful, it really is!
05 September 2010 by
Last Friday, I attended dConstruct, which is a web design and development conference in Brighton, UK. One of the presentations that really grabbed me was Information is Beautiful by David McCandless.
-
Ten reasons to use WordPress themes from StudioPress
25 August 2010 by
I’ve been using some WordPress themes from StudioPress in recent months and have been pretty impressed – so I thought I would highlight some of the reasons why in this short post.
Info: I have used the Genesis theme with various child themes on several projects.
-
Useful tip for creating double borders with CSS3
18 August 2010 by
I have posted about double borders with CSS before but there was a useful tip by Andy Hume (@andyhume) at a recent London Web Standards meeting where he described the use of CSS3 box-shadow (previously on this blog, Box Shadow and Image Hover Effects) to give the effect of double borders on an element. With box-shadow, if you use zero for the horizontal offset and blur radius values and a small pixel value for vertical offset, this will give you another ‘border’ on any element. If the element already has a border, this means that you can create double borders with different colors. Here’s how it works.
-
CSS3 gradients are the next big thing
11 August 2010 by
Truth be told, I don’t really know if CSS3 gradients are the next big thing or not but, with increasing support in modern browsers, they are being used more and more. Like many other CSS3 properties, gradients allow us to create image-like properties with a few lines of code, thus saving on image requests, and make it easy to change backgrounds quickly and easily without using Photoshop or Fireworks.
-
Introducing HTML5
03 August 2010 by
HTML5 is quite a hot topic at the moment and it's likely that you will be developing websites with this new version of HTML within a few years (if not sooner).
-
New Adventures in Web Design conference
29 July 2010 by
I'm always on the look-out for good value web design conferences with great speakers and New Adventures in Web Design in Nottingham in January 2011 satisfies both those criteria.
-
London Web Standards Group meet-up
13 July 2010 by
Yesterday evening, I attended a London Web Standards Group meeting which was a Q and A with Andy Budd about UX. The meeting took place in a pub called the The Square Pig and about 40-50 people turned up.
-
Getting started with Facebook pages for business
11 July 2010 by
Like many other folks, I have a Facebook account which I use for personal friends (and only friends). However, I have never used Facebook for business reasons until fairly recently. A few weeks ago, I was asked if I could create a Facebook page for a business and, whilst I’m sure I could do this, I had to be honest with the potential client and say that I’d never actually done this before. With some spare time last weekend, I thought I’d create my own business (page) on Facebook. I should be in a better position to advise clients if I have actually done it myself! Here’s what I have done so far and a few beginner tips.
-
Links for light reading 30-6-10
30 June 2010 by
Here are a few links from around the web that I have spotted recently.
-
Trying out CSS3 media queries with a fixed width layout
16 June 2010 by
Since my post about CSS3 media queries, I figured I should use these methods in a real life example. Rather than testing on a client’s site (ahem), I thought it might be better to try CSS3 media queries on this blog first – so that’s what I have done. If you resize the browser window to less than 480 pixels (or view the website on a mobile phone), the layout will change to what, I hope, is a more friendly layout for smaller devices, especially mobile phones.
-
Getting started with information architecture
09 June 2010 by
If you have developed websites for some time, you have probably organised the website navigation and content as sensibly as you can for your potential website visitors and to satisfy the website's objectives.
-
CSS3 media queries for ultimate style sheet flexibility
02 June 2010 by
With the plethora of devices (iPad, iPhone, netbooks) that are being used for browsing websites these days, it makes sense to adapt your style sheet so that each user device gets the best experience possible. Yet, how do you make a website display well on a wide screen monitor but still be perfectly usable on, for example, an iPhone with a horizontal resolution of 480 pixels?
-
Making circles with CSS3 border-radius
24 May 2010 by
I was browsing a few websites the other day when I came across Stunning CSS3 which promotes a forthcoming book by Zoe Mickley Gillenwater. There are lots of CSS3 properties used on the site but one that caught my eye was the circular ‘Fall 2010’ item near the top of the page. Here, the border-radius property is used to create the circular shape. I have only used border-radius with small radii values before now but larger values allow you to make a circle.
-
Five fantastic Firefox extensions you might not know
13 May 2010 by
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:
-
Flowplayer for playing Flash video
04 May 2010 by
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.
-
Microformats Made Simple
20 April 2010 by
Microformats Made Simple aims to teach you about microformats, what they are, the benefits of usage, and how they can be used in your website (X)HTML. The book starts with an introduction that includes a description of the history of microformats and their design patterns. Subsequently, each of the main microformats, and several draft microformats, are explained in their own chapters. Each section describes the advantages of using the microformat, its properties and syntax, the mark-up you might use, and how the microformat is applied to several (X)HTML examples. The book is clearly written in a conversational tone and it’s ideal if you are new to microfomats or even if you have dabbled with them (like me). After reading the book, I feel that I am much better equipped to identify and publish microformatted data in my websites.
-
Putting Twitter hovercard pop-ups on your website
16 April 2010 by
Twitter has opened its doors a bit more so that you can add its functionality to your website. Its @Anywhere platform allows you to integrate Twitter into your website.
-
Easy ways for clients to edit image galleries/slideshows
13 April 2010 by
I have been working on a website where one of the requirements is a JavaScript slideshow and/or an image gallery that the website owner or client could update. It is possible to do this via content management systems like Wordpress or Perch (and many others) but in this case, for various reasons, we had an HTML website, without database, to work with. At the same time, the system had to be really simple. So simple in fact, that all the client has to do is upload images (via FTP perhaps) into the correct folder on the server.
-
Microformats on my mind
06 April 2010 by
Coming up on this blog is a review of Microformats Made Simple by Emily Lewis. You’ll have to wait a bit longer for the review but the book gives a really clear explanation of different microformats and why you should use them in your mark-up. Google and other search engines are starting to use them more and more (for example, Introducing Rich Snippets) so now might be the time to learn how they can be used and why they are a good thing.
Despite the potential advantages, the widespread usage of microformats in blogs and websites will partly depend on tools that allow their easy inclusion. Writing in code view is all well and good but it’s not for everybody. Some systems (for example, Perch and Microformats) do provide methods for their inclusion but these need setting up beforehand. In database systems/websites, the same applies. The template or database is set-up so that multiple records have microfomatted patterns and class names added ‘behind the scenes’. Creating systems that do this automatically is probably the only way that Joe Public blog or website author will be able to edit/create microformatted articles and posts. If you know other examples, let me know…
-
HTML5 links for light reading
31 March 2010 by
I have been reading a lot more about HTML5 recently and also considering whether to start using it ‘in anger’. Here are a few useful HTML5 links:
How to use HTML5 in your client work right now is a useful post that describes which bits of HTML5 you can use (and taking account of IE-compatibility) The above link comes from HTML5 Doctor which is a great resources for HTML5. Includes How to get HTML5 working in IE and Firefox 2 HTML5 Gallery is a showcase of sites that use HTML5; some nice examples featured! HTML5 and The Future of the Web is a good introductory article from Smashing Magazine WHATWG has a company home page demo in HTML5 HTML5 Demos has some cool examples of HTML5 use
The more I read about HTML5, the more I want to use it. I plan to build my next personal site with HTML5.
-
CSS3 text-shadow examples
19 March 2010 by
Text-shadow is a CSS3 property (actually, it was introduced a while ago but removed from CSS2.1) that I am seeing more and more on websites these days. It works quite nicely (if used in moderation) and provides a design enhancement for those browsers that support it (Firefox, Opera, Safari, Chrome). Instead of writing a tutorial, like I normally do with CSS3, I thought I’d share a few useful links that provide more information about text-shadow.
-
jQuery: Novice to Ninja from Sitepoint
11 March 2010 by
I am reading a new jQuery book from Sitepoint at the moment. It's called jQuery: Novice to Ninja and it promises to take you from beginner to expert.
-
Websites with left and right arrow keyboard navigation
05 March 2010 by
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.
-
Should I use web templates and themes?
23 February 2010 by
One thing that I have been pondering recently is whether to use web templates or (WordPress) themes more regularly in web design projects.
-
How to work with an old logo
17 February 2010 by
Here's the story: Not so long ago, I was asked to redesign a client's website that, to be frank, was long past its sell-by date.
-
jQuery links for light reading
10 February 2010 by
Some recent articles on jQuery from around the web.
-
How to create drop caps with CSS (and CSS3)
02 February 2010 by
Drop caps are a nice typographic detail that look great on many websites; I’ve used these myself on several examples including Just Holiday Nannies (main page headings) and Occupational Synergy (leading paragraphs). There are a few ways of achieving this effect but the CSS selector I like to use is the :first-letter pseudo-element. This selector is reasonably well supported across most modern browsers (albeit with a few minor bugs here and there). Here’s how it works.
-
Website case studies are a great way to learn
27 January 2010 by
I like to browse a lot of websites with the aim of learning from how others do things. I figure that this is part of my job as a freelance web designer/developer.
-
CSS3 box-shadow and image hover effects
22 January 2010 by
The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari, using their proprietary
-moz-and-webkit-prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers. -
Using JavaScript for enhancing CSS support in Internet Explorer
18 January 2010 by
One of the subjects that I have been keeping an eye on recently is the use of JavaScript to enhance support for more advanced CSS methods in Internet Explorer (IE). We all know that, despite some big improvements, Internet Explorer 8 does not support some of the newer CSS properties used by Firefox and Safari, which tend to lead the way in this respect.
-
Five advantages of coworking for freelancers
11 January 2010 by
Last year I tried out coworking at Lewes Werks on a couple of occasions and, even though I did not do this as often as I would have liked, I plan to do more of this in 2010. I have been thinking about this for a few days so I thought I would write down a few of the advantages of coworking (as I see it, from a newbie’s perspective).
-
CSS links for light reading
08 January 2010 by
A few goodies from my CSS reading list. Some CSS links from around the web
-
Create your own iPhone app quickly and easily
04 January 2010 by
The growth of the iPhone app store and market has been phenomenal in recent years. Many websites and blogs have developed their own iPhone applications as a way of promoting their brand.