The hot topic at the moment in web design and development is mobile first and responsive design, Which is great, I think responsive sites are the way forward and hopefully in the next few years can become a standard practise.  At the moment a lot of clients just want one size and are either not aware or cannot afford all the design work that goes in to designing all the different screen sizes which you need to support,  But that is another blog post all together, So is mobile first as well.

Ok back to responsive design, all great that the layout changes when your screen size is smaller or bigger, but the one big problem that I have not seen a clear answer for is what to do with about images and resizing them when your layout changes.

Looking around the Internet and reading blogs I have heard a lot about the graphics format SVG and and that this would be the answer to the problem but support as never been that good.  I thought I would give it a go and have a look deeper into SVG.

I found a website http://www.svgbasics.com/ which gave a lot of information about creating and coding SVG graphic, which if you do not know SVG graphics are made up of XML which allows SVG graphics to be re-sized easily and without distortion. But this is not really what I want, I want just to convert my image to SVG and be able to drop it in my site like I currently do.

Further research led me to a website where I could convert images, I tried converting a picture of daffy duck, while converting it to SVG the images when from colour to black and white???, No idea why but this led me to ditch the idea of using SVG, which is a shame because I really thought SVG would have been the way forward.

Back to the interwebs!!! Another way of handling images in responsive design is to use a container set to the image size that you want, you then place an img inside the container and set the width and height to 100%.  This means you just have to resize the container and then the image will follow as well.

Responsive  Images

A new technique that I have been reading about is called Responsive Images, This is where you just use the img tag, you set the src attribute to point to the mobile sized version of the image and then you set the data attribute to the normal sized image.  You code could look like this

img src=”images/mobile-size.jpg” data-fullscr=”images/desktop-size.jpg”

To get the img tag to show the correct image you would use Javascript to capture the screen size and then swap the source attribute depending on screen size.

This sounds great in till I found out that new browsers do something called image prefetching which means they start to load the images straight away, which causes the Javascript not to run.

This led me to scratch my head for a bit and all I found on the web is that some of the best minds on the web are working on this but there is no one correct way of doing it at the moment.

The Future
The future is looking like the img tag is not going to be powerful enough, I have read in a few places over the web that we need a new tag. a picture tag, kind of like the video tag in HTML 5. An example of what the picture tag could look like is:

picture
source src=”high-res.jpg” media=”min-width: 800px”
source src=”low-res.jpg”
img src=”mobile.jpg”
picture

I should make clear that this tag does not exist at the moment but could be developed in the next few years. I hope they do because a picture tag could be the answer to a big problem in the responsive design way of making sites.

My answer for the time being

At the moment there is no clear way of tackling this issue, so I would like to share they way I would do it at the moment.

First of all we do not use the IMG tag, we use a DIV tag instead and set the height and width then set the background image using CSS.

Using Media queries we can change the height and width and background image of the div, Now the only problem with this is that it is ok for static sites but for CMS based sites it is just not going to work, My answer to this is just to resize the image based on the screen size using media queries, Kind of like the way where we use a container div and img tag within that but I have just removed the container div.

Conclusion

So to finish up this long post, A new picture tag is needed and the img tag is just not powerful enough at the moment. There is no real long term solution at the moment only short term hacks which I do not really like.

So lets begin!!!

CSS3 Animations means moving an object from one place to another, CSS3 Animations are slightly different from CSS3 Transitions as CSS3 Animations allows finer control over the animation. Researching about the inter webs has led me to believe that people combine the two, but I feel that they are different.

In the post I will give an example of building a circle that changes colours like a rainbow over a period of time and then repeats.

So lets set up the HTML

1
2
3
4
5

<section class="stage">
    <div class="circle1"></div>
</section>

All we have in the code above is a normal section tag with a div inside with a class of circle. That is all the HTML that we need. This code of course goes in between the body tag elements on your web page.

Now on to the CSS. Before we can our div to change colour we first have to set up the animation at the top of our CSS file. We do this by using the @keyframe tag followed by the name of the animation that we will use to call it later on.

The basic code for the @keyframe looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@keyframes rainbow {
    0% {
        background-color: #FF0000;
    }
    100% {
        background-color: #8000FF;
    }
}

Now I should stress straight away that the code above is the way it should be written but at the moment vendor prefix will need to be used, which means writing the code out three times.

Now in our example we want our background colour of our div to change to different colours over a period of time so we have to set our different time periods. The code is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

@keyframes rainbow {
   0% {background-color: #FF0000;}
   10% {background-color: #FF8000;}
   20% {background-color: #FFFF00;}
   30% {background-color: #80FF00;}
   40% {background-color: #00FF00;}
   50% {background-color: #00FF80;}
   60% {background-color: #00FFFF;}
   70% {background-color: #0080FF;}
   80% {background-color: #0000FF;}
   90% {background-color: #8000FF;}
   100% {background-color: #FF0080;}
 }

Remember that we have to use vendor prefix at this time so we need to write them out again twice as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

@-webkit-keyframes rainbow {
   0% {background-color: #FF0000;}
   10% {background-color: #FF8000;}
   20% {background-color: #FFFF00;}
   30% {background-color: #80FF00;}
   40% {background-color: #00FF00;}
   50% {background-color: #00FF80;}
   60% {background-color: #00FFFF;}
   70% {background-color: #0080FF;}
   80% {background-color: #0000FF;}
   90% {background-color: #8000FF;}
   100% {background-color: #FF0080;}
 }

@-moz-keyframes rainbow {
   0% {background-color: #FF0000;}
   10% {background-color: #FF8000;}
   20% {background-color: #FFFF00;}
   30% {background-color: #80FF00;}
   40% {background-color: #00FF00;}
   50% {background-color: #00FF80;}
   60% {background-color: #00FFFF;}
   70% {background-color: #0080FF;}
   80% {background-color: #0000FF;}
   90% {background-color: #8000FF;}
   100% {background-color: #FF0080;}
 }

Now that we have the animations set up we need to apply them to our div, but first we need to set the div up and make it a circle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.circle1 {
position: relative;
border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
border: 1px solid #000;
height: 100px;
width: 100px;
}

All the code above does is make a 100px by 100px div and turn it into a circle using border radius. To attach the key frame animation to the div by using the animation-name css tag. We also need to say how long we want the animation to run for during one cycle, We do this by using the animation-duration followed by a number in milli seconds, so for example 5000 would be 5 seconds. They is also one other tag we need to use and that is the animation-iteration-count tag, this tag simply says how many times you want the animation to loop around, for out little example we are going to be setting this to infinite, which means the animation will keep looping. The final tag we are going to be using is the animation-direction tag, which we set to alternate, this tag tells the animation to reverse when it gets to the end point, which stops it from jumping from 100% to 0%, to the animation will run 0% to 100% for the first loop and then 100% to 0% for the second loop and carry on like that. the CSS Code for our HTML Div is how below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.circle1 {
position: relative;
border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
border: 1px solid #000;
height: 100px;
width: 100px;
-webkit-animation-name: rainbow;
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: rainbow;
-moz-animation-duration: 5000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
animation-name: rainbow;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}

You can properly tell that once again you need to use vendor prefix which means typing it out three times. This leads me on to browser support at the current time of this post, Well as you properly can guess the main players support CSS3 Animations. Chrome, Firefox and Safari all support it at the moment, Opera does not support CSS3 Animation which I found shocking if I am honest. Of course non of the Internet Explorer browsers support it, but it has been said that support is coming in IE10.

For the browsers that do not support CSS3 Animations you will have to either have static content or use Jquery and modernizr.

This was only a quick look at CSS3 Animations as I have been looking into it for the first week back.

Download and subscribe via i-tunes:
http://bit.ly/d34kPD

Download direct and subcribe to the podcast feed direct via:
http://bit.ly/bKbfeq

My website:
http://www.jordanairwave.co.uk

Subscribe to my blog:
http://bit.ly/92ablp

Follow me on Twitter: @jordanairwave

Facebook Fan Page:
http://facebook.com/jordanairwave.co.uk

Google+
https://plus.google.com/b/101660703490729608861/

1. Lost Witness – Song to the Siren
2. Santos – Camels
3. Mathias Ware ft Rob Taylor – Hey Little Girl
4. Trisco – Musak
5. Paul Van Dyk – Tell Me Why
6. Aquanuts – Deep Sea
7. Matt Darey & Marcella Woods – U Shine On
8. Cooper – I Belive In Love
9. Aalto – Rush
10. Agnelli & Nelson – Holding On To Nothing
11. Paul Van Dyk – We Are Alive
12. Hi-Gate – Hurricane

Download and subscribe via i-tunes:
http://bit.ly/d34kPD

Download direct and subcribe to the podcast feed direct via:
http://bit.ly/bKbfeq

My website:
http://www.jordanairwave.co.uk

Subscribe to my blog:
http://bit.ly/92ablp

Follow me on Twitter: @jordanairwave

Facebook Fan Page:
http://facebook.com/jordanairwave.co.uk

Google+
https://plus.google.com/b/101660703490729608861/

Now before you dismiss this out right here me out, We need a cable box to watch digital tv and we need a cable box to get broadband. But with the Xbox, playstation 3 and new Internet tv and if your like me have a mac mini connected to the tv then you need the cable modem near the TV, this is because I would prefer wired connection still just to get max speeds all the time.

With the cable modem being by the TV and the cable box there as well it would be so much nicer to have an all in one box. Surely this is possible? I mean it would mean one less box, which means more space and less cables which surely is a good think. I hope Virgin media come out with a one box solution soon as to me it makes sense.

After getting rid of most of my DVDs and ripping them to my media hard drive I have so much space, plus if you use software like Plex, when you browser through you DVD collection you get to see the DVD cover anyway and plot summary.

I will admit that it does take a bit of time to set up and ripp all your DVDs, but when you have done it, you will not regret it at all. Its time to move up to the modern way of watching films. Streaming and media centers baby!!!

Tracklist:

1. Redroche Vs Armstrong – Make Your Move
2. Roger Sanchezs – 2Gether (Dabruck Klein Remix)
3. Sharam – Fun
4. Shaun Baker – Frontline
5. Skepta – Amnesia
6. Stars on 45 – 45
7. Stephanie Benson – Hangin On
8. Stereo Palma – Lick iT
9. Steve Aoki & Sidney Samson – Wake Up Call
10. Swanky Tunes and Hard Rock Sofa – Labyrinth
11. The Nycer – Lose Control
12. The Banger Bros – Beep Beep Boom

Download and subscribe via i-tunes:
http://bit.ly/d34kPD

Download direct and subcribe to the podcast feed direct via:
http://bit.ly/bKbfeq

My website:
http://www.jordanairwave.co.uk

Subscribe to my blog:
http://bit.ly/92ablp

Follow me on Twitter: @jordanairwave

Facebook Fan Page:
http://facebook.com/jordanairwave.co.uk

This got me thinking about last years awards when there was a lot of talk about the same people winning the awards, which caused Jeffrey Zeldman to write a post on why he should except the awards. But I still felt that if I won a .Net award and would feel a little proud of myself, I doubt though that my wife would feel the same as she would not really understand who big a .net award is to the web design community.

But as I was looking down the winners of this years awards, I starting thinking Really? and What have they done recently?. To quote Family Guy a few things that really grind my gears.

1. To start off with, Why do they have to show Remy Sharps Git hub page when annoying that GitHub is web app of the year? Same old people in the cliq again.

2. Podcast of the Year is The Big Web Show, Now i have listen to this and I have to say that I stopped listening to it because it got a bit boring. Boagworld is still much more interesting to listen to and CSS-Tricks podcast is so good at actually showing you with video, but there is no mention of the sitepoint podcast either. Did the Big Web Show win because Jeffrey Zeldman is on it? Well I am not saying but again look at the names and the cliq seems to have struck again.

3. Mobile App of the Year is Reader. Really??? I mean yes its a good app but no where near the best. BBC News is far better but surely Instagram was more popular as well, but what about Flipboard?

4. Mobile Site of the Year: Facebook. Really because I do not think so. The mobile version of the site was crap and did not work properly. Im sure there are better sites out there, BBC Radio 1’s new mobile design is not bad and is better then Facebook, Plus the screen shot they showed is of Andy Budd and Elliot Jay Stocks, I do not class Elliot Jay Stocks in the cliq but I do class Andy Budd in the cliq and plus he is on the panel for .Net Mag.

5. Redesign of the Year: Mailchimp? I mean come on, just because the cliq recommend mail chimp they win. I know for affact there are loads of great re designs done everyday, so why does it have to be a company the cliq uses?

6. Then on to the final one, Agency of the year. We actually had a vote of who would win this before looking at the result, two of the three of us was right. Clearleft won it. What have they done recently bar put on a massively expensive conferences which I can not afford to go to and Andy Budd is found of and it also advisor to .Net. Even the runners up Happy Cog, What have they done recently? just because Jeffrey Zeldman works there? its a joke. There are plenty of hard working small agencies out there output websites each week to high standards.
These are the points which really annoyed me and as got me thinking that the .Net awards are now pointless and unless your in the so called web design cliq your not going to win it.

Anyway that’s my rant over with.

I have decided to move because for the last few weeks I have been cleaning up my main desktop machine in a mission to speed up the system as for the last few months I have noticed that for some reason the system would just freeze and the memory is not maxed out, the processors are on tick over and the GPU is doing nothing.

I have read on Google that even though the memory management on FireFox as gotten better it is still not great. I have resisted the move for a while now but this week saw me move, I hope soon that FireFox will sort out there memory problems because FireFox really is a great browser for everyday use and developing sites.

UPDATE: 5 hours after changing
I have to say I think FireFox was the problem because since moving the system as been snappy and has not frozen once yet. Now just to move all my computers over to chrome now.

1. Erick Morillo & Eddie Thoneich – Live Your Life
2. Nadia Ali vs Avicii – Rapture 2011
3. Inna – Sun is Up (cahill mix)
4. OffBeat and Di Scala – Bey
5. Karin Nagi – Shake It Up (SuperStylers Club Mix)
6. Redroche vs Armstrong – Make Your Move
7. Kirsty Hawkshaw vs Kinky Roland – Fine Day Reloaded
8. Regi & Tyler – Runaway (LoverushUK Remix)
9. Michael Canitrot – You and I
10. Rhythm Masters & DJ Triple A – Overdose
11. Milk and Suger vs Vaya Con Dios – Hey Nah Neh Nah
12. Alexandra Stan – Get Back ASAP

Download and subscribe via i-tunes:
http://bit.ly/d34kPD

Download direct and subcribe to the podcast feed direct via:
http://bit.ly/bKbfeq

My website:
http://www.jordanairwave.co.uk

Subscribe to my blog:
http://bit.ly/92ablp

Follow me on Twitter: @jordanairwave

Facebook Fan Page:
http://facebook.com/jordanairwave.co.uk