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.

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)

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.

Some of you may have noticed that I’ve not done any writing for a while, well it’s kind of a new years resolution for me to get back into it. I’ve got lots of half articles strewn around which I’ll look at finishing off but I thought I’d kick off with a look back at last year.

I wrote a looking ahead to 2010 piece for Six Revisions last year so before looking ahead to 2011 I had a quick look back at the piece and 2010 and you can have a read here – Things That Shaped the Web Design Industry in 2010.

I’ll be following it up with a look ahead to 2011 soon!

But as I read over the various improvements in the interface, the new support for up and coming standards and the use of hardware acceleration amongst many other advances, one thought stuck in the back of my mind – how good will IE9 have to be to offer a chance of growing it’s market share again? The answer obviously is pretty damn good.

IE will no doubt maintain the majority share of the browser market for a long time given the large number of users who neither know or care which browser they use, or are quite happy to stick with IE out of comfort. The growth of Google Chrome has shown that users are not unwilling to switch their browser if a better alternative is available. But even if IE produced the best browser by a country mile I’m not sure how much it would effect it’s standing as a browser. Could you see web designers and developers recommending it to their clients? Sure there are plenty of fair minded sensible people out there who would hold their hands up and say yes it is a great browser, but it’s become cool to hate Microsoft and IE and to bemoan their problems. There are many for whom IE would have to show something really really special before they would consider doing anything other than picking at it’s faults.

Still we don’t live in a one browser world and it’s nice to see that Microsoft are finally taking up the baton and producing a more modern browser that supports the standards and innovations that designers and developers like me want to see.

When working with some HTML form elements I used the JQuery method val() to set the value of a select box. So as an example here’s a select box and the JQuery to set it.


<select name="DavesSelectBox" id="DavesSelectBox">
<option value="0">Zero</option>
<option value="1">One</option>
</select<


$(DavesSelectBox).val(1);


Now the problem arises when the form is submitted using a normal submit button and post method. I noticed whilst it visually seemed the select box was being set to the value, the posted value didn’t reflect this and posted the original value.

So after some looking around it turns out that if the element has the same name and id then .val() can sometimes be a little problematic. So the quick fix to change the name and id to different values. Strange!