Quevin blogs

"The Lightbox Clones Matrix"

Quevin — Tue, 22 Jul 2008 13:03:54 +0000

I didn't realize how many "lightbox clones" were actually in existence. This site can filter 41, based on various JavaScript libraries and features.

Comparison of various scripts that display images and other objects in somehow cool CSS popups

The Lightbox Clones Matrix

What's Necessary to Create A "Beautiful Website"?

Quevin — Fri, 18 Jul 2008 21:51:18 +0000

In response to this LinkedIn question, here's my short answer...

What are the different technologies being used for creating beautiful website? also which is best "PHP", "ASP"? what's the difference?

As a Web Developer, I prefer PHP with MySQL as DB, and Apache on UNIX/LINUX.

I believe a "beautiful website" requires a good Designer who knows XHTML/CSS SOME. In fact, I prefer when a Designer doesn't like coding, as that's a sign that they enjoy design more. However, they still understand how to design with the code in consideration. You should hesitate (and reconsider) if you want to let a print designer design your website.

Page backgrounds, alignment, "the fold," resolutions, color variations, far-too-complex gradients and page footers should never be an afterthought for a good Web Designer. And a wireframe isn't foreign to them, in fact it should be the first mockup they provide.

If you're in a hurry to build a website, and you don't have much of a budget, it's OK to start with a template and modify from there. However, web development is another story...

There's usually a big difference between a good back-end Engineer, and a good front-end developer. With one, you may get a website that runs well, but doesn't match your original design. Lots of details missing. But a good front-end person may match your design exactly, and not know how to apply all the complex hooks for a solid back-end production.

Therefore, for a "beautiful website," I believe you need...

A "beautiful Designer" (visual/Photoshop).
A "beautiful Front-end Developer" (XHTML/CSS, knows Photoshop to slice & optimize images).
A "beautiful Engineer" for the back-end.

...and a very "beautiful Project Manager" to protect them from Marketing and Executive Management who like to change everything, even after sign-off. Someone on the team should know when to say no (politely with reason).

iPhone 2.0 Update - iTunes Store Crashes & "Bricks" Phone

Quevin — Fri, 11 Jul 2008 19:51:56 +0000

Who else tried to update their iPhone at 8AM today, only to find that their phone becomes useless due to the massive influx?

I'm patiently waiting... while in the meantime, I apologize if you're trying to call me.

GIZMODO - "iPocalypse"
TWiT Live - This is far too much attention to offer...

It's 11:43 AM and I still have no iPhone activation.

12:08 PM - It works!!! About time...

Farewell MT4, Hello Drupal 6

Quevin — Wed, 25 Jun 2008 05:34:23 +0000

Why leave MT4 (Movable Type)? It's fine as-is, and it'll take a moment to explain why I didn't spend more time with MT4. It's great as a blogging platform, and many use it as a simple CMS. I used it for Web pages and to manage The Blog. The MT4 templating language didn't take long to figure out -- but why spend time learning new markup/code?

The Quevin.com home page was different from sub-pages, so there were some conditional template tags, and The Blog was a separate site entirely. So I had to flip between sites to manage everything. These aren't compelling reasons, and I believe it will become clear as I explain what Drupal is doing for me instead.

Drupal 6 has been a journey to discover and learn. What first eluded me was the template structure. It's easy to add them, but how about creating my own? I want complete control of my XHTML, CSS and of all the content within -- including title tags and meta data. Not to mention, be able to organize categories (taxonomy) for The Blog and other content.

It's Easy to Learn & Follow

It didn't take long for a Web Developer/Producer like myself to grasp the PHPTemplate theme engine, how to override the "*.tpl.php" types, and specify different layouts for even the most descriptive nodes or blocks. Drupal offers complete control, all within a framework that works for me.

It uses individual something.tpl.php files to theme Drupal's theme_something() functions. Drupal's themeable functions are documented on the Development Plumbing site. Every file contains an HTML skeleton with some simple PHP statements for the dynamic data. Thus, PHPTemplate is an excellent choice for theming if you know a bit of PHP: with some basic PHP snippets, you can create advanced themes easily.

I didn't start from scratch with my "theme," but used an existing one (named "Celju") and modified it with my own XHTML and CSS. I later realized the importance of "template.php." This holds all the theme's functions. This helps you override anything from core. For now, I'm using a "page-front.tpl.php" for the Home page, and "page.tpl.php" handles all the rest.

More specifically, I can override how my "nodes" look within the page too. Nodes types are basically types of content, and "blocks" are pieces that fit elsewhere. These don't often change, unless you're pulling an RSS feed or something else that refreshes from the site, like "Recent Blog Posts." My "Free Website Evaluation" is also a block.

A Cloud Of Options To Choose From

Drupal's modules supply functionality that I believe surpasses the capabilities of MT4, and many other Blog and CMS platforms. There are 2,265 contributed modules in the Drupal code repository right now!

My Favorite Drupal Modules

Administration Menu - Quicker administration.
Blog & Blog API - Helpful for blogs, and multiple blogs, as well as using 3rd party tools for blogging like ScribeFire.
Taxonomy - Essential for categorizing your blogs and pages.
ShareThis - Helpful to encourage people to share your content.
Backup and Migrate - Very useful if you develop locally (MAMP) and then migrate to a live server.
FCKeditor - I find this better than TinyMCE for WYSIWYG editing, though I prefer Marksmarty.
Meta tags - Customize meta data on every page, as well as useful to customize page titles.
Pathauto - This helps create SEO-friendly URLs.
Views - Organize lists of content however you like.
And find even more at

Drupal is easy to install and use. No programming knowledge needed! It really only takes about two hours to get acclimated. There are lots of features, such as custom search engine friendly URLs(SEF), categories and search function. As I mentioned, there are lots of modules to add even more functionality to your site. Drupal is flexible, and you can easily turn your drupal installation into a forum, faq, blog, wiki and many other types of web sites. It's also FREE to use, as it is open source. You can freely install drupal and modify the source code to fit your needs. There are also lots of users & community, which makes it easy to find solutions to your problems. The large community guarantees that Drupal will have a bright future.

16 Sites for Web Design Inspiration

Quevin — Mon, 16 Jun 2008 06:46:54 +0000

Readers Pick: 16 Sites for Web Design Inspiration -

A while back I wrote "Where to Go to Find Design Inspiration", where I listed some of my favorite places to peruse when I’m looking for design inspiration. At the end, I posed the following question to the readers: "Where do you go for design inspiration?", and asked that you contribute suggestions. This is a list of places that readers have recommended. Some I haven’t heard of, and several I’ve added to my own favorites list.

Without further ado – I present 16 sites that you visit for design inspiration.

1. The Best Designs

Suggested by: chandan (Digg profile)

I’ve written about The Best Designs before, so I didn’t list it down this time around. For those unfamiliar with the site, The Best Designs is a wonderful spot to view high-quality XHTML and Flash designs. They tag each design with relevant keywords (i.e. - Bold, Colorful, CSS) so you can narrow down your search to the particular look you’re attracted in.

2. CSS Remix

Suggested by: chandan (Digg profile)

CSS Remix is (according to their tag line): "A Fresh Blend of the Best-Designed Web 2.0 Sites", though there are some non-Web 2.0 themed sites included as well. With over 14,000 RSS readers, CSS Remix is definitely a prime destination for designers looking to check out the work of other designers.

3. CSS Mania

Suggested by: Pat of Atrick Design

CSS Mania is a regularly updated CSS-based web design gallery that includes many design genres. At present, it has over 10,000+ websites in its collection. Though the reader who suggested CSS Mania frequents this site, he warns (and I agree): "They aren’t as particular about the quality of the designs they present, but there are definitely some gems in there."

4. screenfluent

Suggested by: Damien

screenfluent is a site that features some very nice designs. What’s great about screenfluent is that it gives you a preview of the site by opening a modal window (more commonly known as a "lightbox"). There are over 7,000 featured designs so there’s not a lack of content to view.

5. Screenalicio.us

Suggested by: Sachleen Sandhu of tehkubix blog

Screenalicio.us has over 9,800 designs for you to see. The users have the capability of rating each design based on a 5-star rating system and the ability to give feedback for each entry. You can sort the designs based on ratings and time submitted.

6. Open Source Web Design

Suggested by: Sachleen Sandhu of tehkubix blog

Open Source Web Design is a community where users upload designs to share to the public. Downloading an OSWD design is free of charge. You can either browse their gallery of designs or download them to study.

7. One Page Love

Suggested by: adelle of Fuel Your Creativity

One Page Love is a niche web design showcase gallery that features beautiful, creative one page websites and applications. Some categories include products, portfolios, temp pages, and events.

8. FullSingle

Suggested by: adelle of Fuel Your Creativity

FullSingle is another site that displays single-page websites. The latest gallery entries are featured at the top of each page with a brief description of what the page is about.

9. One Page Folios

Suggested by: adelle of Fuel Your Creativity

If the above two weren’t niched enough for you, here’s one with even greater specificity. It’s an aggregate of single page portfolio websites of designers and developers. There’s over 800 portfolios currently listed on One Page Folios, and each entry is reviewed before being published.

10. We Love WP

Suggested by: adelle of Fuel Your Creativity

We Love WP shares top-notch WordPress powered sites. They also showcase free themes that designers have modified into something unique.

11. CSS Divine

Suggested by: Jess

CSS Divine is a CSS-based design aggregate website. You can do a color search by clicking on the color palette at the side bar, and it’ll narrow down the gallery to themes tagged by that particular color. There are plenty of categories including Art, Business, Clean, and Portfolio.

12. Design Snack

Suggested by: Justin Scheetz of Design Snack

Design Snack, according to their tagline, is "The designer’s showcase that you control". Design Snack features XHTML and Flash designs. You can customize the way the designs are displayed, vote on individual entries, and browse by color.

13. SF art & design portal

Suggested by: cindyf

SF art & design portal is the work of the Amsterdam-based web design agency, Strangefruit.nl webdesign. SF art & design portal features hand-picked, innovative, creative art and design sites. You can browse by category, style, color, and even country.

14. Design Shack

Suggested by: stefan alexandru of Stefan Alexandru

Design Shack is an exclusive repository of first-class CSS-based web designs. They look for designs that "stand out from the crowd". They also have a Tutorials section that features web design lessons.

15. CSSloaf

Suggested by: CSS Loaf of CSSloaf

CSSloaf brings together designs from 35 other showcases so that you don’t have to go all over the place to see the latest designs. They feature large screenshots so that each design is visible; no need to strain your eyes on tiny thumbnails.

16. eduStyle

Suggested by: Luke Robinson (Twitter profile)

eduStyle is dedicated to the design of higher education websites for higher education professionals. It’s intended to showcase the best works of higher education designers to their peers.

Thank you for your contributions and suggestions, as well as giving me a few links to add to my collection. If your favorite sites aren’t on here, make sure to discuss it in the comments section and maybe we’ll have a follow up to this one.
[Six Revisions]

Best 26 CMS By Category

Quevin — Wed, 04 Jun 2008 07:12:19 +0000

Perhaps you’ll notice the popular content management systems (CMS), or find a few you’re not familiar with. Are any missing from this list?

Most Used CMS
Enterprise CMS
Web-Based CMS
New Generation CMS
E-Commerce CMS
Most Attractive CMS
Various Other CMS

Most Used CMS

Drupal (Php)

Joomla (Php)

WordPress (Yes….as a normal CMS)

ExpressionEngine (Php)

Enterprise CMS

Alfresco (developed using Java)

Magnolia (developed using Java)

Ellington CMS (Django)

eZ Publish (Php)

Web Based CMS

Light CMS

TypeRoom

CushyCMS

Reflect

New Generation CMS

SilverStripe (Php + Sapphire framework)

Frog CMS (is a PHP version of Radiant CMS)

Gelato CMS (Ajax + Php)

Radiant Cms (Built with Ruby on Rails)

E-Commerce CMS

Shopify

Magento (Php)

Most Attractive CMS

Symphony (XML/XSL)

Graffiti CMS (.NET)

TYPOlight (Php5)

Various Other CMS

Sava CMS (built with Coldfusion)

Ekklesia 360 (for churches)

dotCMS (Java)

Solucija (only one php file….)

CMS Made Simple (Php)

Thanks to Francesco for helping build this list of Content Management Systems (CMS), and it keeps growing.

Grid-Based Design: Six Creative Column Techniques

Quevin — Tue, 01 Apr 2008 07:18:47 +0000

Another great article from Smashing Magazine about CSS grid systems…

[CSS] Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.

What is Grid-Based Design?

Pure CSS Animated Progress Bar

Quevin — Mon, 31 Mar 2008 19:27:10 +0000

Alen Grakalic demonstrates in his article how we can create an animated progress bar using pure css.

The trick is very simple. We need 3 elements, one container and 2 nested elements.

Design-to-XHTML Conversion

Quevin — Thu, 27 Mar 2008 23:37:26 +0000

Why be concerned with converting your Web designs from various common image formats (PSD, JPG, GIF, PNG, AI) into high quality cross-browser compatible W3C validated XHTML / CSS markup? The result is faster load times and increased accessibility across a variety of platforms.

Your designs will remain pixel-perfect to the original, once converted without those old html tables. Our XHTML / CSS is beautifully semantic, fully commented, and visually hierarchal. This will intuitively make your Website code easier to edit and modify.

Sign Up Forms Must Die

Quevin — Thu, 27 Mar 2008 17:47:10 +0000

I’ll just come out and say this: sign-up forms must die… You arrive eager to dive in and start engaging and what’s the first thing that greets you? A form… We can do better. In fact, I believe we can get people engaged with digital services in a way that tells them how such services work and why they should care enough to use them. I also believe we can do this without explicitly making them fill out a sign-up form as a first step.

Best Practices

According to Luke Wroblewski