Lessons

Lesson Info

Browser Differences and Testing

What do you do when your browser doesn't let go of you? Made a change in the brother and you can't see the change. The browser won't let go of the old files. Yeah. So what you saying is, you know, when I when I was working on that California wildlife site and I, um, I made a change and I had to do the refresh. I had to do the refresh to see that change. He's saying, you know, I've done this and I tried refreshing. It's still than update. So why is that happening? And one of the challenges with Web design is it could be any of a number of things. So it could be that you didn't hit refresh hard enough. And you just need to click again, knowing you I'm guessing you you did that. It could be that cleaning the entire history on your browser will get rid of it. And for some reason, your browser's just soak committed to that page. It doesn't want to let go of it. If you go in and clean the history, then it Orc, make sure you don't have the page open in the browser when you're cleaning the his...

tory. Close that page. Clear your whole history in your cash, then open that page again. The other thing I often dio I always have multiple browsers on my hard drive, so I've got Dreamweaver, Safari and Firefox here. If I'm having trouble in chrome a lot of times, I'll just pull up Safari and try the same thing. Let's go back to that California wildlife photography site here and see Hey, wait a minute. That looks totally different. Oh, yeah, that's the one we're about to design, but local version that it remember. So yes, the big. A lot of times a second browser is helpful. And honestly, as a Web designer, I think people underestimate what an advantage it is in surfing the Web to know something about how the Web works. Because a lot of times you're surfing asleep and something's not just just not working, especially an interactive feature or ah, form that you're trying to fill out, or something like that. Switch over to a different browser, visit that same page, and it may work just fine. And that gets to the root of one of the biggest problems with Web design that you can design a page that looks fantastic in the latest version of Safari on Your Mac. And if somebody looks at it in an old version of Internet Explorer, it may look very different, and it may not look very good at all, and that has to do with the evolution of HTML and CSS. The evolution of browsers and what they support and the fact that we have different different versions of HTML code are displayed differently in different versions of browsers. What I'm gonna show you today should work very well in all of the latest browsers, meaning the last few versions of Google Chrome, Firefox, Safari even offer an Internet Explorer. But if you know that you're designing for a group of people who are still in using Internet Explorer six Heaven for Men Uh huh, I joke about that. But anybody who knows anything about Web design knows that probably the most problematic browser in the history of rousers and anybody at Microsoft off the record will quickly admit this was Internet Explorer six and again, In fairness to Microsoft, it had more to do with their interpretation of HTML and CSS being different from other people's. I'm gonna do a very quick power point on this because I think it's so important to understand this because one of the biggest frustrations of Web design is this issue of browser differences. And one of the kind of underlying reasons that some of many of the things we do in website seems so complicated and convoluted stems from this challenge. And once you get this, I think it helps you. I kind of understand and maybe even forgive some of the challenges of Web design that aren't about Dreamweaver and aren't about WordPress and aren't about go live or any other tool you've ever used. Their about the fact that when you're designing for print, you've got total control right up to, you know, standing there at the printer and checking the color as it comes out of the printer. When you're designing for the Web, you're creating pages that have to work on every device on the planet and be interpreted by a whole bunch of different programs and a whole bunch of different operating systems and a whole bunch of different screen sizes. And that challenge, which makes the Web so powerful, is also what makes Web designs so complicated. So the first thing I'll ask tossing out to the audience and a poll. Which Web browsers and what versions are you using? So I'm going to guess that I'm gonna get chrome and Firefox and Safari. But let's see if anybody's still using Internet Explorer. Maybe did a little opera, Who knows? Yeah, and if you use multiple ones, you can list them. So I'm just kind of curious. What about you three? What's your browser of choice? Well, I use Internet Explorer Opera Safari. I have a whole variety of What is the one that you usually use the moment story I used. Mostly, I use Internet Explorer and why your Windows guy and you're just used to it? No, Uh, I don't know. I have a lot of things set up in Internet. I have a lot of shortcuts that I've been Internet Explorer, and, um, I just too lazy to set up the others. That's an honest answer. I'll grant you that. Well, I, um I use the best tool for the job because I do see the awesome answer. Some websites work better with other search engines, so you just kind of have toe go with that. But because of work, um, our default is Internet Explorer. So that's the one that I use most often just because so good for all the Web designers out there to hear this, because Web designers, by and large put Internet Explorer at the bottom of their list, and Google Chrome or Firefox or Safari at the top of their list in terms of personal preference for bras, areas. But so many people because it's what they've used because it's what they've already got set up because that's what everybody uses it. Work are using Internet Explorer, and I think it's easy for Web designers. Forget that. Thank you for sharing that, and and I probably use Chrome most just because it ties into all my other applications that I use and it's just easier to get around. But I use IAEA's well, and then when I'm on, obviously on my IPad, I gotta use safari, so welcome to my world. So Google Chrome is my browser of choice, but like you and I think that's a really good answer, I use different programs depending on what I'm doing. Sometimes things are optimized for Internet Explorer, and they don't work quite as well in Google Chrome. It's all switch back and forth and, of course, for testing, which is what I want to talk about real quick here. And I'm gonna come back to you with that whole. Don't worry. There are a number of browser testing tools in the world that are born out of the fact that, um, most of us don't have the last eight versions of the top browsers on our computer. We have the most recent one or the one we've updated most recently. Maybe there's a new update we haven't quite gotten to. But most of us have relatively new browsers on our computers, and it's hard to test in really old brothers. So the browser sandbox browser shots dot org's crops browser testing dot com South Slabs are also whose loves I don't know. I'm probably butchering the name of that are all online tools that are either emulators or simulators of browsers, and I'll give you a quick snapshot of one. So if you're looking at a website like this one in browser shots, you can go in and see how it's gonna look and the way browser shots works, it has a list. You see this list. I know it's a little hard to see, but that's a lot of things. Those are all different browsers, all different browsers and different versions, and you check the ones that you want. Your site tested in its browser shots dot org's and it comes back Teoh. After a period of time, there's a free version of this tool. There's a premium version if you pay the premium price that works faster, but it'll take a little while. It comes back, and what it does is visit any U R L you put in there. The site has to be on the Web. You can't test something on your computer this way. But once you've published it online, you could put in the URL, and it comes back with a little snapshot. It takes a screenshot of your page in each of those browsers and then shows you that you can click on one and zoom in on it and see how it really looks. So you can see where is the one that I just had, for example, that sometimes that fought won't be the fancy fun if it's an older browser, depending on what browser it is. Older versions don't support Web fonts. You may see the difference, so this is a very handy testing tool on my website. At digital family dot com, you'll find all of those links If you miss them, just go to my website and search for how to test a website in different browsers, and you'll come to this article. What you see here is a very common problem with Internet Explorer six because it dealt with margins and patting different from other browsers. You could get two columns perfectly lined up in one browser and then an Internet Explorer. That column would fall down below. That is a really common problem. Old browsers. The newer versions of the browsers are more consistent. But the more precise your design, the more risks you have that things can end up a little out of alignment. So that's why I had this article on my site and links to those testing tools. Some of the other testing tools for a fee are more sophisticated, and instead of just taking a snapshot, they'll actually let you take over a remote computer and you contest on, you know, Windows XP using Internet Explorer or five and really interact with your sight and make sure that your forms still work. And if you're a really high level of Web design and you need to design for the broadest possible audience, those tools are incredibly valuable, so you'll find links to them on my site. If you just want a quick you know, idiot check. Does this work? In the latest browsers? A very popular website is called Qin. I used dot com, and you can go there and type in any CSS html tag, and it'll show you in the most popular browsers what what supported and what's not and in which versions those features air supported. So if you just think, you know, drop shadows on text boxes and CSS is that supported an Internet Explorer for or not? You can come in here and find out kind of a handy tool for that. So what are the results of my of my poll? So what browser is winning the browser? Waas. Well, you know, it's a big mix, as you had anticipated. Jello Designers using Safari 6.5. Ray is using chrome safari Firefox, but I only to test What would I do? I only the test way. Firefox's Netscape, Netscape Somebody still has old version and Netscape. That's impressive, so most of it's pretty across the board. But Chrome and Firefox are the really the ones that are timing in, which would be similar to we, you know, Googled. What are the top browsers? That would be pretty much absolutely if you look at the trends of use. Internet Explorer used to dominate because it comes built in the windows and Windows dominates the market. But over time, Google has really taken over Firefox. Now, at the end of the day, it doesn't really matter what the browser use is statistically on the Web. There's some sites where you can see general usage at the end of the day. What matters is who is visiting your site and what tools they're using, and that if you use Google Analytics or if your Web hosting service provides logs, you can often find out in those logs exactly what browsers on what browser versions people are using, and you may be surprised to find that you have a huge contingency from you know sub Saharan Africa That's actually still coming in Internet Explorer six, or people who work at a big company that visit your site regularly and are locked down from upgrading and are still using an older version of one of the browsers. And you can find out statistically where that's coming from and why. But there are certain populations that are more likely to be using older browsers. And if you're sites focused on that, you need to think about it more in the modern world. If you're just creating a portfolio site for creative directors, you could probably assume most of them are using the latest browsers. And the latest versions of the latest browsers are relatively consistent for the kinds of sites we're gonna show today. But I have to warn you about this because it's such an issue, and it's so devastating to create a beautiful sight for a client on your Macintosh and safari and then go to their office and find out they're using a laptop with IE seven, and it just But that's not what your site looks like or be on the phone with them and have them say How come it looks. And that's why. And so one other thing that I do is always ask my clients with their browser of choice is just to make sure they don't get surprised. And although we worked very hard to design sites that work well across many different browsers, most Web designers today set a limit we designed for the last five versions of the most popular browsers, For example, um, and just be transparent about that with your clients and your audience.