Having made my predictions on what will effect the web for a couple of years running on the Six Revisions website I’ve had a look back at last years predictions before jumping in again.

Head over to Six Revisions to read A Review of a Web Designer’s 2011 Predictions.

Sure some things are more difficult to use but for all the complaints about DVD players I remember people having sufficient complaints about VCR’s.

Here’s the list of 50 with the notes on what I still do, maybe I’m not so advanced.

(Taken from The Telegraph article 50 things killed by technology)

1. Ring the cinema to find out times
2. Going into the travel agents to research a holiday
3. Record things using VHS
4. Dial directory enquiries – I have on occasions 118′d
5. Use public telephones
6. Book tickets for events over the phone
7. Print photos – still get this done occasionally, and so do others given all the photo book sites around.
8. Put a classified ad in the shop window
9. Ring the speaking clock
10. Carry portable CD players
11. Write handwritten letters
12. Buy disposable cameras
13. Take plenty of change for pay phones – surely this is the same thing as using a pay phone?
14. Make mix tapes – I disagree, people still make playlists and compilation CD’s, just changing the medium
15. Pay bills at the post office
16. Use an address book – we still have an address book at home
17. Check a map before or during car journey – maybe not a physical one, but I don’t have a sat nav and often check google maps before heading to places
18. Reverse charges in payphones
19. Go into the bank or building society to conduct your business
20. Buy TV listings
21. Own an encyclopaedia
22. Queue to get car tax in Post Office – I’ve done this in last minute desperation
23. Develop and send off for photographs – still get photos printed
24. Read a hard copy of the Yellow Pages – we have one, I’ve never looked at it
25. Look up something in dictionary
26. Remember phone numbers/ Have a phone book
27. Watch videos - again this is a semantic change of medium, doesn’t count in my opinion
28. Have pen friends
29. Use a telephone directory – why is the yellow pages and this separate?
30. Use pagers
31. Fax things – yep, but only for work and work for a large company who are of course stuck in 1980 in some respects.
32. Buy CD’s/ Have a CD collection - I still like to own a CD
33. Pay by cheque – for sending money by post
34. Make photo albums – photo books!
35. Watch programmes at the time they are shown – of course we do this still
36. Dial 1471 when you get home
37. Warm milk or other hot drinks on stove
38. Try on lots of pairs of shoes on high street
39. Hand wash clothes – occasionally
40. Advertise in trading papers
41. Send love letters
42. Hand-write essays / school work – probably because I’ve left school
43. Buy flowers from a florist – still do this
44. Work out how to spell something yourself - tweeted about this yesterday
45. Keep a personal diary
46. Send post cards
47. Buy newspapers - I buy one everyday!
48. Hang washing out in winter
49. Keep printed bills or bank statements - only from those companies who still send them
50. Visit car boot sales

So what about everyone else? What do you still do?

Redesign

It’s not a huge departure from the old design and layout, but then most blogs are pretty much a standard layout the world over. The initial ideas came from a CV I’d done a few months ago (you can see a screen shot on dribbble) which I was really pleased with. It made use of Franklin Gothic and when Typekit announced that Franklin Gothic was going to be offered by their service I decided to start working on a site design along the lines of the CV design.
The major changes include the obvious draining of colour, but I don’t think the site looks too dull for it, the removal of the splash homepage and the blog page in it’s place. Also the custom portfolio pages are gone in favour of a standard design – I found they were giving me an easy excuse to not bother adding anything to the portfolio.
There’s a change in fonts from Museo Slab and FF Meta Web pro to Franklin Gothic and Liberation Sans with a bigger base size of 16px.

New install

Given that the site was feeling a little slow and my WordPress install was littered with god knows what I decided to set up a fresh install of the latest version of WordPress and reassessing all the plugins I used. I also for the first time, made use of WordPress custom post types – notably for the portfolio. Given the rave reviews that were given to it on Boagworld I decided to use the Toolbox theme as a base for the new design. It’s a nicely coded semantic HTML5 starting point.
I also for the first time in a while developed locally on my machine inviting xampp to the redesign party.

Responsive

Having read Ethan Marcotte’s great book Responsive Web Design I was keen to explore the responsive techniques a bit more, I have used it before but I really wanted to have a good go at working with it in mind from the very start of the build.

LESS + GS

I was also keen to try out one the fancy new CSS compilers and having read about The Semantic Grid System on Smashing Magazine I decided to use LESS with The Semantic Grid System, a decision that was made even better after my attention was brought to the LESS app for Mac.
By using the LESS app and a local development environment I noticed pretty much no difference from coding in a normal stylesheet in terms of work flow. The LESS app does offer the great facility to minify your css, be aware though this removes comments which you may need for you theme files, well to show the details at least anyway.

Media Queries

The site is built on the mobile up (or 320 and up) principle, that everything is set up for a mobile site and additional layout rules added as the screen gets wider. Having used a fluid grid, with a max-width set, I currently have only one media query at 800px that controls all the changes needed.

Patent Images

The site initially was a lot more minimal and I had toyed with ideas of adding a texture or some kind of motif when I was reminded of an idea we explored a long time ago with a client at Armitage Online for using images from patents. I’m a big fan of the kind of technical drawing you get in patents, and once published patents are free from copyright and with a bit of research this applies to the images, unless it is explicitly stated that there is a copyright for the images.
I like some of the images but I may remove a few in future if I find it interferes too much with the content, the idea is that they are mostly in the background as a texture to add interest rather than an obvious attention grabbing image.
If you’re after patents Google has a great searchable patents archive with all sorts of crazy stuff in, such as the Readily portable burrito, just keep refreshing the home page and see what pops up.

Still a few bits to tie up

There are still a few loose ends to tie up on the site, I need to have a look at some of the media queries and link colours, as well as proper cross browser testing check – I’ve only done some cursory checks so far (sorry IE users). I’m also considering a new domain name, but I’ve used this for such a long time I’m not sure, even though it is a bit nonsensical.

More posting

I have added a message to any posts over a year old, to make sure people notice and don’t read it like it is cutting edge advice, after all some things in the web world move quickly and some advice techniques stick around for years.
Which means that to make sure everything on the blog isn’t slapped with “this is old” messages I’ll have to add more posts, which I fully intend to do. Having maintained a weekly blog on Love Rugby League I want to try and do that on here – we’ll see how that goes!.

In the meantime though enjoy the site and please offer your feedback, good or bad, in the comments.

Not so long ago I put together an article for Smashing Magazine about using CSS3 and I did mention that using CSS3 features would not be suitable for every situation and that they should be used sensibly and not just splashed everywhere and I think a sign of the maturity and true usefulness of CSS3 will come as people realise this and use it where it is truly necessary, using it as a design tool and not include it just for the sake of it (1px white text shadow springs to mind again!).

So I was rather pleased to see Google+, ok Google haven’t been praised for their groundbreaking design in the past but Google+ is a really well put together and visually appealing design and it’s mostly square. There are the odd subtle rounded corners but on the whole there are a lot of straight edges meeting straight edges with no hint of curve and it looks lovely, you don’t look at it thinking “Oh if only they’d rounded the corners of that button”. It’s not like Google are completely blind to CSS3, there’s plenty used around the Google+ site and the other redesigns of the Google network of sites, no they have chosen to leave square edges in without a hint of remorse.

Yes ladies and gentleman just because you know how to use a gradient doesn’t mean you have to, just because you know all of the border-radius web prefixes by heart doesn’t mean you need to use them – it is hip to be square.

(If you’re looking for something to do whilst you’re not using CSS3 how about checking out Paul Boag‘s post on Web Designer Depot – Stop obsessing over HTML5 and CSS3)

The old setup

To start with my old work setup was well, pretty dated. A desktop PC that is so old I’m not even sure when I got it, I think I got after I finished Uni but I can’t be sure so that would put it at around 7 years. As with any PC it had it’s fair share of hardware upgrades and was working happily, if a little nosily, plodding along with windows XP. One of my big issues was the fact that even buffered it was really struggling to play a youtube video without jumping – not great. Add to that the fact that I spend a lot of time away from home with my job I had a laptop – a Lenovo Thinkpad – that I got and had kept from my first job out of uni, so that was probably about 6 years old, and still an XP machine.  The real push over the edge came when the laptop screen ripped, given that it was so old there wasn’t much doing on the house insurance so I was in the market for something new.

To switch or not to switch

Obviously I had a look around and working between different places I wanted something that wasn’t just going to be a makeshift machine for when I was away but something that I could work on all the time. Being in the web industry you’re never far from voices recommending a switch to Mac and whilst I wasn’t a complete newbie, I’d used them on various modules at uni, I was a little apprehensive, after all I wasn’t unhappy with my PC setup so why switch? And there weren’t any immediately obvious benefits that I wouldn’t have from simply switching to a newer more powerful Windows setup.

So what swayed it?

So why have I switched then? Well as I said I had a good look round and initially I was rather keen on the MacBook Air but I decided that it was going to be a bit out of my price range and decided that if I was going to switch it was going to be a MacBook Pro, so I set about looking at what I could get as an alternative. The main factors that swung it were actually battery life and build quality, two things that aren’t major considerations for most in amongst processors and RAM and hard drive space. I just couldn’t find anything PC wise that would match up to the MBP in both of those areas. The long battery life means that I can happily sit working away in hotel receptions and airports without having to unplug the cleaning ladies hoover and build quality? Come on we all know Apple makes sexy computers.

Leasing

As a freelancer I’m a registered sole trader so I decided to lease as a business, this made a lot of sense in terms of affordability and also means I have the option to keep extending the lease and updating the machine every 2 years – that MacBook Air might be on the way in the future! Given the way this gave me the possibility of spreading the cost of getting an Apple device I decided to make the switch. Had I had to pay for it outright I would most certainly have stuck with PC and lost out on the battery life and build for a machine much more affordable outright but at a similar spec to the MBP.

So what have I got?

I haven’t actually mentioned what I ended up with, I’ve got a rather low end 13″ MBP, I don’t need much more, I toyed with the idea of the 15″ but I like the slightly better portability I get for carrying this around. I think people often get carried away and over estimate the spec they need, I was always going to be safe in the knowledge that it was going to be better than my current laptop regardless.

I’ve also got windows 7 on bootcamp but I rarely open it up, only for a rostering program that I can’t get for the Mac and that’s it.

Am I happy with it?

Yes I am, but I certainly don’t think there’s too much that I wouldn’t have gotten from a upgraded windows machine. I’ve not been bowled over by Mac OS as I thought it would, or as every Mac evangelist would have you believe. There are still things I’ve had gripes with, keyboard shortcuts for pop up boxes for example, but amongst it all I’ve gotten used to it pretty quickly. I’ve found equivalents for all the little programs I had on windows that I liked and I’m starting to pick up the shortcuts, for example I found myself thinking “how the hell do I take a screen shot?”, then rather confused when it stuck it on the desktop and not onto the clipboard.

I also decided to stick the right zoom utility on as I much prefer a full screen view, given that it isn’t a massive screen this makes sense, maybe on a much larger monitor the native mac zoom works better. I’ve also found it a little strange at times where you can see all the things open behind, especially with using things like Fireworks where everything is floating on top of other programs. It’s something I’m getting used to though.

The one thing that I’ve been really taken with is the multi touch track pad, I used to always plug a mouse into my laptop and I’ve done it maybe once or twice since I got the MBP when I’ve needed to do something a little more intricate design wise. The track pad is great and really useful once you start to get au fait with it.

Would I go back to Windows?

I think when it comes to upgrading again I’ll be sticking with Apple, assuming I can afford it, however I wouldn’t be put off by the thought of moving back to Windows.

Final thoughts

If anyone skipped to the end looking for a quick summary well here’s my thoughts. If I were stuck within tighter budgetary constraints I would have stuck with Windows, there is no doubt about that. I still think a lot of the complaints about Windows from Mac users are dated and baseless, although it isn’t without it’s faults, and a lot of promotion of the Mac OS you get from people is over the top, whilst it is good. (Queue the Apple fans in the comments!) Given my old setup to begin with there’s a lot of improvements I would have seen simply from getting newer equipment.

The fact that I have my work machine with me all the time is great as well, much better than keeping everything together across two machines and getting somewhere to realise you’ve accidentally only saved a file to your desktop machine.

The MBP though is a great bit of kit, the mentioned plus points of the battery life and build certainly show and I’ve settled in as a Mac user nicely. Although now sporting this and an iPhone I’ve had for a while I wouldn’t quite consider myself a full Apple convert yet, I’m not quite sure if I ever would, I’ve such a legacy of use of windows machines and there’ll always be friends and family with that thing to look at to keep me in the loop, and I’ve still retained my beast of a desktop machine in the corner for the odd, this site looks funny on Windows XP and IE complaint.

For those who haven’t been to Smashing Magazine recently they published another of my articles a couple of days ago.This time a look at CSS3 and some practical aspects of using it, it’s aimed at those new to using CSS3 and wanting to find out some basic ideas, but I’m sure it’ll help out more experienced people as well.

Check it out at http://www.smashingmagazine.com/2011/05/03/using-css3-older-browsers-and-common-considerations/

Here’s a few examples I’ve come across recently but I’m sure there’s plenty of you with more to share.

Using forms as links


<form action="link" method="post">
<input type="submit" value="link text">
</form>


This is a weird one I’ve encounted where a form is used as a link to another page, it’s not passing any post variables or anything it is just has the page set as the target and a submit button. All the function of a link, in a form! I can only assume the developer wanted to have browser styled buttons instead of text links?

Using the class “header”

This one really bugs me but I’ve often seen <p class=”mainHeader”></p>, this is what a heading tags are for!

In line styling

Ok more of a legacy thing, it used to be acceptable until people realised that it was much better to code semantically and keep your content and styling seperate. But it gets me nearly every time when I’m debugging trying to work out why a style won’t change something, after lots of messing round I eventually notice the style= in the element.

Not using lists

This I guess is just a personal bug bear but if you have a list of things, stick them in a bloody list! You don’t have to do it for everything, for instance menu items as lists I guess are more of a personal preference (although it could be argued otherwise!)

Tables

Again this is a legacy thing but I’m amazed that people are still turning out design in tables there is quite simply no excuse for it!

JavaScript as navigation

I’ve seen some strange things done with JavaScipt but this is a gem, http://www.kingstriangle.com/ tweeted by @rachelandew, all seems normal when you visit the site, but just view source on those top menu items. You will get the quite mind boggling coding of this.

<div id="nNews" onclick="document.location.href='news.php'">News</div>

It looks like a link and it works like a link but it is the strangest implementation ever, surely as a developer somebody would be familiar with an <a> tag?

If I encounter more I will add to the list but please feel free to contribute in the comments.