Adventures in Website Design && Development – 3/4/14

As a practicing and learning Website designer && developer, I come across many Website creation related tools, examples, demonstrations, and concepts. When possible, I try to use these elements in my own work. Adventures in Website Design && Development documents my many findings and passes them along to you. In this way, we both are on an adventure to become better website designers and developers.

In this installment, we are going to the Web! Websites, that is. These sites, though simple they may seem, can be helpful when programming or debugging. Are you ready my son? is a single page site by Google which simply reports what browser you are using, gives reasons to use the newest version, and provides links to other browsers in case you want to switch or try out a different one. If someone is having an issue viewing your website but is unable to tell you what browser version they are using, point them here and ask them to copy-paste the results. Do that first thing, you will save yourself massive headaches trying to obtain information while gaining time to fix the issue.

While’s job is to report your browser and is intended for end-user usage, can be used in development and by end-users. Another single-paged site (actually, all sites on this post are single-paged, so why do I bother even saying that) created by WordPress tells what the newest version of the five top browsers (IE, Firefox, Chrome, Safari, Opera) and links to the browser’s respective homepages for possible downloading. When detecting what browser a user is using, you can point them to this site in an error message asking them to update their browser (should that code be triggered). That is what makes suitable for both development and end-users alike. I link back to it myself in the browser detector on Not Pong for those browsers I cannot support. is a unique site in more ways than its URL. As the name might suggest, this is an easy way to create various sized placeholder images for your layout. This allows for continued design and development of your site while you wait for the final pictures/stop writing code long enough to make them. πŸ˜› is a unique site because the image size is created using URL width and height parameters with the actual image being generated server-side. If the height parameter is left off, a square image using the width is created. This allows virtually any sized placeholder image to be created. also offers image color and displayed type URL parameters, letting you create some truly different placeholder images. I saw images on the now live Blender 3D website while it was still on the subdomain. Even if you do not have a current use for it (as I do not at this writing), you should still check it out to play with the URL parameters. πŸ˜›

Ever wondered how many pixels wide and tall the iPhone’s screen is? I have, and apparently the guy (or gal) who created did too. This page’s sole job is to report the three screen resolutions the iPhone has ever had… so far. The boxes themselves do not appear to be the stated sizes but rather a proportionally sized frame, it does help give an idea of their sizes. How does this site come in handy, you may ask? I used CSS3 @media queries for the first time last month, and I needed to know at what screen width to have the call take effect. I came across this site, and after a quick test in both Firefox’s Responsive Design mode an on dad’s 4th generation iPod touch, the value it provided was spot-on. It saved me a few more minutes of searching, and for that reason I list it in this installment. πŸ™‚

Instead of my usual closing remark, I would like to take this time to gather feedback from you, my readers. If you will, please fill out the following short survey. Your feedback will help me better focus Adventures in Website Design && Development to make it even better. All questions are optional and it only takes a few minutes. πŸ™‚

If for some reason you cannot load the survey above, click this link to view it directly. πŸ˜‰

Thank you very much!