SVG Graphics or Responsive Images

I wrote this post a few weeks ago and have now only got round to writing it so apologies for this.

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.

CSS3 Animations

The first week back after the Christmas and New Year break and my first little project was to look at CSS3 animations. Two reasons for this, one, I have always wanted to find out more about CSS3 animation and have a play around with them, and two Langarth the company I work for are looking at ways to implement new technologies into our builds.

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.

No.67 Mad ON:Trance

1. Alice Deejay – Better off alone
2. Milk Inc – Walk On Water
3. Cosmic Gate – Exploration of space
4. Future Breeze – Ocean of Eternity
5. Storm – Storm Animal
6. System F – Out of The Blue
7. Tiesto – Lethal Industry
8. Ian Van Dahl – Try
9. Progress presents The Boy Wunda – Everybody
10. Spoiled & Zigo – More & More
11. Yomanda – You’re Free

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/

No.66 Mad ON:Trance

Tracklist:

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/

Virgin all in one

I have just had a thought so I thought I would share my little thought. My thought is why does Virgin media just supply one box? By this I mean by my TV I have a cable box and a cable modem, now it got me thinking why can’t they offer an all in one solution because it would make thinks simpler and certainly tidier round the back of my TV.

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.