Web International Awards

payday loan

23

JUN 2009 0

Fixed background

Achieving a fixed background on a webpage is not so difficult. However, there's lots of topics out there (especially on forums), with lots of solutions to this problem, including some javascript or flash techniques. The point is that you don't need javascript, nor flash to achieve this. Especially flash! The trick is simple. You must set the background not to repeat, and the make it fixed. You do that by adding "background-attachment: fixed;" to your css code and you're done. The rest of background positioning must be done just as you would on any other background.

Here's a demo, and here's the source code for the demo. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

19

JUN 2009 0

Switch from px to em

In order to achieve real flexible layouts, one should develop the css code using ems, not pxs. Pixels can cripple your designs if the visitors use browser features to increase text size or to reduce it. Using em helps you develop websites that will look beautifully if such a thing happens.

Reset default value of text

Most web developers reset the default font-size of text so that further problems are easily tackled. Without proper resets it would be very difficult to set font-sizes of 11 px, 13px and so on. 1 em is equal to 16 px by default. In order to rapidly convert your pixel thoughts to ems, you'd be better of resetting 1 em to 10 px, which is setting it to 62.5%. We achieve this by placing in the body css tag the following: "font-size:62.5%;". This will make 1 em equal exactly 10 pixels.

Some issues

Many users set for links a font size that is smaller or bigger than the actual font size of the paragraph text. This is ok, but when ems are used, their settings are relative to their parent. Having the paragraph text set to 1.2 em (12 pixels), will not make a link 10 pixels if you use 1em setting. 10 pixels are actually 83% out of 12 pixels. This means that the link settings should be 0.83em instead of 1em. Similarly, to achieve 13 pixels links, you shouldn't use 1.3em, but 1.08em instead, as 13 pixels is 108% out of 12 pixels. It is as simple as that.

Check out a demo and download the source files. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

15

JUN 2009 0

What not to do in mobile web design (#2)

This is a second article of a series of articles about what one developer, or for that matter, a designer, shouldn't do in mobile web design. This second article also treats some serious usability issues, so the problems described in this article shouldn't be used on any site, not just on website's versions targeted to mobile devices.

Similar articles

The issue

havris.com homepage screenshot

I ended up on Havris's website by chance. A client to whom my company has provided an SSL certificate had some issues, and after fixing that issue I wanted to check their site to see if the company that develops their website installed the SSL certificate correctly. If you see, they have three boxes, labeled as "Services", "Portfolio" and "Contact & Support". Judging by their design, you would say those labels are in fact buttons that get you to detailed pages about their services, their work and providing easier, multiple ways for you to contact them. But they don't! Out of all three labels, only the "Portfolio" is a link, the rest are just plain text.

CONTINUE READING

6

JUN 2009 0

bwin’s live betting system in the spotlight

bwin's live betting system screenshot

I received a pitch to develop a live betting system for a local Romanian betting company, and the first step I saw towards finding the best solution was to register and test for a few days what is already out there. I have dropped gamebookers after just a couple of hours with one sole verdict. Gamebookers shall not be used with their live betting system.

CONTINUE READING

21

MAY 2009 0

Minimal design and who started it

There's a lot of buzz these days about minimal design. There's big companies that have rebranded themselves around minimalism. The best example is Apple who turned their image and all their products in this direction. Starting from their logo, to their website, finishing with their latest product models. The best minimalistic product design example there is is the latest Macbook Pro's, from which they even stripped the buttons. One huge trackpad that contains somewhere underneath the buttons.

Some minimalism related articles

1. Showcase Of Clean And Minimalist Designs
2. Beautifully Minimalist Websites - 5 articles on Vandelay Design
3. Showcase of Minimalist Dark Website Designs
4. Minimal designed, minimal websites gallery
5. Is Minimalistic Design more Effective?

So who is the father of minimalistic design?!

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. (Antoine de Saint Exupéry)

Minimalism started somewhere around the 60s, which is actually around 15 years after Antoine de Saint Exupéry died. He talked about perfection and achieving it only after stripping irrelevant stuff off your work. Minimalism is exactly that. It is a trend in design and architecture where the subject is reduced to its necessary elements.

So, if it weren't for Exupéry, we wouldn't have had any vision towards minimalism. We wouldn't have had great minimalistic art pieces, buildings, songs, websites. God knows how Apple's products would have looked like and so on. What do you think, is minimalistic design great, effective?

If you liked this article you can subscribe to our RSS feed and stay updated as new articles get published.

15

MAY 2009 2

Mindblowing vs Ordinary article titles

Few days ago I watched one of my favorite weekly shows, and a scene in there inspired to write this post. Of course there are some articles out there that give guidance on title choosing and construction, but I haven't seen any resource that showcases some really great article titles. Further more, in this article I will also post a few really bad article titles. Finally, there will be a small explanation why you should make your titles as awesome as possible, even though the rest of the article is a simple tutorial, for example.

Lets start with the conclusion

The scene I was talking about happened in a comic book store. The vendor comes up to a regular customer and asks him if he has read the latest issue of Comic X. The client replies that he had not. Then, he finds out from the comic book store employee that it is mind blowing. As strange as it looks, the regular client goes crazy, shouting that the vendor should have told him the spoiler alert phrase, stating that now his mind is pre-blowned and that he cannot enjoy the latest issue of Comic X.

What I am trying to say is that your titles should contain such keywords in order to pre-blow you visitors mind before they read the first paragraph of your article.

10 awful article titles

1. 10 Photoshop Tutorial Sites & 91 Tutorials worth Bookmarking
2. Four Months Later, Facebook Chief Privacy Officer Chris Kelly Confirms Bid For California Attorney General
3. How to Create a Simple, Dark Yet Stylish Portfolio Design
4. 20+ Best Psd to XHTML/CSS Tutorials
5. Facebook Gets Three Times More Efficient At Finding Photos In Its Humungous Haystack
6. 80+ Logo Designers Huge Essential Toolbox
7. The Fantastic Work of Karl Kwasny
8. How to Revise an Email (Revised)
9. TextureVault.net - A Marketplace for Royalty Free Textures
10. A Collection Of Resources For Motion Graphics Addicts

20 awesome article titles

1. 25 Font-tastic Type Resources for Web Designers
2. The Elegance of Imperfection
3. 100 Amazing Futuristic Design Concepts We Wish Were Real
4. The Art of Crafting Beautiful Stylesheets
5. Inspired By A Pile Of Crap, Gmail Adds More Emoticons
6. 24 Amazing Music Videos
7. The Unusual Architecture of Dubai - Part 1
8. 20 Awesome Wolverine Artworks
9. Guess Which Brand Is Now Worth $100 Billion?
10. Ruba: An Online Travel Guide Where Photos Speak Louder Than Words
11. What Makes a Great Logo Design?
12. The Tricky Truth About Downsizing
13. 40 Outstanding CSS Techniques And Tutorials
14. 31 Cool 404 Error Page Designs
15. Ayrton Senna, the Legend
16. Ultimate WordPress Tutorial Collection
17. 10 Incredible Wallpapers from Desktopography
18. The Ugly Truth Behind Starting a Web Design Blog
19. Crazy Cool Collage Works by Michele Senesi
20. You are not a Web Designer IF…

If you liked this article you can subscribe to our RSS feed and stay updated as new articles get published.

2

MAY 2009 2

Art universities. Beautifully designed websites showcase

One of the latest projects I had to work on was to develop a website for a Romanian law university. The project got a little complicated, mainly because of me. I was given the opportunity to do it my way, no interference from the client except for "I want it be blue". A couple of days later I found myself in the position to get my third design rejected, so I said that I need to roll back, and start fresh the good way.

Therefor, I looked for a directory that listed all universities around the world. I found it with no hassle and gave it to my client, telling him to find 5 websites he likes, and to let me know what exactly he likes about them.

Few days later the client rang and gave me the info I needed. The next day and with the fourth design finished, I met with the client and he's reaction was great. I think I've never seen a happier client. After finishing the design, I took some moments off and looked into the links directory myself. I found some really interesting art universities with wonderful websites, and I am sharing them to you!

UCA - University for the Creative Arts

http://www.ucreative.ac.uk/ screen

Art Center College of Design

Art Center College of Design website screenshot

Massachusetts College of Art and Design

Massachusetts College of Art and Design website screenshot

CONTINUE READING

17

APR 2009 1

What not to do in form design

Freelance Switch's hourly rates calculator screenshot

I posted a few days ago an article regarding issues that can arise during mobile web design, and I am now posting an addition to that, regarding some issues that can appear on web form designs.

I usually do my own mathworks, but last week I ended up on Freelance Switch's hourly rates calculator. That could be a powerful tool to some people, but it can get really bad while using it. I was about half way through the form when I accidentally touched a character on the keyboard instead of a digit. And what a big mistake I've done.

The way error messages are displayed is the worst way they could have done it. Have you ever used the alert() javascript function? Yes you say. Do you remember the outcome. Well, combine that crazy popup with some sort of recursive callback to it, and you are in serious trouble. I recorded a small video [video here] (nothing edited, used demo version of a nice software Chris uses for his screencasts, but it worked for my point). Check out the "gorgeous" stuff that happens. Firstly, I get the alert twice, then I loose focus to the entire browser window. I cannot even click the red bullet to close Safari. If you use Firefox, the alert message never stops. Seriously, those error messages really, really ... shouldn't be there. The second solution, opposed to force quiting your browser would be a very fast combination of "return key" + "backspace key".

Such a great tool but poor finishing.

15

APR 2009 0

Avoid spammers on your blog (2)

reverse posting order of comments, screenshot

The previous spam avoiding post described a nice technique to hide URL input fields from spammer's eyes. It has received decent traffic, making it the second most visited post so far, so I decided to make additions to this topic. Today, we will discuss one more technique. The kind of spammers described in the previous post usually want to get their comment as close as possible to content areas.

Therefore, making sure their comments are by no chance as close to that area will definitely scare them off, or at least a small percentage of them. But how can you achieve this? You can simply show comments in reverse order, and paginate them. This will make the spammers delay their post up to the point nobody will post relevant comments. This usually happens when the post is outdated, or at least old. But when that happens, spammers will probably have forgotten about your site, and it is another victory for you! If you care to see a good way of doing this, you can drop by Web Designer Wall and check it out.

If you liked this post, you can check out the first article on this topic, or you can subscribe to the full RSS feed in order to stay updated.

14

APR 2009 0

New feed URL

Just a quick announcement, we have a new feed URL, powered by FeedBurner. You can still use the standard feed, but we recommend you use the new feed.

Thanks!

Page 8 of 11« First...678910...Last »