Screen Resolutions

27 04 2009

Interesting artlcle about the latest, most-commonly used Screen resolutions of web users, posted this month (so rather recent).

According to the article, over 80% of web users are using beyond 1024×768. Does that mean web designers are now designing for 80% of users, rather than still trying to support the other 20% with dinky 1024 (and lower) – wide screens?

Currently a topic of debate for both my personal project and work project. I’m also contemplating writing some logic (ie. PHP) to support both types of users, but then again a wedding website doesn’t warrant enough traffic to write this. At least as much as an Enterprise solution, in theory….


Mac vs. Windows: Web Development

27 04 2009

I recently completed a wedding website for a friend, written in PHP, HTML, CSS, Javascript (essentially front-end development). I created a few designs in Photoshop, and after reviewing and tweaking, we settled on a site design. I began splicing it up into its respective HTML pages, leveraging CSS styles where possible (over static images), and incorporating Flash widgets where possible. (I also wanted to dust off my rusty web design techniques, since it has been a while since I made a site from scratch!)

As a Mac OS X user, I had the pages showing up almost identical to the layout I designed in Photoshop. Setting ‘position:absolute’ CSS style widths and height made placement of certain elements exactly where I wanted it! …Until I decided to view it outside of Safari that is. Everything was out of place! At least the messed-up layout was consistent on both IE and Firefox. Lucky for me, I was able to view the site on IE7 and Firefox3 on Windows via VMWare. I had forgotten that <div>tags have linebreaks built-in, while <span> tags do not. And I learned (the hard way) that using ‘position:absolute’ is the absolute devil. It did take me another week just to construct the site format to look the same across all browsers and systems, but I learned more about CSS styles and HTML tags than I ever expected to. And have gained more respect for web developers than ever before!



  • Flash widget: Photo Gallery
  • Use of frames to keep music playing as the user navigates across pages
  • PHP includes to reduce redundancy
  • CSS Opacity combined with a:hover makes for a cool effect
  • Photoshop: Save As Web… should only be used to reduce the quality of the image — Struggled with this for some time to make the title banner transparent without losing quality!

Features to be added:

  • Built-in Music Player (xspf) — TBC!
  • Increased screen size: Suited for 1024×768 resolutions, but it looks small on a 1600×1200. What is the norm these days?


21 10 2008

Welcome to the new website of Vivant!

Coming soon…