Screen Resolutions

fobolous — Mon, 27 Apr 2009 17:34:54 +0000

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

fobolous — Mon, 27 Apr 2009 00:55:09 +0000

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!

Site: www.awoollywedding.com

Highlights:

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?

V I V A N T

Screen Resolutions

Mac vs. Windows: Web Development

Welcome