Regular readers of my blog might have caught the small blurb I did on Responsive Web Design a few weeks back when I updated zsprawl.com’s landing page. For those of you that missed it, Responsive Web Design, coined by Ethan Marcotte, is basically designing your website to be viewed on a mobile page with a width of 320px, then scaling it all the way up to the large screen TVs that people are playing games and surfing on from their couches. Unfortunately this isn’t an easy proposition, but a few techniques will help you accomplish your goal. First and foremost, you must make the switch from pixels, or px, to em.
Wikipedia defines the EM as a unit of measurement equal to a 16 pixel typeface. Therefore, in web lingo, 1em is equal to 16px. Likewise, 1.2em is equal to 19px, and so on. If you design your entire website with this reference point, zooming and scaling your site is theoretically as simple as changing the definition of 1em. As you can imagine, these em’s are critical if you plan on making a site that can be viewed on tiny and large screens alike. That is where the px2em zApp comes in. For 99 cents, this small little app is ready at a web designer’s finger tips to do the quick conversion from PX to EM and back again.
To use the zApp, just set your base PX value, the size of your relative PX, and px2em will generate the EM value for you. A web designer might do this 100 times in a single web page, so having something simple and easy to scale up or down as needed is critical. Sure you can use a normal calculator, but you will have to type in the formula each time. With PX2EM, all you do is change the one value, and your new calculation is ready to go.
I made this App because I needed to do the calculations, and now I am sharing it with my fellow web developers. Hope you enjoy! I apologize for the 99 cent price, but I saw no easy way to slip in Ads, and well, I need a little payment for my time. Don’t worry, it isn’t much. Enjoy!