Internet

iPhone Website Testing: Windows Browsers vs. iOS Simulator

I believe that in most cases, it’s important to test your website’s design on an iPhone and an iPad. This is easy to do if you own both of these devices or if you own a Mac (since Macs can use the free iOS Simulator, which can be downloaded through Xcode). But what if you do your web development on Windows and don’t own one or both of these devices or a Mac? People often suggest using Chrome or Safari because they both use the WebKit rendering engine, which is what Mobile Safari uses. It’s just a matter of overriding the browser’s user agent string and resizing the viewport. But is this method just as reliable as using the iOS Simulator? I did some tests to find out.

The Test Environment

I ran iOS Simulator 5.1 (272.21) on Mac OS 10.7.4 and I ran Chrome 20.0.1132.57 and Safari 5.1.7 (7534.57.2) on Windows 7. All three browsers used the following user agent string:

Mozilla/5.0 (iPhone Simulator; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3

The Results

Conclusion

Although Chrome and Safari on Windows can produce results quite similar to iOS Simulator, I don’t believe they should be considered as reliable as iOS Simulator. Of course, none of the three should be considered a true replacement for the actual iOS devices, but I’ve compared all three to my iPod Touch and iOS Simulator definitely does a great job. So should you shell out your hard-earned cash for one or more expensive Apple devices? That’s up to you. Just be aware of the potential risks in putting too much trust in Chrome or Safari on Windows. Lastly, if you have the means, I encourage you to do your own tests before making a decision.

Create Your Own Twitter Kiosk

I recently found myself in need of a way to view a Twitter timeline while having the following two requirements met:

  • New tweets must show up automatically
  • The font size must be able to be set high enough to see from across the room, preferably for only the first three tweets (as opposed to all of the tweets)

I scoured the Internet for a Twitter client that met these two requirements and was quite surprised to find that all of the major Twitter clients (TweetDeck, Seesmic, twhirl, etc.) lacked the ability to set the font size to a very high setting. I could just use the official Twitter website and use my browser’s zoom control to increase the font size, but the thing about the official Twitter website is that it doesn’t show new tweets automatically; it only notifies you of new tweets.

Seeing that I couldn’t find a Twitter client or webpage that met my requirements, I decided to create my own webpage. Since the time I made that decision, I’ve created a PHP/JavaScript version and a JavaScript only version. I call it “Read Only Twitter” because it’s meant strictly for viewing a Twitter timeline; not for tweeting.

I highly doubt I’m the only person in the world in need of a Twitter client or webpage that meets the two requirements listed above. That being the case, I decided to release my project to the world.

You can view a live demo (using the public Twitter timeline) and download the script here.

How to Manage Home Pages in Internet Explorer

Although I’m not a big fan of Internet Explorer (as made clear in my last blog post), there are times when you have no choice but to use it. This tutorial will show you how to manage home pages in Internet Explorer versions 7 and 8. If you’re not sure which version you have, open Internet Explorer (if you’re not using it already) and visit http://www.thismachine.info/. It will say which version you’re using in the “What browser am I using?” section.

Say Hello to the Home Page Button

Internet Explorer has a home page button in the toolbar, located here:

Internet Explorer home page button

Internet Explorer home page button

Notice in the picture above that the home page button has two parts to it—the part with the house icon and the part with the arrow. If you click the part with the house icon, Internet Explorer will open your home page(s). If you click the part with the arrow, you can manage your home pages. On my computer, this is what I see when I click the arrow:

Internet Explorer home page button (clicked)

Internet Explorer home page button (clicked)

I only have one home page (Google), but you can have several home pages if you want to. Each home page will be opened in their own tab. More information on tabs will be provided later in this tutorial.

How to Replace Your Home Page or Add a New One

  1. Go to the website of your choice
  2. Click the arrow directly to the right of the house icon (shown above)
  3. Click “Add or Change Home Page…”
  4. You will be asked if you want the website you’re at to be your only home page or if you want it to be added to your home page tabs. The choice is yours.

How Does Having Multiple Home Pages Work?

If you have multiple home pages and you open Internet Explorer, each home page will be opened in its own tab in Internet Explorer. Tabs are shown at the top of the Internet Explorer window, like this:

Internet Explorer tabs

Internet Explorer tabs

This is a very useful feature because if you always go to a few particular websites every time you open Internet Explorer, this saves you the trouble of having to go to each website one at a time. You can easily switch between the websites by clicking the tabs at the top of the Internet Explorer window.

What’s Wrong with Internet Explorer?

Internet Explorer is the most widely-used web browser in the world. Most people use it simply because it’s the only web browser they have on their computer. They aren’t aware that they have other choices such as Mozilla Firefox, Opera, Safari, and Google Chrome. So when they want to check their e-mail, or get driving directions, or watch a video, or go on Facebook, what do they do? They fire up Internet Explorer and away they go. So what’s the problem? Well, there are actually three problems:

  1. Internet Explorer is insecure and unsafe.
  2. Internet Explorer is much slower than other web browsers, as shown by the graphs on this page.
  3. With Internet Explorer, things often don’t look the way they should.

Although the first two points in the above list are important, this article focuses on the third point. Here is a link to a page on my personal website showing ten examples of things that look wrong in Internet Explorer, but look right in Mozilla Firefox, Opera, Safari, and Google Chrome:

Ten Things That Look Wrong in Internet Explorer

Please note that there are far, far more problems than just ten. The point of the page is to make it easy for the average person to see the problems. For a much more technical and exhaustive list of problems in Internet Explorer, see this page.

Why is Internet Explorer so different from other web browsers?

For whatever reason, Microsoft (the maker of Internet Explorer) decided to program Internet Explorer in such a way that it breaks many important rules of the web set by the World Wide Web Consortium (W3C).

What is Microsoft doing to fix Internet Explorer?

As of March 2009, Microsoft is still developing the next version of Internet Explorer (version 8), which aims to be more compliant with the rules of the web. They have a public preview available to download, but it’s still far from perfect. Even when it’s finished, I’m sure it will still have many flaws.

What should I do?

You could cross your fingers and hope that Internet Explorer version 8 ends up being a good web browser, but I highly doubt that will happen. I recommend immediately switching to Mozilla Firefox, Opera, Safari, or Google Chrome. That way you can surf the web much more securely, much more quickly, and with the confidence that you’re seeing the websites the way that they were intended to be seen.

Be aware that there are some websites that require Internet Explorer. If you happen to run into one of those websites, go ahead and use Internet Explorer for that website, but don’t use it for anything else.

How to Download Videos from the Internet

Method 1: KeepVid.com

KeepVid.com works with most video sharing websites such as YouTube, Google Video, Metacafe, and Dailymotion. This is usually your best bet. Follow these steps:

  1. Go to http://keepvid.com/
  2. Paste the address of the video in the “URL” field (example: http://youtube.com/watch?v=3V5a8mDTW6k)
  3. Click the “Download” button
  4. If it worked, you will see one or more links that say ›› Download ‹‹. Download the one that says “High Quality” if there is one. To do this, right-click the link and choose “Save Target As” or “Save Link As”. If there isn’t a “High Quality” download link, just download the one that says “Low Quality”. If there are no download links at all, that means that it didn’t work and you will have to try method 2 (provided you are using a Windows computer)

Method 2: VideoCacheView (Windows only)

If method 1 didn’t work, you can try using a program called VideoCacheView. If this is your first time using method 2, you will need to do parts A and B. If you’ve used method 2 in the past, you can skip to part B.

Part A:
  1. Download and run the installer for VideoCacheView
  2. You will see a window with several checkboxes and other things. You can leave everything the way it is and just click the “Install” button
  3. You will see a dialogue box that says “VideoCacheView has been successfully installed on your computer.” Simply click the “OK” button
Part B:
  1. Clear your web browser’s cache. If you’re not sure how to do this, go to this page and follow the directions
  2. Open your web browser, go directly to the video, and let it fully load. After it’s fully loaded, close your web browser. Don’t watch any other videos or do anything else or else it might make things harder in step 4
  3. Click the “Start” button, then “All Programs” (or just “Programs”), then the “VideoCacheView” folder, and then the “VideoCacheView” icon
  4. VideoCacheView will automatically look for videos you’ve watched online and show you a list of what it found. Unfortunately, the names of the videos it found generally won’t be helpful in identifying what the video actually is. Hopefully you will only have one thing on the list. That means that you know for sure that it’s the right video. If that is the case, click once on the item so that it’s highlighted. If you have more than one thing on the list, scroll to the right until you see the “File Size” column and then click once on the item with the largest file size so that it’s highlighted
  5. Once the file is highlighted, click the button that looks like this: videocacheview-save
  6. You will then see a window asking where you would like to copy the file to. Click the “…” button on the right and choose a folder of your choice, such as your desktop, and then click the “OK” button
  7. You will then be back at the window asking where you would like to copy the file to, only now the folder shown in the text field will be the one you chose in the previous step. Click the “OK” button. The file will be copied to the folder you chose. At this point, you can close VideoCacheView

What to do once the video is saved

Once the video is saved, you may find that it doesn’t play when you try to open it. If that’s the case, that most likely means that you’re missing something called a “codec”. You have two options at this point:

  1. Install a codec pack such as K-Lite Codec Pack
  2. Install VLC media player, which is a program that opens virtually any media type without the need of installing any codecs