Archive for Nisan, 2010

CSS-Cross-Browser CSS Gradient


Cross-Browser CSS Gradient

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Also, check out my updated dropdown menu (demo) using CSS gradient.

For Webkit Browsers

The following line of code is for webkit browsers such as Safari, Chrome, etc. It will display a linear gradient from top (#ccc) to bottom (#000).

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

webkit gradient

For Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

firefox gradient

For Internet Explorer

The following filter wlil only be read by IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

ie gradient filter

Cross-Browser CSS Gradient (demo)

Put the three lines of code from above together and the result is a cross-browser gradient box. Note: I added a background rule at the very top in case the user is using a browser that doesn’t support the feature.

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

gradient box

CSS Gradient Dropdown Menu

Below is a pure CSS gradient dropdown menu using CSS3 text-shadow, radius-border, and box-shadow (no Javascript or image)

css gradient dropdown

Internet Explorer Limitations

Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

Final Remarks

Please note not all browsers support CSS gradient. To be safe, you shouldn’t rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.

Taken from webdesignerwall.]]>


26,04,2010 at 1:37 Yorum bırakın

40 Web Developers to Follow on Twitter

18,04,2010 at 1:51 Yorum bırakın

20 SEO Tips That Every Web Developer Should Follow

<![CDATA[One aspect of web development that is many times overlooked is search engine optimization. In this list, I’ll show you some basic SEO techniques that will help you make friends with Google, and increase your page rank!

1: Write Semantic and Valid Markup

It’s important to write meaningful and semantic markup so search engines can easily extract and classify what’s relevant on your page. That includes two key practices:

  1. Use proper headings and listings.
  2. Always validate your markup

I can’t stress enough those two points. There have always been a debate about if you should use the <h1> tag for the logo/title of your page or the post title (if you are building a blog), but the important thing here is that the information in your page must be presented hierarchically, using all six heading tags

if possible.

2: Optimize your Title and Meta Tags the Correct Way

Back in the day, meta tags were the first thing you had to take care of when dealing with SEO. Because Google and other search engines don’t rely on them anymore, you only have to focus on the description meta tag, because that’s the one which will be displayed on the results page under the title.

Your title tag is very important to search engines, and like your meta tags, should be different for every page of your site. It must be relevant and descriptive to the content of the page, and shouldn’t be too long -but enough to describe what your page is about. For example, instead of:

<title>John Smith's Shop</title>

Something better would be:

<title>John Smith's Fishing Supplies - Find the best fishing supplies in California</title>

If you are using WordPress, there are many useful plugins for managing title and meta tags in your blog. I recommend the All in One SEO pack, it’s easy to use and works out-of-the-box.

3: Always Use alt and title Attributes

The title attribute, besides making a site more accessible, serves the purpose of telling search engines about the topic of the site you are linking to, so try to avoid things like:

To see all of our fishing boats, <a href="#">Click here</a>

Instead, use…

<a href="#" title="View all of our fishing boats">View all of our fishing boats</a>

The alt attribute is basically the same, but for images, it’s the way of describing our image to the search engine.

4: Maintain your CSS and JavaScript files Externally

Search engines usually ignore CSS and JavaScript files, but even if they don’t (Google’s algorithm changes), placing your CSS/JavaScript in external files will help the crawler find your content faster.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="functions.js" type="text/JavaScript" charset="utf-8"></script>

5: Use Google Webmasters Tools

You can make Google do a lot of work simply by adding your site to Google Webmasters Tools, that is linked to your Gmail/Google account. It shows you how Google crawls and indexes your site to help diagnose problems. You can see all internal and external links pointing to your site and which search queries are driving the most traffic. Also, it lets you configure things, such as a preferred domain name for your site, with or without www, so it knows is the same site and page rank doesn’t get divided.

6: Keep your HTML Simple

Build your site using only the necessary markup and make your layout as simple as possible (no tables, of course!). It will help the search engines to index it easily. And that brings me to my next point:

7: Avoid Frames

Frames make your site load slower and makes it difficult for the robots to crawl it.

If you must use frames, always offer noframes content and be sure that each frame has a descriptive title.

8: Use JavaScript Only for Progressive Enhancement

You must ensure that your JavaScript only adds new layers of enhanced functionality and your site works with JavaScript disabled, specially when dealing with navigational elements, such as menus.

The search engines should be able to read your navigation as a nested list to index it properly:

	<li><a href="home.html">Home</a></li>
	<li><a href="shop.html">Shop</a>
			<li><a href="boats.html&quot;>Boats</a></li>
			<li><a href="supplies.html">Supplies</a></li>
	<li><a href="about_us.html">About Us</a></li>
	<li><a href="contact.html">Contact</a></li>

And then you can format it as a fancy drop down menu using CSS and JavaScript.

9: Be Careful When Using Flash

Although now search engines can index flash content, they still don’t do it very well. Keep your flash to a minimum, and avoid using it for text. Don’t use it for creating menus either, you can probably make the same effects, like I said before, just with CSS and JavaScript while keeping your html structure nice and clean.

Personally I would limit the use of flash in the web to embedded videos/sound and some useful animation (like an animated infographic), but nothing more.

10: Create a sitemap.xml file for Google

To be sure that your pages are indexed and cached quickly in Google, you can create a sitemap.xml file. It’s a XML file that contains a list with all the pages on your site. It follows the Sitemap protocol like that:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="">

You can create it manually following Google’s help for creating sitemaps or, if you use WordPress, you can install

XML Sitemap Generator for WordPress plugin that builds it automatically and notifies Google of the changes.

11: Make a Site Map

Besides creating a sitemap.xml, you should also make a detailed html sitemap page that links to every page on your site. It helps your users and search engines find the content easily. The less clicks it takes to get to a page, the better.

A good tool to create beautiful and easy to maintain site maps is slickmap, a simple stylesheet that shows a nice site map from an unordered list navigation.

12: Add a robots.txt File to Your Root Directory

By default, search engines crawl and index everything in a website. You can block some files or folders that aren’t relevant or don’t want to get indexed by placing a robots.txt in your root folder. An example of a robots.txt could be:

User-agent: *
Disallow: /images/
Disallow: /js/

The command “User-agent: *” allows the crawler to search through your site freely, and “Disallow” commands prevent it to analyze those folders.

13: Check for Broken Links and Images

If your page has links pointing to content that doesn’t exist, it will probably never be found. It’s also a fact that search engines penalize sites with many broken links, so don’t forget to use the W3C link validator tool to find them.

14: Avoid Duplicate Content

Duplicate content can be dangerous to your search engine rankings. But, what is duplicate content?

If you have a WordPress blog, you probably have a category and archives pages in your sidebar. These pages are just a collection of your posts, so you could have identical content in some of them: for example, when you have just a post in a category or in a given day, the content in that archive/category page will be the same as the post itself.

You can solve these and others duplicate content problems by using noindex, follow in your robots meta tag, using a 301 redirect or with a robots.txt file.

15: Create an Informative Error Page

If a user mistakenly types a wrong or incorrect url, it will show a default server page with an internal error message. That message is not very helpful, so instead you should create a user-friendly 404 error page that links back to the homepage, shows alternatives for navigation or links to possibly related content.

There are plenty of WordPress plugins for improving your error pages. The 404 SEO plugin gives you a smart error page that will automatically display links to relevant pages on your site, based on the words in the url that wasn’t found.

16: Keep a Flat Structure Directory

Because search engines like to access quickly and easy to any file, you shouldn’t go too deep in your structure directory. Avoid things such as:

and use something like:

Keep in mind that any page shouldn’t be more than three clicks away from your home page.

17: Use Search Engine Friendly url Names

Search engines cannot make sense of urls with dynamic and session id names, so instead of:

you should use a meaningful name with hyphens instead of underscores, like:

In WordPress you can configure that in the permalinks options page.

18: Design an Effective Footer

User your footer links to help search engines navigate through your site, replicating your main navigation and linking to the most important pages on your site.

An example of a good designed footer is the one found in CSS-tricks.

19: Use Breadcrumb Navigation

Consider using breadcrumbs as a secondary navigation aid. It makes it easier for users to move around your site. Be sure the text on your breadcrumb links describes accurately the content of the corresponding page.

20: Write Good Content

Finally, forget about keywords and all that, the best SEO advice you can receive is to just write good content, interesting articles that people will like and find useful.

Source :]]>

16,04,2010 at 19:22 4 yorum

Startup Weekend Istanbul

Posted by Tugce Ergul

Startup Weekend is a 54-hour startup event that provides networking, resources and incentives for individuals and teams to go from idea to launch. A highly motivated group of developers, business managers, startup enthusiasts, marketing gurus, graphic artists and more meet and work on building projects out. Startup Weekend Istanbul is going to take place at the Microsoft office, a fantastic facility right in the heart of Istanbul.

What’s in it for you?

  • You will get inspired by ideas or promote your own,

  • Meet developers/designers/IT pros/entrepreneurs and form teams,

  • Get real-time help from business pros/academics/consultants,

  • An opportunity to kick start your new startup

What do we need from you?

  • Be open about your ideas,

  • Bring your own laptop,

  • Be open to meet and collaborate with startup enthusiasts,

  • Be prepared to work hard

We’re working behind the scenes, assembling an impressive crew of sponsors, speakers, and advisors, to help you launch your startup in 54 hours. So, find a business idea, be creative, develop your elevator pitch and surprise us at Startup Weekend Istanbul!


16,04,2010 at 5:59 Yorum bırakın

Need a Simple Plugin To Share Your Wordpress Blog Posts On Facebook?


I was looking for a plugin that will let me add the current post or page to my Facebook Mini-Feed but could not find a good one. Here is the solution to share your posts with others on facebook. Download this simple plugin, extract it to plugins folder of your blog, activate and add a new post. You will see a popup screen which connects you to facebook (Disable your popup blocker if you dont see the window ).]]>

12,04,2010 at 4:45 4 yorum : great design, amazing navigations

I strongly suggest you to visit this online store…


10,04,2010 at 19:31 Yorum bırakın

Missed Ipad with just two days

During my stay in San Francisco, I was planning to buy an Apple Ipad but learnt that it was gonna be released two days later I leave San Francisco. Gonna be back in San Francisco in three months and gonna target is Iphone 4G!

Here is the video of Iphone Store in SA…]]>

10,04,2010 at 18:55 Yorum bırakın

Eski Yazılar


Nisan 2010
« Mar   May »

Posts by Month

Posts by Category