Always show your working out

Remember hearing your maths teacher say that?

There’s a good reason for it; It gives you the opportunity to demonstrate how you solved the problem. You would be marked on the working out, and not just the final answer.

It’s the same with design work, if you can’t describe how (and more importantly why) things are done a particular way, then the client should (quite rightly) think of it as just a guess. Continue reading

Linkspiration

(yes, it’s a lame name I know)

So recently I have been reading/bookmarking/retweeting a lot of articles recently, but I am sure that these could be curated in a better way. Having followed sites that do something similar I may go down that avenue at some point, but for the time being I’ll post some here.

The antidote to over-stimulation

Whilst reading http://contentsmagazine.com/articles/space-to-breathe/, the quote antidote to overwhelm and over-stimulation struck a cord with me. Quite a lot of home pages try to do everything, but by doing this they overwhelm the visitor. The absolute antithesis of that has to be the new WorkFu site, and to say I was impressed with their new homepage was an understatement:

I was blown away. I’d just never seen anything like it on a homepage recently.

Again, I think this comes back to confidence in design. Knowing that you’ll be able to convey the desired message in such a simple way without additional clutter Continue reading

You can’t force people to use your product

As it turned out, sharing was not broken. Sharing was working fine and dandy, Google just wasn’t part of it. People were sharing all around us and seemed quite happy. A user exodus from Facebook never materialized. I couldn’t even get my own teenage daughter to look at Google+ twice, “social isn’t a product,” she told me after I gave her a demo, “social is people and the people are on Facebook.” Google was the rich kid who, after having discovered he wasn’t invited to the party, built his own party in retaliation. The fact that no one came to Google’s party became the elephant in the room.

I think this ex-Googler has it spot on: You can’t force people to use your stuff. How many of us have a Google account? And how many times did we use Google Wave, or Google+?

Continue reading

Using SVG Icons

With high-PPI devices such as the iPhone 4 and the new iPad, great resolution is changing how we think of the pixel. Increased resolution means that traditional pixel-based icons won’t be able to take advantage of this, so people are looking for vector-based solutions.

Because of this, more people are talking about SVG, or Scalable Vector Graphics. These XML-based images can store vector data, and so can be upscaled. Other options include creating special icon fonts, such as Pictos. I prefer the idea of using SVG over font solutions because the font method is just like using Wingdings; plus it adds non semantic letters to your code, even if you can hide them.

I was aware of SVG back in around 2006 during my college course. I naively thought at the time that was little point in learning about them, as I couldn’t see the advantages. If you want to see my first creation 6 years ago – this was it (if you view the image separately the text should zoom in):

So this weekend I decided to go back to my college work and create some SVG by hand. Luckily, for more complex designs, you can use something like Inkscape but I thought it would be interesting to hand code the icons I wanted to create.

First I started by drawing some very simple shapes on an 8×8 grid:

I then created a very simple XML file, and started adding the paths:

Note: The M stands for move, the L stands for line and the Z closed the point. That is as far as I got, but suffice to say that more complex icons won’t be created in this way. You can see the final version here: http://prandall.com/experimental/svg/img/pr-icons.svg

For the next part, I used this post as a tutorial: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/ and the traditional process of displaying a background image. I ended up using an empty span because I found it easier to play around with, but as you can see from David’s tutorial this doesn’t have to be the case.

Conclusion

Seeing the browser support for SVGs, support is varied, but for progressive designs it is worth considering in your next designs. Do have a play, experiment and look into the new ways of constructing sites, because it is an interesting time to create websites.

See the finished article: http://prandall.com/experimental/svg/ (and make sure you upscale/downsize it to see the full effect)

 

Questions about Responsive Design – The Responsive Summit

On 23rd February the first ever Responsive Summit takes place in London. Thinkers and do-ers in the field of responsive web design get around a table to discuss how to make this easier for all of us.

http://responsivesummit.com/

This I can guarantee will enhance how we build sites in the coming years. Some of the questions I have are:

How we can serve up the right images for the right device?

Because of the responsive nature, images usually have to be created larger to compensate. I am wary of this because there have been discussions about increased page bloat and serving up multiple versions.

Further reading:

Is there still a place for ‘mobile’ versions of websites?

With the emergence of responsive and adaptive designs, do ‘mobile’ versions still have a place on the web?

How do we ‘sell’ responsive design to clients?

This is of course, down to the agencies and salespeople themselves. High profile responsive sites, such as http://bostonglobe.com/ have helped, but clients still need to be educated. That is our job.

There is, naturally a slightly higher cost to designing responsive sites, but this is minimal and when compared to separate desktop and mobile versions is usually a lot more cost effective.

How do we present responsive designs to the client?

Designs are typically served up in visual format, most proabably created in Photoshop or Illustrator first. Is there a good way of presenting these to the client whilst conveying the concept? Which leads on to…

Are we going to abandon Photoshop?

Is Photoshop even the right tool to design nowadays. With frameworks and tools available to create demos relatively quickly will this be the standard in the coming years?

Should we still be designing in pixels?

With the emergence of the retina display iPad and multiple resolution devices, have pixels had their day? Has the concept of pixel-perfect designs gone in favour of percentage and em-based designs?

Any other questions?

You can submit your own questions before the discussion takes place on the 23rd Feb by going to the website http://responsivesummit.com/.

7 Song Shuffle

With a concept shamelessly copied from a piece on the radio today, here are the rules:

  1. Get MP3 player
  2. Shuffle songs
  3. Leave a comment with your 7 song shuffle

So, here it goes.

7 Song Shuffle

  1. P.Diddy & The Bad Boy Family – Bad Boy For Life
  2. Nas – No Idea’s Original
  3. Lupe Fiasco – The Map
  4. Queens of the Stone Age – Gonna Leave You
  5. Kelly Clarkson – Because of You
  6. Prodigy – Shoot Down
  7. The Jam – That’s Entertainment

If you want to play the game as well, leave a comment.