Unleashing the power of real TrueType fonts with CSS!

by Khaled on September 6th, 2007

CSS is 10 years old now, Håkon Wium Lie, the guy who proposed the CSS concept, is introducing something new! and it is about text display that is suffering nowadays from the lack of fonts you can use.
a similar concept was first described back in 1998 (CSS 2) but wasn’t a success!
but it is back for good now!

Thank Mr. Prince!

and we will probably see this kind of code

@font-face {
font-family: “FONT_NAME”;
url(http://…) format(”truetype”);
}
body{ font-family: “FONT_NAME”, sans-serif }

There are still problems like convincing browsers companies to support these web fonts and to fix a final format of the code and validate everything in there…

Just imagine how much control will you have on the look of your pages! and you will not use graphics just because you can’t use a given font on your web site!!!  So let’s  just wait and see.

Principles of Beautiful Web Design

by Khaled on March 9th, 2007

Yes! yet another contest by SitePoint, after the Photo manipulation one, here’s a CSS contest. I will be a judge in this one too!

Josh Catone (the Community team leader @ SPF) posted :

The Challenge:

Announcing the SitePoint “Principles of Beautiful Web Design” CSS Competition. If you would like to win a copy of SitePoint’s acclaimed new book “The Principles of Beautiful Web design” then all you have to do is to take this html and turn it into a beautiful web page that is an advert for the book.

You are not allowed to change the html and can only use css and background images to create your masterpiece. Unlike the “Zen Garden” examples the html has very few extra “hooks” in the code and you will need to be very creative to turn this into a viable web page.

Advanced css’ers will therefore be able to use advanced selectors to create styling opportunities while those of medium skill levels can concentrate on the graphic side of things.

You must also use the SitePoint logo and the book cover image which can be downloaded from those links and the html for the images is already in place.

General Rules:

• The html must remain untouched.
• All html content must be used and not replaced with image replacement techniques.
• Background images can of course be attached to any available element.
• Valid CSS at whatever level you wish so advanced selectors can be used to good effect in browsers that support them.
• Browsers to support are: IE6, IE7, Firefox 1.5+, Opera 9+. The design must display well in all the browsers listed with ie6 as the minimum requirement. However you may get more points if you can utilise advanced css to make the display even better in Ie7 firefox and opera.
• No CSS hacks to be used.
• No Javascript or any other kind of scripting.

The competition will be judged by:
Sarah
Josh
Jelena
Sara
Paul
DT
Dave
(and possibly other SitePoint Forums staff members)

Entries will be judged on technical merit, creativity, aesthetics, and compliance with the rules.

All entries must be received by 1 month from today: 6th April, 2007 at 11:59 (23:59) GMT. The winner notified shortly thereafter.

You are allowed to enter as many entries as you like but the judges decision will be final and will be based on not only the look of the page but also how clever and effective the use of css has been. (Also, you can only win once.)

You can download the html and images from Paul’s basic example but we are expecting much better from you. Remember the CSS is to be completely supplied by you but we have left Paul’s demo there so you can get some ideas on how the page can be manipulated.

When you have completed your design you can post in the competition entry thread and add a link to the layout or attach a screenshot and zip file which we can upload for viewing.

If you have any questions then post below in this thread as the entry thread will be just for entries only.

Good Luck!

So join SitePoint right now and have a chance to win this competition held by the biggest Web designers and developers community on the entire web!!

No future for AJAX?

by Khaled on March 9th, 2007

Many predictions here and there all over the web are stating that we’re going towards a web that will be mostly based on RIAs. So of course the platforms technology for these RIAs is very important! Now we are talking a lot about AJAX… But I guess you all know it is not that easy to make it cross-platform… You will most probably develop it on one platform then go through a tweaking nightmare to make it behave the same way on all the platforms you’re targeting and all the browsers etc…Looking at what has always happened on the net I believe that the pressure on the major companies to improve their services and productivity will probably lead them to replace AJAX techniques to build richer Internet Applications faster and with nicer, better and easier development process than what is available now with the XMLHttpRequest stuff…
Flash/Flex would be a nice alternative, this makes sense in my opinion especially if you’ve heard about the new online version for Photoshop,seeing how this will look/behave will certainly give us a nice example to follow… as it always takes one big company to develop a valuable technique to make others adopt it (Youtube you say?). The only problem with flash/flex, In my opinion, in comparison with AJAX is that Flash/flex is designed, controlled and sourced by one single company… But then Java is widely used in programming despite the fact that it is proprietary and controlled by a single party…
On the other hand we have the open source OpenLaszlo platform that is written in XML and JavaScript and then compiled to Flash and DHTML, so it is a kind of advanced AJAX application platform and it looks promising as it offers a lot of possibilities…

The replacement for AJAX should be more responsive and more interactive, with a bigger penetration and ubiquity, with a better and nicer development experiences and processes, offers a java-like cross-platform development and with reasonable cost…

I am thinking this is happening quite soon!and as I’ve said before the release of the photoshop online version by Adobe (which was my starting point for all these thoughts) will give us a better idea about the future of RIAs…

May be you’re thinking it is too soon to discuss this… but who knows…

Photoshop “Reflection” tutorial

by Khaled on January 17th, 2007

So this is the second simple Photoshop tutorial I am posting in the new Photoshop tutorials series. As I’ve stated before, this is to show to achieve the reflection effect that was created at the end of the Photoshop “Glass Text” Tutorial. And yes! many of you were requesting it.

This tutorial was done using Adobe Photoshop CS2 but, of course, it can be achieved using older Photoshop versions. So we are going to start where we ended in the previous Photoshop “Glass Text” Tutorial. You are curious aren’t you ? Dig for it to find out

More

Can I always use a 100% AJAX Solution?

by Khaled on January 12th, 2007

Lately I have been discussing this matter with different people on some forums or in real life. The discussion was about whether it is wise to totally rely on AJAX to design a web site or a web application without introducing any alternative way of usage. Some guys were claiming that it is safe to do so as most of the internet users now have Javascript-capable browsers. I believe that the best practice for the moment is to build your accessible application then add AJAX to make it better.

In my Opinion it is totally wrong to consider that JavaScript is always available, as this not the case at all for the moment at least.

Some visitors are not using Javascript-capable browsers (yes, they might be a minority, but remember your site should be accessible to potentially everyone), sometimes they are behind a script blocking firewall so even if their browsers are JavaScript capable the script won’t work for them!
I’ve read some nice articles by Ian Lloyd on this matter and I believe they are really interesting:

- Using a sledgehammer to crack a nut: Ma.gnolia’s case.
- Blogger: Can I get in please?
- Bloglines is broken! (at least for me)

Those are articles exhibiting some accessibility errors made by some very known “guys” just because they are totally relying on JavaScript!
and they forgot that for some reason or another their Javascripts are not executed…

Roger Johansson sums up the whole issue in a very nice way!

Photoshop “Glass Text” Tutorial

by Khaled on December 25th, 2006

As I have announced it before, I am going to be posting Photoshop tutorials on this blog. Some tutorials are old others are new and will be posted for the first time. So stay tuned!
Today I am going to start off with quite a simple tutorial that will show you how to achieve a glassy text effect .

This tutorial was made using Photoshop CS2 but can be achieved using older Photoshop versions. You can now add a cool effect to your text easily. Of course, and as usual, your feedback is more than welcome.

First of all I’ve created a new blank document That is 400×150, Then I have selected the text tool, I’ve set the font to “Gill Sans Ultra Bold”, the size to 60pt and the color to #d41385 (yeah that’s pink!!). Then I’ve typed in my text. Read on More

The Switchy McLayout

by Khaled on December 21st, 2006

The Switchy McLayout is an adaptive layout technique that allows the designer to define a layout for wide display, one for medium-sized screens and one for hand held devices and PDAs.
And no this not like liquid design because when you design a liquid template that is optimized for a maximum width of 800 or 1024 px you will have a broken layout with gaps if the site is viewed on wider screens, moreover on the small screened hand held devices and PDAs the text and the graphics will be compressed together, so that’s quite a major issue in my opinion! The switchy Mclayout could be a nice solution to solve such issues it behaves as if your layout were a ‘vector’ graphic that scales up and down without loosing quality. Of course it is not as perfect as that but it is a nice and a very useful technique. As I said it defines a layout for each kind of screens.
After defining a range of layouts, the technique consists on detecting the user’s screen width in order to use the appropriate style for that size thanks to a style-switching technique that depends on the class of the body element. This is done thanks to a some nice unobtrusive JavaScript code…

All in all you will see that with the switchy McLayout technique helps designers take as much advantage as possible of the available screen space. This is really useful due to the unceasingly increasing number of the screen sizes for the devices used to browse the net. This technique can help you with such a big challenge.
Still Hungry for further details? find more here!