Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:17Length:2.6 hours
  • Overview
  • Transcript

2.3 Deciding Which Technologies to Use

The technologies you can use in your sites depend on which setups you’ve decided to support. Learn which of the Internet’s newer toys you might have to leave in the shed for a little while, depending on the setups you’re catering to.

Related Links

2.3 Deciding Which Technologies to Use

Hello and welcome to Bombproof Web Design. In this lesson, you're going to learn about how to decide which technologies to incorporate into your projects. Okay, so once you have taken a look at everything that we've covered so far, you've taken a look at your user statistics, what type of project you're gonna be doing, and you've established a baseline approach for the kind of support you're gonna offer. You can move on to deciding specifically which technology you wanna incorporate, which technology you wanna keep out of the picture, and what type of fallbacks and polyfills you're gonna use. To start, with these are the kinds of technologies you're going to have to think twice about before you go ahead and use them in your project. Now you can use every single one of these types of technologies, but you just need to have a little bit of planning before you go ahead, and put a little bit of thought into how you're going to use them. So, we've got HTML5, CSS3, anything that's JavaScript Dependant, say like sliders or menus. Client Side Renderings, so again, that's typically dependent on JavaScript. So client side rendering means that some of the elements of the webpage are actually rendered right there in the client's browser, as they're visiting the page. Web Components, which are a really cool new thing that's coming up, that is going to allow you to define custom HTML elements. And you'll be able to make those HTML elements do anything you want. And finally, Flash. So we're gonna start by having a look at what you might like to think of as problem browsers. And that pretty much means IE9 and below, as well as Opera Mini and Mobile Classic. So, what I mean by problem browsers is, you might find that these particular browsers struggle to render various things, work with various things, in particular HTML5 and CSS3. So, there are two sites that are going to be invaluable to you as you figure out how you're going to work with these problem browsers. And they are caniuse.com, and html5polyfill.com. Let's have a look at those sites now. This is caniuse.com, so on the front page here, you can see a list of lots, and lots, and lots of different properties, CSS, HTML5, SVG. So, what this site will let you do is take a look at any of these links here. So if, let's take a look at media queries, for example. It will give you a really in-depth chart showing you which browsers support the property in question, and which browsers don't. So, what you can do, once you encounter a property that you know that you want to use, but doesn't have support in all the browsers that you need to support. You can head over to HTML5 Polyfills, so here we go. You can then look for the property in question in this list. And you can click on the listing for that property. And this site will let you know, what the available polyfills are. The other thing that you'll want to consider when you're looking at Opera browsers is, it can be a little bit confusing at first telling the difference between one Opera browser and the next. So you have the desktop browser. Which is, these days is actually based on Chromium. So the desktop browser works almost exactly the same way as Chrome. If something works in Chrome, it's going to work virtually assuredly in Opera Desktop. However you also have three different, no sorry, four different mobile browsers that they have available right now. So the one that offers you the most trouble is the Opera Mini browser. But they also have another browser called Opera Mobile Classic. Plus, they have a browser called Opera for Android, and they now have a new browser called Opera Coast which is for iOS. So, for a long time, Opera Mini was the only browser that was available on iOS, and they have just released Opera Coast. And I haven't been able to have a look at Opera Coast. But, if you're an iOS user, you can check that out and see how it compares to Opera Mini. So if you come and you have a look at this website, I'll provide a link below this video, you can see the differences in support for some of the different selectors, and HTML5 as well, the CSS selectors and HTML5. The differences between Opera Mini and Opera Mobile, because you won't actually get that differentiation on caniuse.com. So, you see here, Mobile Classic does have a little bit more support for a lot of the CSS elements than Opera Mini. So you can have a look at this chart, as well as caniuse, to help you figure out where you need to use polyfills or perhaps avoid any given technology. As well as the semantic elements that we just touched on, there are two other common HTML5 elements that don't have proper compatibility with older IE and Opera Mini. They are the video element and the audio element, which allow you to place videos very simply into a page, or Mp3s and other audio tracks directly into a page. So, those are if you're planning to use either video or audio, you'll need to either let people on older IE or Opera Mini know, that they are missing out on a piece of media. Or use one of the polyfills that you'll be able to read about at html5polyfills.com. The area that you'll run into at a higher number of compatibility issues with, regarding the older browsers, is CSS3 properties. So, I just want to go through the most common of these, these are CSS3 properties that you'll almost certainly find yourself wanting to use, but they are not all supported on older IE, and on Opera Mini. So, I'm not going to go into exactly what these properties do, or the available polyfills, or anything like that. I just wanna give you a quick overview of these properties. So that when you encounter them, you'll know that you need to take a bit of a closer look before you press on with using them. So, first up is CSS3 Media Queries, which are fairly integral to responsive design. They are not supported in IE8 or lower. CSS3 Background-image controls, again not supported in IE8 or lower. Rem units, as opposed to using pixel or em values, not supported in IE8 or lower and also not supported in Opera Mini. Flex box, which promises to be the layout controlling mechanism of standard web design in the future. However right now, not supported in IE9 or lower, and also not supported in Opera Mini. @font-face, for incorporating web fonts and also font-based icons into your designs, also not supported in Opera Mini. CSS3 Color declarations. So, for using things like RGBA color values that allow you to set your base color and then make that base color partially transparent, not supported in IE8 or lower. CSS3 Gradients, again not supported in IE9 or lower, and also not supported in Opera Mini. CSS position:fixed, not supported in Opera Mini. It is supported in IE8 and above, so don't worry too much about the IE side of the equation with this. Again, just provide that general notice to any IE6 users, that they are not going to have the full experience due to the browser that they're using. CSS3 Animation, again IE9 and lower does not support it, and nor does Opera Mini. CSS 3 Border-radius, i.e rounded corners, not supported in IE8 or lower, and not supported in Opera Mini. And CSS 3 Box-shadow, not supported in IE8 or lower, and not supported in Opera Mini. So what about JavaScript dependent technologies, which includes web components and client-side rendering? You might think that the percentage of people who don't have JavaScript working in their browser makes it not worth your time to consider providing support for those without operational JavaScript. But it might be more of an issue than you think. You can't go purely by statistics on who has JavaScript actively switched off in their browser. So there is going to be always a certain percentage of people who will take the steps required to not run JavaScript in their browser. There are other reasons that JavaScript might not properly render in a person's browser. One of those reasons is, in some workplaces, network administrators will block JavaScript from operating in the workplace. Another factor is that there can be connectivity issues that prevent JavaScript from being properly downloaded and properly operating in the browser. So, let's take a look at a quick example. This is the Google Web Fonts site, and this site is entirely dependent on JavaScript. If I disable the JavaScripts on this page, You can see you get absolutely no content whatsoever. Now, something interesting that I noticed was that, this website also gives you a blank page in Opera Mini. Let's have a look at the emulator. So this is Google Web Fonts in the Opera Mini emulator. And we have absolutely no content. So, I can't be sure exactly why this doesn't show up in Opera Mini, but I suspect that there is some type of issue with the JavaScript being properly downloaded and evaluated. And, as you saw in the earlier look at Google Analytics stats, Opera Mini is a fairly common browser. So you can't be 100% sure that you can rely on JavaScript being there. Here we have some example web components. Now, these components are powered by the Polymer project, which means they have a fair degree of cross-browser compatibility. However, they are still dependent on JavaScript, so if we turn off JavaScript, let's see what happens. You get nothing whatsoever, so there's no content here at all. If you just take this approach, and don't also include a fallback if you're going to be using these web components. This is another Polymer component demo page. And again, let's see what happens if we turn the JavaScript off. So, all the layout collapses, you do still have some content that's visible, but it's not formatted as expected. And lastly, let's have a look at some client-side rendering. So this is Discourse Forum, which is a fantastic forum, I really, really like this technology. It's very quick. It has a lot going for it. However, let's see what happens when we turn off JavaScript. Not so nice, because this software works client-side, it renders client-side. When you don't have JavaScript going, you don't get a very nice result. Now that doesn't mean that you shouldn't use the software, you definitely should use the best software that fits your project. But just make sure that you have a plan for what you're going to do if there are compatibility issues. And the last of the technologies that you're going to need to be a little bit careful with is Flash. So, Flash is tricky. There's a lot that you can do with Flash if you're doing things like games but, if you're looking at providing video content, it's a pretty bad idea to just depend on Flash. So you wanna have a combination of using HTML5 elements, using polyfills, and using Flash, if you're going to be placing anything that's gonna have a Flash Media element to it. And these days, because a lot of mobile devices do not and will not ever support Flash, it's a bad idea to use Flash for anything that's integral to your site. So, I still every now and then I encounter restaurant sites with menus that depend on Flash. However, there are virtually no sites that don't have mobile traffic these days, so if you're going to be using Flash, use it very sparingly, and always have other alternatives. When you've chosen the technology you'll be using, and therefore the setups that you won't be supporting, you'll need a plan for what to do when visitors come along who are using that unsupported setup. That's what you'll learn in the next lesson. Starting with, what to do when there's no JavaScript.

Back to the top