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!

Photoshop Tutorials Series

by Khaled on December 5th, 2006

Upon some demand from some friends and users I will start posting some of my old Adobe Photoshop tutorials here on this blog. I will also post new Photoshop tutorials soon. The Old tutorials were already published on Kyscorp, good-tutorials.com and SitePoint forums and many other Photoshop tutorials sites. I am gathering them again here. Most of them are for beginners. Stay tuned guys!

FireBug 1.0 Beta released.

by Khaled on December 5th, 2006

As you all now I am a big fan of FireFox mainly because it is modern, standards compliant, and very extensible and useful for New Media developers and Web designers. One great Add-on for FireFox is FireBug.

FireBug is a noteworthy add-on for Mozilla FireFox, I’ve been using it since a couple of months now and I think it is an outstanding tool for web developers and programmers. Now that version 1.0 Beta was released it’s become a “must have” extension.

With FireBug you are able to inspect, modify, debug and edit CSS, HTML, and JavaScript of any page you want. Now you can open FireBug in its own separate window, you can change the CSS of your page and see it work immediately, the FireBug DOM inspector’s CSS tab displays all the CSS rules for all of the page elements, it even shows the inherited CSS properties. Moreover, if you have CSS boxes that are not lining up correctly you can use the rulers, the guides and the shaded boxes of the layout tab to inspect all the margins, borders, paddings… and this is really great and time saving.

The FireBug JavaScript debugger is very powerful, yet it is very handy and easy to use. With this debugger you can pause the execution of the script at any time in order to monitor what’s going on. On the other hand the FireBug JavaScript profiler is a wonderful tool to inspect performance, tweak it and catch bottlenecks.

All in all it is a wonderful plug-in for Firefox, that helps you to improve you productivity and your work flow, it reveals detailed reports about all the HTML, CSS, JavaScript and even XML errors. But the best thing is yet to come… FireBug is FREE!! Joe Hewitt, the man behind this fabulous bug, was thinking that the 1.0 release will be a commercial product, unlike the previous versions, but he finally dropped that idea and decided that the FireBug extension “will remain free and open source” and will be released under the same tri-license used by FireFox (MPL/GPL/LGPL).

Thanks Joe! If you like FireBug (I am sure you will) don’t forget to donate to the project to keep it running and alive. Go and Donate!

Adobe kuler!!

by Khaled on November 27th, 2006

This is a brand new cool tool right from the Adobe labs!! So you are into web design? Adobe Kuler is then here to help you create and share color schemes and even download these themes as Swatch files that can be used with Photoshop CS2, Illustrator CS2 or any other CS2 application… So go ahead! create, share and rate color themes… I found Adobe Kuler very helpful!! I think that you will find it helpful too…

Is your site Web2.0?

by Khaled on August 22nd, 2006

So are you following the trends? is your website considered as Web2.0?
Ever thought about measuring how much is your website compliant to the Web2.0 standards? here’s a little funny tool to use: the Web 2.0 validator.The Web 2.0 Validator is a freetime project from 30 Second Rule.
Enjoy it

FreelanceDaddy

by Khaled on August 17th, 2006

So you are a full time or a part time freelancer? do you know FreelanceDaddy? If not you are missing something important. FreelanceDaddy is a Guide for freelancers especially those starting their career. More than 1000 projects posted on different freelance markets every day, you will find Graphic design projects, Programming (PHP, ASP, Ruby, .NET, Python, Perl, Java, Coldfusion, SQL…) Projects, Designing (HTML, CSS, Flash…) Projects and even SEO and Web promotion jobs.

Everything is well organized in tidy categories and the design is outstanding. It is a pleasure to visit and to use besides it is very helpful and time saving.

Just take a look! it won’t disappoint you
Go to FreelanceDaddy.

IE7 as a ‘high priority’ update

by Khaled on August 1st, 2006

It seems that Internet Explorer 7 (IE7) will be automatically sent to the Windows XP users as a high priority update, this will probably cause a huge switching from IE6 to IE7 and this could happen fast making the number of IE6 drop significantly! well this could cause some issues to those who are not testing their sites on IE7 and are not making their site look correctly there!
get prepared!

More info here and here