Design

MTV Party Noise using QR codes

Tomorrow is the 4th edition of MTV Party Noise, an exclusive party for Generation MTV customers (and their friends) only. This time it’s in my home town Ghent, so I’m really looking forward to it (free drinks, no driving, you get the picture).

It’s also the second time we integrated QR codes in the registration process. Once registered, people receive their ticket by email. The ticket contains a QR code which is then scanned at the entrance. We made some improvements since previous edition to make the scanning process faster and more reliable. However, it’s definitely not as fast as conventional laser scanners, but for the size of this party (around 2000 people) it should do just fine.

My MTV Party Noise ticket with QR codePreparing the notebooks for the entrance desk

Create QR codes in vector format

As I’ve explained in a previous post, I was working on a Zend Framework component to create QR codes with the possibility to save them in a vector format. Vector formats allow the image to be scaled as much as needed, making them more suitable for print work.

Although the component is not 100% finished yet, it’s perfectly capable of generating the matrixcodes in different file formats, with different parameters. The file formats are png, pdf and svg (gif and jpeg are possible as well, but are not very relevant).

To give the component a try I’ve set up a code generator page. So go ahead, generate your codes, and feel free to leave me a comment with feedback.

Must-reads for web developers and designers

Over the last couple of months I found some great articles on different topics that every web developer or designer should have read. Many of the subjects are not really new or ground breaking, but they cover a lot of basic stuff (sometimes we tend to skip those parts in the initial learning process) as well as in-depth information. I’m sure the next website or application you’ll build will benefit from it. ;-)

John Kleijn wrote a great series of articles on Design Patterns and OOP PHP on phpfreaks.com:
http://www.phpfreaks.com/profile/448191

On Perishable Press there is an extensive article on .htaccess tips & tricks:
http://perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/

This article on Yahoo on how to optimize website performance is great value as well:
http://developer.yahoo.com/performance/rules.html

Maybe not so much for freelance web developers or designers but more for people responsible for a corporate website or digital department (however still an interesting read):
http://www.smashingmagazine.com/2009/02/10/10-harsh-truths-about-corporate-websites/

And to end with, a sum up of rules web designers should consider when designing for web:
http://www.littleidiot.be/2008/01/04/designing-for-web-some-rules-to-consider/
(yes, indeed, I wrote that one myself based on my experience of working with designers)

I will try to extend this list in the future, or if you have any suggestions, let me know.

Designing for web: some rules to consider

As a web developer I get delivered website designs by many different graphic designers. Some of them are experienced with designing for web, but many have a strong background in print and apply the same rules for web.
Needless to say that print and web are two totally different media, each with its own rules.
From my experience, I can point out some commonly made “mistakes”:

  1. Size matters
    Designs for print are often vector graphics that can be scaled to whatever size/resolution is needed. Designs for web are almost always created in Photoshop and can not be scaled afterwards. So to start with the correct size from the beginning is important.
    When the website will have a considerable amount of (dynamic) content, it is best practice not to work with a fixed height (f.i. to have it vertically centered). The browser window of Firefox (perhaps with some extra toolbars installed) on a widescreen notebook for example is very limited in height and nobody likes to end up with a double vertical scroll, one for the browser window and one for the content.
    As for the width, you just have to prevent a horizontal scrollbar. The big majority of computer screens these days have a horizontal resolution of 1024px or more. Substract the witdh of the browser borders and the horizontal scrollbar and you end up with a safe width of about 980px. Since many people don’t use the maximize button of the browser but instead drag the corners of the browser to enlarge it (and likely not using the full resolution that way), 960px is even a safer width. Besides that, 960 is easily divisible by 3, 4, 5, 6, 8, … making it easy to create a grid layout. Also does it facilitate the IAB widths (for bannering) pretty good.
    Be aware that if you add shadows to the sides of the site, that possibly those shadows might add up to the total width of the site.
  2. Transparency
    At the moment of writing, the majority of still many people are browsing the web using IE6, despite the available upgrade to IE7. IE6 does not support transparent png images, however there are some well functioning javascript workarounds to resolve this issue. Although this workaround can slow down the rendering of the web page, in my experience it stays within an acceptable range. So this issue is not as big as it has been in the past. Do watch out though for transparent and colorful png’s (png-24) as their file size could be pretty big.
  3. Fonts
    For websites or components to be built in Flash, there is not really a restriction in terms of fonts that can be used. Just know that special fonts have to be embedded into the Flash file which can increase the file size significantly.
    As for html websites, unfortunately there aren’t many fonts available. Arial, Verdana, Georgia, Helvetica are probably the most popular and readable ones. Be aware of that. Also there is no way to anti-alias html text, so you might want to disable anti-aliasing in your design to see a more realistic representation. UPDATE: Some of the latest browsers do render text in much smoother way than before.
    The use of a special font can be allowed in some cases (f.i. a limited amount of page titles or menu items) but then either special but limited techniques (like sIFR) need to be used or the text will have be converted into images, which is less interesting towards search engine crawling and maintainability.
    Oh, and don’t rasterize your text layers. Developers must be able to change the text (f.i. to reproduce other titles).
  4. Background gradients
    Not much to say about this one. Just don’t use vertical gradients as a background in places where the height is variable. In some cases simple linear gradients with a fixed height can be allowed though.
  5. No playing around with ads
    This one might sound obvious, but I’ve seen designs that didn’t respect this rule so just to be sure: ads like a leaderboard, skyscraper, banner, rectangle, … should stay untouched. Most of the time they are controlled by another party and comply with the IAB guidelines so for that that it is impossible to scale, rotate or crop them. In many cases the position of the ad is rather fixed as well. If you have to redesign an existing site and that site has a leaderboard in the top, chances are big that you won’t be allowed to change that position.

And to end with: it’s always nice to receive a well ordened psd file, with each component or section in a seperate folder, with properly named layers.

These tips should help you to reduce the conflicts with your web developer. ;-)

Go to Top