Category ‘Design’

Probably the biggest RSS icon I have ever seen

13 . June 2008
written by Clemens Lang at Jun 13th 2008, 18:07

There’s a certain trend in so-called web 2.0 design to have ever bigger icons for RSS feeds (What are RSS feeds?).
Now I recently saw an RSS icon that beats the pants of all other RSS icons I’ve ever seen before: ImageShack’s RSS icon (screenshot):
image
This icon is a whooping 403 per 336 pixels large - that’s 135,408 square pixels!

Posted in Web Development, Design | 1 Comment »

9-slice scaling in HTML

15 . May 2008
written by Clemens Lang at May 15th 2008, 16:59

9-slice scaling is a technique from Adobe’s Flash product line and has been adapted into Fireworks. It is used to scale certain parts of a symbol different from others when resizing the symbol (i.e. not scaling the corners at all) to make corners and borders look the same at every size of the symbol. With a little CSS and HTML this can be done in browsers, too.

The Adobe Fireworks help has a good article explaining 9-slice scaling. Now imagine you’re designing a liquid width layout for a website - wouldn’t it just be great if it would scale as it was 9-sliced? Here’s how:

Slicing

First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):
image

HTML code

Here’s the HTML you’ll need. Read the comments in the code for explanation.

  1. <div class="content">
  2. 	<!-- this is the overall container -->
  3. 	<div class="content-top">
  4. 		<!-- this contains the top left, top right and top center slices -->
  5. 		<div class="content-top-left"></div>
  6. 		<div class="content-top-right"></div>
  7. 		<!-- notice the top center or top repeat slice needs to be at the end -->
  8. 		<div class="content-top-repeat"></div>
  9. 	</div>
  10. 	<div class="content-repeat">
  11. 		<!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me -->
  12. 		<div class="content-repeat-left">
  13. 			<div class="content-repeat-right">
  14. 				<!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it -->
  15. 				<div class="content-repeat-center">
  16. 					<!-- /** this is where you'd place the content **/ -->
  17. 					<div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>
  18. 				</div>
  19. 			</div>
  20. 		</div>
  21. 	</div>
  22. 	<div class="content-bottom">
  23. 		<!-- this contains the bottom left, bottom right and bottom center slices -->
  24. 		<div class="content-bottom-left"></div>
  25. 		<div class="content-bottom-right"></div>
  26. 		<!-- as above the bottom center div must be after the bottom left and right divs -->
  27. 		<div class="content-bottom-repeat"></div>
  28. 	</div>
  29. </div>
  30.  

Read the rest of this entry »

Posted in Web Development, Design, PHP, XHTML & CSS | No Comments »

Webmail done right

22 . February 2008
written by Clemens Lang at Feb 22nd 2008, 19:25

I recently bought a (gs) shared hosting package at mediatemple.net. I’m not going to talk about their system now, but about their webmail client, which is provided by @Mail, their mail server. The @Mail web interface comes in 4 variations: Simple (which is plain HTML), Simple with AJAX (which is how most other webmail interfaces work today), Advanced for IE6+ (please, don’t ask me to comment on this one) and Advanced for Mozilla.
When I logged in using the Advanced for Mozilla interface I noticed something in the address bar: .webmail/parse.php?file=html/english/xul/xullogin.html&XUL=1. XUL? Wait… I’ve heard this before… A quick lookup at Wikipedia confirmed my thoughts: XUL is the XML User Interface Language, the Language the Firefox layout (i.e. XUL defines where the Home button is) is written in. But what does that mean for a webmail client? The answer is easy: It’s a hell lot faster than HTML + JavaScript, actually it’s running at the native speed of your browser, which is pretty amazing. The XUL interface also takes advantages of features your OS can do for you: The menus and lists are rendered by your OS and even sorting is done at native speed - awesome.
However, it’s still getting better: PGP built-in right into your webmail client! Unfortunately it seems you can’t upload your own key or download your private key after you generated a key using the webmail interface, but I’m sure we’ll see some improvements in the next version(s) of this software.
@Mail XUL interface screenshot

If you have a Firefox Browser at your hands, make sure to try the @Mail-Demo at http://demo.atmail.com/index.php

Posted in Personal, Web Development, Design, XHTML & CSS | No Comments »

 1 2 >