AVINASH 2.0

Is your site globally accessible?

What we, as designers, usually do? We design websites, buy domains for them, host them on one of the fastest web servers. Then we optimize the site so it loads faster even own slower connections. To make it easily discoverable in search engines, we spend hours learning and applying SEO techniques. We even add a good translation plugin to our CMS scripts so people from different countries can be able to translate the site content for their own needs.

That’s for our normal content — the content that is shown to visitors when your site is in good condition. But what about such a situation when you need to put the site down for maintenance? What do you show your visitors/users during the maintenance period?

Are your error messages or temporary site-maintenance landing pages really understandable by your global user base?

Fix ‘em, if they aren’t.

Internet Explorer 8 Passes The Acid2 Test

Just a few days ago, I was pissed off @ Microsoft ’cause of their Internet Explorer and today I read this good news:

As a team, we’ve spent the last year heads down working hard on IE8. Last week, we achieved an important milestone that should interest web developers. IE8 now renders the “Acid2 Face” correctly in IE8 standards mode.

Looks like the future is bright for Web designers.

The Breakdown Of Modern Web Design

Using IE? You really need to change your browser as soon as you can! Download Firefox today.
VIA

[tags]fun, web design[/tags]

56 CSS Layouts, 100% Pure! [Bookmarks]

You’ll find these 56 ready-made pure CSS layouts pretty useful if you are a Web designer.

Today Tomorrow. Soon, I’ll post 100 cool CSS techniques so stay tuned.

Update: Instead of writing a pretty long article on CSS techniques, I thought to compile a list of high quality CSS tutorials/articles/links. I’ve created a page specially for CSS tips and techniques. Check this out.

And sorry about the delay in the posts! I’ve been a bit too busy in the past couple of weeks.

[tags]CSS, CSS Layouts, Pure CSS, Web Design, CSS Tips[/tags]

Lovely Web 2.0 Background Stripes in Seconds

Stripe Generator is a wonderful online stripe generator tool. If you design Web 2.0 sites, this tool will surely save you a lot of time.

You can create almost any type of background stripes in seconds using this awesome tool. See the examples:

[tags]Stripe Generator, Web 2.0, Design Tools, Graphic Design Tools, Online Design Tools[/tags]

Rounded Corners (Anti-Aliased) in Seconds – Pure CSS, No JavaScript!

Spiffy Corners is a really simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript. An easy to use online tool that generates clean CSS and XHTML code. Use this tool to generate your desired code and later, if you need any modification, you can easily alter the code.

I find this tool a good time-saver. Using this tool, you can create rounded corners in seconds.

[tags] CSS, Rounded Corners, Web 2.0, Spiffy Corners, Anti-Aliased Corners, Web Design[/tags]

FEED Styler Plugin for WordPress: Give Your Feeds A Style!

Developed by the awesome people @ Devlounge, FEED Styler is a really really great plugin for WordPress users who want to stylize their RSS feeds!

What is Feed Styler?

Feed Styler is a WordPress plugin for WordPress users who are comfortable with CSS and would like to be able to style their feeds. Feed Styler enables you to keep your existing class and ID style declarations in your content, but allows a different style to be applied to the feed of that same content. No longer do feeds have to be stripped of style and color.

Who is Feed Styler For?

Feed Styler is for those that use WordPress, are comfortable with CSS, and would like to be able to use their existing markup to style their feeds. Feed Styler is very effective at styling images, blockquotes, and much more. If you are a hand coder and familiar with CSS, Feed Styler will be very intuitive.

This plugin is not for CSS beginners, and not for those that rely on WordPress’s WYSIWYG for content appearance. This plugin is also not for those who have the opinion that feeds should be void of style.

Download link: Here we go!
[tags]WordPress, RSS, Feed, Syndication, Style, CSS, Plugins, WordPress Plugins[/tags]

CSS, Accessibility and Standards Links (Bookmarks)

Today’s bookmark has too much for anybody who loves CSS and standards. Created by Andrew Fernandez aka Dez, it’s a highly useful CSS link resource that will CSSify your mind, nerves and all that!

Link: CSS, Accessibility and Standards

[tags]CSS, Accessibility, Standards, Web Design, Design, CSS resources, CSS link directory[/tags]

From Mockups to CSS/XHTML (PSD/Fireworks to CSS/XHTML)

If you are reading this article, you’re probably one of those people who are trying to find a good tutorial on how to convert a PSD template into valid CSS/XHTML. If my guess is correct, you’ve come to the right place!

Since I understand that your time is precious, I’m directly coming to the point. Go to this section of SitePoint, download FREE preview of this book (160+ pages) :=>

If you already know CSS basics, you may skip the basic chapters. Chapter 8 of this book (included in the free preview) will teach you how to convert Photoshop/Fireworks mockups into standards compliant websites.

If you find the free preview of the book HTML Utopia: Designing Without Tables Using CSS, 2nd Ed. useful, it’s highly recommended that you buy this book. (500+ pages).

Trust me, this book will change your Web Design career overnight!

I also recommend you to read the following two articles:

1. Quick CSS Mockups with Photoshop, A List Apart article.
2. Webdesign Mockup Using Photoshop, The Undersigned.

When you are finished doing all the things recommended in this article, you’ll be designing great looking, standards compliant, 2-column web layouts like a pro. My next 3 articles will show you how to become a highly professional web designer in 3 days.

Stay tuned..

[tags] Web Design, Standard Compliant Design, Design, CSS, XHTML, Mockups, Photoshop to CSS/XHTML, Fireworks to CSS/XHTML, HTML Utopia, SitePoint, Books, CSS Articles, Web Design Articles[/tags]

Evil Internet Explorer 7 – Doesn’t Resize Text Sized in Pixels

So Internet Explorer is still creating problems for Web designers. Roger Johansson over at 456 Berea Street writes about this new IE problem in details.

IE 7 does not, repeat not, resize pixel-sized text. It partly compensates for that by allowing the user to scale/zoom the entire page, including images (which quickly leads to massive horizontal scrolling because of its bad implementation). But if you choose “Page/Text Size” from the menu to change the text size, nothing happens if it has been sized in pixels or an absolute unit (points, millimeters, centimeters, inches, or picas).

Link: IE 7 does not resize text sized in pixels

Make sure you don’t miss reading the comments.

[tags]IE 7, Internet Explore 7, CSS, CSS support in IE7, Microsoft browser[/tags]

ColorPix – A Must Have Tool For Every Designer

ColorPix is a highly useful, little color picker that grabs the pixel under your mouse and transforms it into a number of different color formats.

You can use the built-in magnifier to zoom in on your screen, click on a color value to copy it directly to the clipboard, and even keep ColorPix on top of all other apps and out of the way.

Best of all, there’s nothing to install – just download the tiny app and off you go.

I’ve started to love this tool since the very moment I downloaded it. I love the way it stays quiet on my taskbar like a good baby! Just click on it whenever you want to pick a color and it’ll do its job pretty nicely. I’m sure that you’ll enjoy your experience with this highly light, yet useful tool.

Main Features:

• Minimize ColorPix to the system tray, and keep it out of the way until you need it.
• Set ColorPix to launch when Windows starts up.
• Click on any color value to copy it to the clipboard. Press Ctrl-C to copy the HEX color (without the ‘#’ sign).
• Press any key to lock or unlock the current color and the magnifier.
• Click on the ‘+’ icon to keep ColorPix on top of all running applications.
• Click on the ‘Magnifier’ button or press Ctrl-M to show/hide the built-in magnifying glass.
• FREE!

Link: Click Here (If you really wanna enjoy the tool!)

[tags]Web Design, Tools, Web Design Tools, Free Web Design Tools, Color Picker, Freeware, ColorPix[/tags]