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:

• http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/

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 23^rd Feb by going to the website http://responsivesummit.com/.

Stopgap technology

So I get it, you can go from viewing an advert for a game or DVD on a poster to hovering over the ‘buy it now’ button on your mobile in seconds just by taking a picture of a barcode; I see the benefits, but this is just interim technology stuff.

In an ideal world, if you simply looked at the poster with your mobile phone you could be downloading the demo of the game, browsing the movie trailer, or making a purchase instantly. This is, sort of what you can do now, but what makes this an interim measure is the fact that people have to go out and download software to scan these codes. This really limits the audience, and until software is built into the operating systems, it will always be a niche thing.

Regardless of this, QR codes look too technical anyway. Even if they turned into designed objects like these barcodes from Japan they aren’t sexy; and who wants to see black and white barcodes over everything? How about if you didn’t need a barcode? What if you could just look at the advert through your phone?

Removing the need for barcodes completely

Recently I stumbled across Aurasma that does this, in a sort of clunky prototype way, but the technology is promising. Again, the downside at the moment is that you need to download the app, but if this was built into camera software, and the practice became widespread (so that people almost expected to get something if they looked at it with their phone), no longer would you just look at a printed advert, or watch a 30 second TV clip, you could further immerse yourself into the advertised item, but only if you were interested. This is the key. These things are only popular because people want to find out more.

Final thought

The end result of this becoming mainstream is a deeper connection between what you are consuming in the real-world and the digital realm. This happens at both a social and software level. In an age when we go on to IMDB whilst watching a film to find out what else that guy has been in, to reading real-time comments on twitter when watching X-Factor we can link this together to make things we are interested in easier for us to consume, creating a much more fulfilling scenario.

Feedback

I’d be really interested to find out what your thoughts are on this technology, and how you might think we could interact these things in a better way, if we need to at all.

In this post I’m going to be talking about box styling – any CSS effects that can be implemented on all 4 sides of an element. This can include:

• padding
• margins
• borders

There are 4 different ways of ways of applying styles to the sides of an element. The most conventional is the longest version which styles the sides clockwise from top, right, bottom and left. You can remember this as TrouBLe. This method allows you to set a different style on all 4 sides.

element{padding: [top] [right] [bottom] [left]}

Using 3 figures allows you to style the top, with left and right at the same time, followed by the bottom. This is useful if you require the same size on the left and right, but a different size for top and bottom.

element{padding: [top] [left/right] [bottom]}

Styling both the top and bottom, and the left and right sides can be done using 2 figures. This can be used when the top and bottom sizes are the same and the left and right sizes are the same.

element{padding: [top/bottom] [left/right]}

The last possibility is where all sides have the same size declaration. This can be achieved by using just one value.

element{padding: [top/bottom/left/right]}

Bonus Tip

When using 0 as a value, it doesn’t matter whether it is a pixel, em or any other measure so whenever using 0, just declare it on its own.