What is technically possible in web design

In this video we’re going to look at ways that we can help ourselves  when we are building our site after photoshop.   So, in photoshop we have an infinite amount  of things we can do.  We can have a gradient with a drop shadow with unicorns flying out of it, and fire and all sorts of things.  So we can do that in photoshop - it’s that kind of program, but when it comes to web design we are quite limited in terms of the types of things we can put on a website. Due to its code and mainly it comes down to the browsers, and how old the browsers are, depending on what they can and can’t support.

So flying unicorns,  no, there’s no CSS feature for that, but there are features for gradients and drop shadows. So what we can do, we can use this website called caniuse.com, Now there are other sites like this one - I really like this site.   Let’s say we want to work with gradients, so if I type in gradient here, it tells me that the CSS gradient works on everything except “Opera Mini” .   Now if you need to support  “Opera Mini”   then you are going to have to think twice about using CSS gradients.  Luckily gradients  are out at the moment, and it’s all about Flat Design, but say you needed  to have a gradient, that if you have to support this “Opera Mini”  then you are going to have to not use CSS gradients.

Another thing you might need to find out is whether you have to support some older browsers. So if you are building a website, and the rule is we have to support at least a minimum of Internet Explorer 9, you’re not going to have CSS gradients.  Now it doesn’t mean you can’t use it, it just means that they’re not going to appear.  So you might design it so that there is, if the gradient is not applied, that there is just a flat background.  OK flat background colour, and that might be fine, because it’s in the background and it’s not a huge important part of it.  Let’s say something like - let’s look at shadows.

OK, so shadows there's a couple of different shadows, box shadows,  The shadows are hanging off the side of div tabs - that works pretty consistently.  Let’s look at text shadows, so it’s not supporting IE 9 again.   Now this might be more important, because you might be deciding that I’m going to have this very light blue text on this white background, but it’s totally not readable unless there’e a drop shadow behind it.  OK, so  you’re relying on that drop shadow for the text to be read.   And what that will do is that internet explorer 9 is going to be this really faded out text on white background,  so it’s a little bit more important just to have a look at the site.  Sometimes you are thinking,  I wonder if I can do that on a website or not.

Now another nice little extra for the site,  is here it’s protected in Ireland at the moment.   That’s where I’m filming at the moment.  I’ll click import.  it gives me this nice stuff, so at the moment if my defaulter gave me the global stuff, and now it gives me what is actually happening in Ireland, so you can see globally they’re 90%  supported, but Ireland is 97% supported.  So global takes in all countries.  Whereas Ireland is technologically quite modern, so a lot more is going to be supported, - quite modern browsers and modern computers.  Now if you are doing a site that is specifically for, say a developing nation, your’e going to have a lot different ratio again.  You are going to have a lot lower. you’re not going to be able to use some of these features as much as we can here in Ireland.  Alright, that’s the  “Can I Use”  website.