5 Qualities that make a Good Designer

Web design stems from graphic design so most aspects of traditional print design apply (apart from the ink and paper). However, there are many unique problems that a web designer faces.

However if you can master the following qualities, you will be in a good position to face these challenges.

1. Be User-Centric
At the heart of good web design is good usability. If a user cannot quickly and efficiently access the information, product or service they have visited for, they will leave with a negative impression of the site and therefore the brand.

Good usability begins with the structure of information. Information architecture is the process of organising information in a logical, intuitive manner so that the user can find their way around the site quickly and painlessly. Get this wrong and the user will lose confidence in the site very quickly. To get this right, you need to step in the shoes of a user and approach the site as they would.

Personas are fictitious individuals who act as stand-ins or ‘archetypes’ of users. Using a variety of different personas for each project can identify patterns and discover what is necessary, what is unnecessary and to differentiate between what is used frequently and what is needed only infrequently.

2. Ensure graphic integrity and originality
Many aspects intrinsic to web design can hinder originality and produce cookie-cutter web sites.

• Templates are used to display content that is dynamic and ever-changing,
• Pages are produced with code that places restrictions on layout not found in print design,
• Technologies restrain the use of typography
• Our carefully laid-out designs can change dramatically on different users systems
• Colours can vary from screen to screen.

So how do we combat this?

3...We Keep learning
The internet changes fast and new developments in web design are being made daily. Its crucial to be in constant touch with new technologies and designs to stay afloat and progress or you risk stagnating. Because of the many challenges faced in the medium - browser inconsistencies, liquid dimensions, accessibility etc - original and creative solutions are discovered all the time and you need to be constantly scouring the web for inspiration.

Stagnation can arise by following flavours of the month and not pushing yourself to discover new techniques. It's easy to develop a style that you fall back on time and time again. It may save time but you will not be reflecting the brand if every design uses the same style.

4. Remember the Brand
A Web site is an extension of the brand just like the store down the street or the box a product comes in. In many cases the Web site will be the first interaction a customer has with the brand after seeing an advertisement, so it has to compel and reflect the brand's values.

It is crucial to have a clear understanding of the brand for each project. The personality of a brand can be communicated with sound, animation, feedback and interaction as well as traditional graphic design.

Read the brief, then read it again. Revisit it constantly throughout the design process to ensure to are meeting the clients requirements and expectations.

5. Pay attention to detail
Focusing on “what isn’t right”—can take a design from “nearly there” to “there” and beyond. At times designers present concepts that they believe are 90-100% done. However to the detail-savvy designer, the work appears to be only 50-70% there. You can see the ground work and foundation, but you know it's just not finished. To take a design to 100% you need to achieve polish and add the touches that will make a design really shine.

The key to embracing details is to think critically about your design. If you think an element isn't right, try something else until you sure it works. Regardless of how 'cool' a particular aspect may be, if it doesn't serve the design - get rid of it. Never be precious about your designs.

Keep notes while designing—these will form a good basis for a style guide. Consistency displays sophistication and shows that you fully understood and made sound decisions. Consistency should be transparent.

Take regular breaks during the design to step back and take another look. Your own gut reaction will likely be similar to the initial impressions of those who see it for the first time. Always step back and re-evaluate.

Details aren't easy. They take time and patience, but you'll be rewarded for your efforts and they are the key to producing something you'll be proud of.

Conclusion
Web sites are experiences. Not only do we design graphically, but we design user interactions, we design sound and we design journeys.

A Web site isn't just a two dimensional space rendered on a computer monitor, but a environment that leads a user down a path through space an time, reinforcing brand values.

Why You Don't Want Michelangelo Working on Your Website

Everyone wants to live surrounded by beauty. Beauty soothes the soul, and lifts the spirit. It inspires us and keeps us healthy. We all want beauty.

Can you have beauty in your website? Sure you can, and it's important to have your website be pleasing to the folks you want to help. Unfortunately, this desire to have beauty and to please folks means that you can spend a great deal of time creating a 'unique and beautiful' web design that people actually avoid. How can you spend so much time on beauty, sacrifice so much money with a designer, and still end up with a mess?

Do you do Frescoes?

No one would complain about the beauty of the Sistine Chapel in Rome.

Michelangelo spent four years, from July, 1508 through October, 1512, painting over 5,000 square feet of the Sistine Chapel's ceiling.

Unfortunately, Michelangelo was a sculptor, and loved working in marble. Prior to the Sistine Chapel, he had only painted briefly as a student of Domenico Ghirlandaio in Florence - which means that he got off to a slow start as he learned how to paint frescoes.

Luckily for him, Michelangelo was already an accomplished artist. He wasn't exactly doing the Sistine Chapel as a free promotional effort. Pope Julius II commissioned him for those four years, and didn't seem to mind that it took Michelangelo a while to get in a groove.

History reports that one of the Pope's motivations was to outdo Pope Alexander VI. So, the whole idea was to create an amazingly glorious ceiling that would stun everyone who saw it.

Are you trying to stun your visitors? Remember the purpose of your website: to create a relationship with the right people, connect with their hearts and needs, and to help them take the next step in relationship to what you provide. If you aren't being commissioned to paint the ceiling of your website by a fabulously wealthy Pope, and if you aren't trying to stun your visitors with beauty, I suggest you relax, just a little bit, any attachment you might have to beauty and uniqueness around your website.

Your visitor is waiting for dinner.

Imagine showing up at a fríend's house to eat. You've worked all day, you're hungry and you've been looking forward to dinner. Yet, once you arrive, they keep you waiting for three hours while they pull out family home movies, or their wedding album.

It's not that you wouldn't eventually like to see those things. But first, can we have dinner, please?

The Two Functions of Your Design

Absolutely prepare and present the food with love and beauty. But just remember that your visitor is looking for food, not frescoes. It's been shown that when a visitor comes to a website, design plays two primary functions:

(1) to show that the website is solid and professional-looking enough that the business can be trusted, and

(2) to make sure that the visitor can find what he/she needs really easily without having to guess or hunt.

As long as you are meeting those two needs, your design is going to work.

So, where is it safe to bring forth beauty and inspiration on your site, and where will it keep you stuck to the ceiling for four years?

Keys to Website Design

* Things to avoid.

Avoid putting a pattern behind your text, or using a text color that isn't very dark. In fact, I recommend that you stick with black text on a white background. Millions of novels of great variety, beauty and talent are written, all printed black text on a white background.

As a general rule, avoid animation and oversized photos and illustrations - anything that distracts from the food you want your visitor to eat.

Avoid unique design layouts. Many websites look the same structurally - and so do human beings. You don't have to look at the back of someone's knees to find their eyes. People know how to connect with each other more easily in part because of structural similarities.

Your visitor has been trained to expect certain conventions in web design, so they can find what they are looking for. Don't play a guessing game with them by creating some outlandishly creative and confusing design.

* Things to do.

Keep your text front and center. Keep your navigation either across the top, or down one side, with clear labels. Don't use more than two columns - one for the navigation or side text, and one for the main content of the page. Have a clear banner across the top with a simple message about your business.

* Things of beauty and inspiration

Make your banner beautiful and inspiring, without being cluttered. Use colors you love.

Use creative bullets rather than just the usual round variety.

Use color highlights around navigation buttons, and in the frame around your page.

* Above all, don't agonize over it.

If you don't have a website yet, or your website isn't effective and you are upgrading it, bring in what creativity you have, but don't agonize over the beauty aspects. Your visitors are waiting to be fed! Once you start having a lot of visitors coming to your website, and your business is humming, you can take the time and space to bring out the fine china for them.

My very best to you and your business.

About The Author
Mark Silver is the author of Unveiling the Heart of Your Business: How Money, Marketing and Sales can Deepen Your Heart, Heal the World, and Still Add to Your Bottom Line. He has helped hundreds of small business owners around the globe succeed in business without losing their hearts. Get three free chapters of the book online: http://www.heartofbusiness.com

What Do You Know About Google Image Search?

Improve your rankings in the Google image search. Google image search is increasing in importance. Curious about this functionality, I did some digging on what it takes to get your photos ranked well in this image search engine. Here are some great tips to follow:



Ranking high in Google’s image search can increase your traffic considerably. This is especially true if you can rank in the top three for search results that show images above the organic search results.

1. Make your images large - Large images tend to rank higher than smaller images. I recommend making images you want to rank high in searches at least 10,000 square pixels. An image that is larger than 333 pixels wide by 334 pixels tall would work.

I just did an image search for internet marketing and there were only two images with less than 10,000 square pixels on the first results page.

Make sure to specify the width and the height of the image in your html.

2. Put your keywords in the file name - If you want your image to rank high for the term ‘internet marketing’, name it ‘internet-marketing.jpg‘.

3. Put your keywords in the Alt tags - This is probably the most obvious thing to do. Alt tags are designed to provide alternative text when images cannot be displayed. They should describe what the image is about.

4. Put your keywords in the image title tag - Many people don’t realize that there is a title tag associated with images. The text in the title tag is shown when the user mouses over the image. Put the same text in the title tag that you put in the Alt tag.

5. Put your keywords in the text close to the image - I recommend putting descriptive text that includes your keywords below each image that you want to rank high in image searches. This is just more information for Google to use in determining what your image is about.

6. Optimize your page for the keywords - Include the keywords in the title tags, meta tags, header tags and the body copy of your page. Keyword density of the page that the image is on is very important.

7. Create an image site map - I have just started testing this out, but I have high hopes for it. Create a page with text links to all the images on your site that you want to rank high in image searches. Use the appropriate keywords for your anchor text when linking to the images.

An image site map is a great way to get links that come directly into your images and it lets the search engines know more about what the images are about.

8. Increase the authority of your web site - Images on pages with high Page Rank tend to rank higher in image searches. Build links into the page where the image is located and both your organic and image search rankings should improve.

9. Prevent the framing of your web site with javascript - You can stop Google from framing your web site by adding javascript code to your pages.

The idea here is that when somebody clicks on the image thumbnail in the search results they will go directly to the page on your site where the image is located without seeing the Google frame that has a direct link to the image. You should get more page views by using this javascript. I’m not sure if Google will penalize your site for using such code.

I would love to hear of any other techniques that you have found successful for increasing your image search results.

Michael Fleischner - Marketing Expert

Add-On Domains, Parked Domains and Sub-Domains

Once you have a website up and running, you may want to launch other websites. The default way to do it is to register new domain names and open new hosting accounts. However, opening new hosting accounts can be expensive, especially if you still have plenty of free space and bandwidth available in your original account. Fortunately, it is possible to share the web space and bandwidth of your original account among different sites.

You can basically do so through:
Add-On Domains
Parked Domains, and
Sub-Domains

What is an Add-On Domain?
An add-on domain is a new domain name that points to a subdirectory within your existing domain hosting account, where the website for the new domain will reside. Add-on domains must be registered domain names that you own, and that are configured to point to your web host's servers.
From a web user perspective, an add-on domain functions just like any other domain. For example, if you already have a hosting account under www.main-domain.com, you can register and set up an add-on domain (for example: www.add-on-domain.com), so that when your visitors type "http://www.add-on-domain.com" in their browser, they will be transported to the new site.
The advantage of add-on domains is that the browser's address bar will show "http://www.add-on-domain.com" (there will be no reference to the original domain), so the process will be totally transparent to your users. If your users navigates to another page, their browser will accordingly show "http://www.add-on-domain.com/anotherpage.html", just like it should.
Apart from sharing web space and bandwidth with your main domain, add-on domains also get their own cgi-bin and statistics.
Many web hosts now offer to set-up add-on domains for free. This is only fair, since you are not getting any more web space or bandwidth. Others, however, will charge you a modest one time fee, which is not bad, especially when the cost of registering the new domain is included. Finally, some web hosts will charge you a montly fee for each add-on domain you set up. In some cases, that fee can be very close to the monthly cost of your web hosting account, to the point that it is better to just open a new hosting account for the new domain. If you plan to set up add-on domains in the future, you're better off avoiding this kind of account.

What is a Parked Domain?
A parked domain is a domain that doesn't have a hosting account associated to it, and that is usually enabled with URL forwarding capabilities, so that it points to an existing website. For example, let's assume that you already run a newsletter that is hosted in a subdirectory of your domain name, as follows: "http://www.domain.com/newsletter/index.html". You may at one given point want to register a separate domain name for your newsletter, so that it is more memorable, but may not want to move its pages to a new server, open a new hosting account, or pay to establish an add-on domain. You can then register a and park a new domain for your newsletter (for example: "http://www.newsletter.com"), which will be forwarded to "http://www.domain.com/newsletter/index.html".
You don't need to register this new domain with the same company that hosts your website. You can register it with any domain registrar (preferrably one that offers free URL forwarding) and point it to the physical location of the pages.
The difference between a parked domain and an add-on domain from a web user's perspective is that with a parked domain the URL in the address bar will change to the physical location of the page as the page loads. For example, if you type "http://www.newsletter.com", that domain won't remain in the browser address bar, but will change to "http://www.domain.com/newsletter/index.html" as soon as the page is displayed.
From a webmaster's perspective, the difference is that the parked domain won't have its own separate statistics reported through the control panel of your hosting account.
Parked domains are also a good alternative for webmasters whose site is hosted by a free hosting service, since by using a memorable parked domain users won't need to remember the cumbersome web addresses usually associated with free hosting accounts.
They are also widely used by members of affiliate programs, who forward the parked domain to the merchant pages, so that they don't have to use an affiliate URL that includes their affiliate id (which turns many people off).

What is a Sub-Domain?
A subdomain, also known as a "third-level" domain, is a great way to create memorable web addresses for various sub-sites of your site. For instance, Yahoo! uses subdomains for its different services, like "mail.yahoo.com", "music.yahoo.com", etc. The basic syntax is: "http://subdomain.domain.com".
Large businesses use subdomains to establish branding and focus on separate products or services, because a subdomain creates a separate URL and web presence, all within your same main hosting account. For example, a restaurant directory may establish sub-domains for different cities, or a school can set up subdomains for different academic programs.
It is also possible to redirect (forward) traffic from a particular subdomain to another location, either within the main site or to a different website altogether.
You should be able to set up and manage add-on domains, parked domains and subdirectories from your hosting account or domain registrar control panel. However, as we usually suggest, always consult with your web host before proceeding if you have any doubts.

The real truth behind SEO Experts

I believe thousands of people get scammed every year by so called SEO Experts. Why? Well, because they can’t distinguish lies from the steel cold truth. Because they are too credulous and there are lots of guys waiting to take advantage from it. And of course, because they want great results with as little expense as possible.

So, how can you distinguish the good SEO companies from the fake ones? Well, first of all, learn not to believe in any of the following stories, that the guys from Hobo-Web put together a couple of days ago. I’ll show you only some of the "best" replicas:

• We cannot show you results for clients as it is 100% confidential - so i guess i should take your word for it, ay mate?
• We KNOW how Google works - well, that surely make you unique. Cause i don’t and i don’t think anyone does, not even Matt Cuts… But hey, that’s just my opinion. You’re the big SEO Expert, you know better…
• Toolbar Page Rank Is Everything - Of course it is. And pigs fly. Oh no, wait, they don’t… That means there’s something wrong with your logic? Ironicaly, the PR myth is so deep-rooted. 90% of my clients ask me about it and demand a PR5+ for their site…
• Submit To 75,000 Search Engines - Since Google, Yahoo and MSN have like 95% of the worldwide market, and you don’t even have to submit your site on them, what are all the other 74997 search engine submission worth?
• We don’t rank for any “seo” terms because we don’t want to - or perhaps because you don’t know how to? Hmmm…

Anyway, clients like to see high figures, so you can’t really blame companies for giving them what they want, can you? But in the end, how can you be sure you won’t be duped when looking for the services of a SEO company? Well’ you can’t, but the risks should be minimal if you take these advices into consideration:

• never sign a company that guarantees you results over night. Because we’re talking about a logical and longtime process that can’t happen over night, and which can’t always have the desired results
• don’t fall for the big numbers: 50.000 search engines, 10.000 first positions in SERPs, thousands of visitors everyday, etc etc
• try to work with companies/people recommended by your friends (or by many others on forums, groups, etc)
• ask for previous work references
• make sure you know what you are asking for and what are you expecting to obtain from a SEO company

Search engine optimization tips - the beginning

More and more people are planning to go big on the Internet, that’s why Search engine optimization tips is a very hot subject these days. But they must know at least the basics in SEO first. That’s why I’m going to write a nice guide on search engine optimization, with many episodes, covering all (or at least most of) the important things in this domain, with planning, On Page SEO, Off Page SEO, statistics, improving and of course tips.

SEO - The beginning

One of the important causes why some sites are successful and most aren’t is because their webmasters did their homeworks before starting building the project. They studied and researched. What? Well, there are many aspects.

1. Think about your site, about the idea behind it, about its topic, about its niche. Niched sites are the most likely to become big in time, as long as you don’t pick an overcrowded niche and you have something to say regarding that subject. So, going as deep in a niche as possible and being an expert there is important.

2. Study your competition. See how are their sites built (that’s why a SEO wannabe must have basic programming knowledge, like HTML, PHP, CSS), see on what keywords do they rank well, see where you can beat them.

3. Think about the keywords you’ll be focusing your main page. This article on keyword researching tools will help you.

4. Then, choose your site’s name. I suggest you go for branding instead of choosing a name that would help you from the SEO point of view. Why? Because a branded site name can pe optimized for search engines but a SEO name normally can’t (all the good domains are taken, at least on .com). Remember, the name should be simple, easy to remember but also should be related to your site’s topic.

5. Find a good and reliant hosting. I’m using Dreamhost and I’m satisfied with it. For 10$ a month i get 500 GB storage space, 5TB traffic, i can park as many domains as i want and so much more. If you’re interested you can get even better offers from here. You can use this code: MIKE84 , and get 2 extra FREE lifetime domain registrations that are well worth some bucks.

6. After you’ve done all of these, you’ll have to take a while and think about your site’s structure and layout. It is important to use also usability criteria here, to make your content easier to spot by your future readers. Use SEO friendly programing languages (more about this on a following article). For now, here are the basics:

• No frames
• As little Javascript, AJAX and Flash as you can
• Use plain XHTML+CSS code. Use external CSS
• Try to use a table less layout: reduces the page’s size so your site will load faster
• Validate your code. It might be hard to eliminate all the errors, so focus on the important ones: don’t open a tag without closing it, don’t use improper attributes, etc

If you can’t build your site by yourself the way it should be, hire a specialist. It will well worth the money.

7. Plan your link structure carefully, as this is a crucial aspect.

On page SEO checklist

This is a short (actually not so short) checklist of ON page SEO factors i look at when someone asks me to analyze a site. There are others too, more complicated ones. I’ve just decided to share with you the basics… And a little bit more. So, enjoy.

The ON page SEO Checklist

1. The arborescent structure
   • depth of the tree (should be at most 3 levels deep)
   • the logic dependence between levels (the child level has to be a particular case of its parent)
   • Existence of broken parts of the tree
2. Link analysis
   • breadcrumbs (the navigation bar)
   • link structure (related to the structural tree)
   • use only absolute links, no relative ones
   • how is the link built (should contain only lower case words separated with "-"; special character and connection words should be eliminated)
   • length of the link (65 characters top is the best)
   • no duplicate links (different links with same content)
   • links should always end in "/ " (www.mikesquarter.com/article/) due to server loading problems
   • don’t use links ending with extensions (.htm, .html, .php, etc)
   • number of links on a single page
   • title attribute on each link
3. Menus
   • Important keywords in menus
   • absolute text links
   • using Hs where needed
   • Use CSS menus rather than JS or Flash ones
   • use nofollow on secondary menus where needed
4. Indexing and nofollow
   • use robots and index only the important pages (usually search and secondary pages should be excluded)
   • use nofollow internally
5. Semantics
   • Title, keywords and description - unique for every single page
   • using H1 for title, H2 for subtitle, etc
   • using the Alt attribute for pictures and Title for links
   • using Em, Strong, etc to emphasize parts of the text
   • using internal linking
6. Sitemap
   • use a sitemap
   • the standard of the sitemap
   • put in the sitemap only the links you want to be indexed
7. Coding
   • validate your HTML and CSS code (might be impossible to do this, but take care of the important errors. for example, don’t leave opened tags unclosed, don’t use inappropriate attributes for a tag, etc)
   • external CSS
   • try not to use JS, Flash unless really needed. If you have to use it, make sure you have external JS.
   • Don’t use Frames or iFrames
8. Gallery
   • make sure you have a little bit of content on each picture’s page in the gallery. (A short description of the image would do just fine)
   • use the Alt attribute and try to rename the picture accordingly to what you can see in it (actually, according to what you think users will search on Google to find that picture). Be short and descriptive.
   • use proper navigation in you gallery
   • I would not recommend on using Flash or JS galleries, even though they look quite good. That’s if you want your pictures to be found by Search engines.
9. Other problems
   • personalized 404 page returning proper HTTP status code
   • domain canonicalization
   • table less design would be appreciated (not needed though)
   • keep your page dimension as low as you can (many Internet users in the world still use Dial up you know)

Well, this should help you make a decent analysis on your site.

Color in webdesign

I always thought a good designer should be more than creative. He should know stuff, have studies, have read lots of things about design, usability, etc.

Let’s take colors for example. Most of us choose the colors on our blogs/sites depending on one aspect alone: whether if we like it or not. That’s why most of the themes here on MQ had lots of blue and orange. But… a real designer would choose the colors depending on the target and on the style of the site. Because colors make us feel a certain way, so they can and should be used to support the purpose of a website.

Let’s take a look at the main colours now:

• RED : signifies strength and excitement and it can stimulate people make quick decisions
• BLUE: signifies peace, calm, good fortune
• GREEN: best for nature associated websites , as it signifies movement, nature, environment. Should be very careful when choosing green as the main color, as if used badly, has been known to drive people away from a website
• YELLOW is the color of ideas and stimulates mental activity and attention
• ORANGE is the color of energy. Can be used to stimulate people on impulse reactions, such as buying stuff from your online magazine or clicking links
• PURPLE, the color of nobility, combines the energy of red and the stability of blue. Symbolizes wisdom and ambition and is appreciated by the vast majority of children.
• BROWN, the color of reliability, signifies comfort and durability, and gives the websites an air of professionalism. Careful not to confound Brown with Beige, the color of dullness
• BLACK speaks to power, mystery and sophistication. It is used to make the more colorful parts of the sites stand out, like photo galleries. Too much black on a theme can be bad, as it would darken the mood of the visitors.

In the end, remember this: "Color is immediate, emotional and memorable. If you have a website, try this simple test. Look at it for a few moments and write down the feelings and words that come to mind. If your colors aren’t telling you the same story as your content it may be time to look at changing your color scheme."

VPS memory explanation

We noticed that some customers are somewhat confused about the way memory is allocated. A linux VPS allocates RAM the same way as any other linux environment. The biggest confusion previously was related to allocated(reserved) memory and assigned(used) memory.

Privvmpages

• Soft limit
  This limit defines the maximum amount of memory that your VPS can allocate. This limit is usually set to 262,144 pages. 1 page is 4kb, so this limit is set to 1,048,576kb which is equal to 1024Mb (or 1Gb).
  
  
• Hard limit
  This limit is typically just slightly higher than the soft limit, to make sure that your VPS wouldn’t die in case the soft limit is reached.
  
  
• Current use
  This is the amount of memory that your VPS has currently allocated (note: allocated ram basically means “reserved” ram – it is not all actually being used).

Oomguarpages

• Soft limit
  Despite what the name of this parameter implies, this number isn’t a limit, but a guarantee. This number is the guaranteed ram that’ll always be available to your VPS, no matter what happens.
  
  
• Hard limit
  This parameter is always set to 2,147,483,647 – which basically means “indefinite”. In other words: this parameter isn’t being used by anything and can be disregarded.
  
  
• Current use
  This is the amount of memory that your VPS is currently using.

RAM pages
In a 32bit environment, ram is always used by 4kb pages. A page is basically a "block". In order to convert something from pages to megabytes, you multiply by 4, then devide by 1024 (to go from kilobytes to megabytes). For example:

65536 * 4 / 1024 = 256

In other words: 65536 (4kb) pages equals 256mb. So if your oomguarpages soft limit is set to 65536, that means you have 256mb guaranteed RAM.


Current use: allocation vs. actual usage
As you can see in the above description, the current use of the privvmpages represents how much RAM your VPS has allocated, and the current use of the oomguarpgaes represents how much RAM is actually being used.

Now you might wonder; what's the difference between allocation and actual usage? Allocation basically means "reservation". For instance when you run a webserver, it might allocate 50mb ram but only use 20mb of that allocation.

Your RAM guarantee applies to the actual usage. For instance if you have 256mb guaranteed RAM, your VPS can safely allocate 400mb if the actual usage is less than 256mb, since the guarantee applies to the actual usage (e.g. it simply doesn't matter how much ram is allocated).


Burstable RAM
By now it should probably be clear what guaranteed RAM is. But what is burstable RAM? Burstable RAM is the memory that's available beyond the guaranteed ram. For instance your VPS might have 256mb guaranteed ram, and 1024mb burstable ram. This means that after you have used up your guaranteed ram, there's still 768mb burstable ram available for burst usage - IF there's enough free memory on the host server.

We always leave some extra memory available in each host server as burstable ram. Additionally extra burstable ram is available if another VPS on the same server doesn't use up all of its guaranteed RAM.

Please do keep in mind that in the event a VPS suddenly needs its guaranteed RAM, that VPS will always get it. As a result, that may also mean that a VPS which is using burstable RAM, may get some processes killed in order to reduce its burstable RAM usage. As such, it is highly recommend to not rely on burstable ram except for peak usage. As a rule of thumb, you should always make sure that your guaranteed RAM covers your typical ram usage. For instance if you typically use 350mb ram, you shouldn't get a VPS with 256mb guaranteed ram, since you'd be using almost 100mb ram which may get killed off. Surely it may work just fine - but your processes are at risk that way.
..

Website Testing: Conquering Cross-browser, Cross-platform Woes

As I was doing final cross-browser testing for a redesign of SKDesigns, my website design business, the design implementation was working quite well in nearly every mainstream browser for Windows, Mac, Linux, and even the Lynx text-only browser. Unfortunately, though, I found problems with three old or little used browsers, such as Internet Explorer 5.2 for Mac that destroyed the CSS-positioned layout. I toiled over how to best handle these browser bugs, especially since my upcoming Web design book—currently in production at my publisher—stresses the importance of usability, readability, and degrading gracefully for older browsers. Today’s post covers part of my decision-making journey and choices of approaches for dealing with these CSS bug-riddled old and little-used browsers.

Basic Development Goals

First, my basic development goals for this redesign project:

• Standards-compliant for XHTML 1.0 Transitional, CSS 2.1
• WCAG-compliant (W3C’s Web Content Accessibility Initiative), preferably Priority 2 or 3, but at least Priority 2
• Use of liquid widths, not fixed widths, for the entire layout
• The visual display doesn’t need to look identical in every browser, even the latest browsers.
• The visual display should look the best in the latest browsers and degrade gracefully for older browsers so that even users with old browsers can read, navigate, and use the website.
• Use CSS workarounds or hacks only as a last resort, maintaining W3C validation, such as those listed at Peter-Paul Koch’s site, CSS Hacks: Safe List and his article at Digital Web, Keep CSS Simple.

Design and Development Approach

I kept in mind the above goals while I created the visual design. Here’s the basic skeleton layout upon which I created the design and markup:

As I also recommend in my upcoming book, I first developed the design for the homepage to validate to W3C Recommendations, which in this case was XHTML 1.0 Transitional and CSS 2. I then checked it with Opera 8 and Firefox 1.04 since they support CSS 2 the best at the moment. Once those worked, I checked it with Internet Explorer 6, finding plenty of problems due to several of this browser’s frustrating CSS bugs, such as the following:

• Float problems, as explained at Position is Everything’s The Float Model Problem.
• IE’s 3-pixel text shift problem, as explained by John Gallant and Holly Bergevin via Position is Everything’s The IE Three Pixel Text-Jog and via How To Attack An Internet Explorer (Win) Display Bug.
• Jumping text when a link is hovered, as explained by Ingo Chao via Position is Everything’s Quirky Percentages in IE6’s Visual Formatting Model—my section navigation links jumped to the left on hover. In addition, within the main content area, text a paragraph or heading below the hover jumped up(!), but I suspect it’s for a similar reason. I think I’ve finally resolved both problems, in part by designating my
  containers with negative margins:

  #somecontainer{
margin-left:-3px;
margin-right:-3px;
}

  The problem is totally resolved if I also add the same to the left padding:

  #somecontainer{
padding-left:-3px;
}

  The W3C validator doesn’t like negative padding even though negative margins will validate, however. I removed all but one negative padding designation, and I think the bug is still gone, but I’ll be doing further retesting.

I then checked it with Lynx (text-only browser) and Netscape 4.x. So far so good.

Checking Colors

In addition, I checked the visual design on several different displays to see how the colors looked on a variety of displays. On one computer’s display, the topmast’s heading background looked incredibly washed out rather than showing the rich colors that I had in mind. The colors looked as intended on my own computer’s display set to the sRGB standard. I went back to Photoshop and did some serious color revisions to try to better compensate for other displays.

When all that checked out OK, I then created a couple of internal pages and retested, repeating until I’d created all the pages.

Then a Print Style Sheet

At that point, I went ahead and created a simple print style sheet. As you’ll see in the Netscape 4 example below, the on-screen top heading’s logo image is a transparent .gif image that floats over its topmast area dark multi-colored background, but its edges appear jaggedy without its needed dark background, as I expected. I created a different version for print that works for a white background. I stipulated in my CSS to hide for screen and show for print, and likewise to hide the screen version in my print style sheet, such as:

In my screen style sheet:

#logoscreen {display:block;} /* screen logo */
#logoprint {display:none;} /* print logo */

In my print style sheet, the opposite:

#logoscreen {display:none;} /* screen logo */
#logoprint {display:block;} /* print logo */

I tested the print version by clicking on Print Preview in Firefox, Opera 8, and IE6, where it worked as expected. I didn’t check it in Netscape 4 at that point, though, which bit me later, as I explain below!

More Cross-Browser, Cross-Platform Tests

Finally, I checked several pages via BrowserCam, especially for Mac browsers, where I found frustrating problems:

• Positioning problems in IE5.2 Mac make the pages difficult to impossible to read due to content floating over other content, such as the footer area with the bottom-of-page navigation and contact links that should rest at the bottom of each page. The bottom dark blue strip should span the entire width of the page, too. The visual display in IE5.2 Mac is not good.

  

• The bottom navigation in IE4 Windows didn’t display as inline list items, in addition to floating up over the content area. The bottom navigation should be a fairly narrow horizontal navigation strip that spans across the bottom of the page, similar to the dark navy strip just below it, not the fat dark tan area with block list item navigation that’s rendered by IE5.2 Mac in the example below. There’s also the big white gap below the footer, too, that shouldn’t be there, of course! UGH!

  

• In Netscape 4.x, the “print only” version top-of-the-page logo graphic and the on-screen logo appear at the top of the page, along with no background for the topmast, so it looked horribly ugly:

  

• Konqueror 3.05 for Linux 8.0, moves the right column to the bottom of the page, overlapping the footer and making a big mess, to put it mildly.

What To Do About Old Browsers, Little-Used Browsers?

Next came deciding what to do about these problems. My bare minimum requirement is to be sure the site is still usable and readable in the above problem browsers. The above problems didn’t meet that, as shown in those screenshots.

Re-check Bug Lists

First, I thought I’d re-check bug lists to see if/what I’d forgotten to allow for that I hadn’t already covered. Some insightful online resources are:

• IE5 Mac - CSS Bugs and Oddities, via Empty spaces
• North Pole: A Structural CSS Positioning Study, an insightful tutorial on cross-browser CSS positioning by Adrian Senior for Community MX
• Position is Everything, a fantastic website resource for CSS bugs and resources by Big John and Holly Bergevin.
• Will the browser apply the rule(s)?, a terrific chart with more information, via Centricle.

Re-check Browser Stats

Next, I decided to check the browser stats for IE5.2.3 Mac, Konqueror 3.x for Linux, and the latest for IE4.x and Netscape 4.x. Even 1/2% or 1% using any of these still means 300-600 visitors to my business site each week who wouldn’t be able to read the content or navigate through the site, which is not OK with me. I wanted to at least meet the minimum.

At the same time, these browsers have plenty of bugs and oddities, and I really didn’t want to spend a lot of time with this or mess up my CSS for the most-used mainstream browsers.

To make sure the stats numbers in my head were still current, I re-checked my site’s browser usage statistics and other freely available browser stats and general trends. I especially wanted to find out the numbers of visitors using specific Mac browsers, and how the trends are going. I also know that stats aren’t totally accurate, so checking several sources gives me a broader picture, not just what my own site visitors use in any given week. Here are a couple of helpful resources:

• Browser News by Chuck Upsdell, is one of the best places to find out the latest trends, stats, and summaries about them. You’ll also find links to plenty of resources for more information. I spent a little time reading the latest and following a few of the links to other stats.
• Browser Statistics by Rendering Engine by John Haller culls stats from WebsideStory, OneStat.com, and TheCounter. As Haller states, “All three are imperfect, but together, they may cancel out some limitations. WebSideStory is very US business-centric. OneStat is more global. TheCounter is more geared to smaller sites.”

What are Other Current Opinions?

I also wanted to see what others are doing about these browsers, especially IE5.x for Mac and Windows. Here are some resources that I found helpful:

• Dealing with IE5/Mac, post at Orderedlist.com January 5, 2005, by Steve Smith.
• Important Mac browsers?, an email to the css-discuss list by Martin Alderson on 4 December 2004 13:01.
• HTML and Browsers: Game over for IE5.x - Time to drop support?, discussion thread at Webmasterworld.com beginning July 31, 2005, 1:40 am.
• IE5/Mac Mattered, post at sidesh0w.com December 16, 2004, by Ethan Marcotte.
• seems like css isn’t working in ie 5 for mac, formatting wrong..., discussion thread at wordpress.org, started 2005-05-31 00:57:18 by Ron Adair.
• When Can We Hide From IE5/Win?, post at SimpleBits, December 17, 2004, by Dan Cederholm.
• Clarification Regarding IE5/Win, follow-up post at SimpleBits, January 12, 2005, by Dan Cederholm.

Figuring Out Practical Solutions

Given the numbers are so small and diminishing as the weeks go by, I decided to serve these old or little used browsers a visually simple website that’s readable and navigable, although it won’t have the visual design seen in current mainstream browsers.

First, I thought I’d try an approach to hide style sheets from IE5 Mac. That way I’d keep hacks and workarounds to a minimum within my style sheets. Here are some possibilities that I explored, the latter of which I chose to use for my site:

• Linking styles and hiding styles, via Empty Spaces:

  @import url('path/to/style.css');

• An approach via sidesho0w.com:

  /* comment here
\*/
@import url("stylesheet.css");
@import url("anotherone.css");
/* END hide from Mac IE5 */

After I tested that filter, I also added another filter to hide my style sheets from IE3-5 Windows, too: Tantek Çelik’s High Pass Filter. The result in IE5 Mac and IE3-5 Windows is a visually simple one, but it’s now readable and usable. In addition, I didn’t need to add any more hacks within my existing style sheets. I can live with this result for such a small number of visitors, especially since those numbers keep shrinking.

I created a simple style sheet for all browsers, but these old or little used browsers can see and use it without any harmful effects, including Netscape 4.x. The latest browsers can also use another more advanced style sheet that they can handle that’s hidden from these old or little used browsers via the filters. I might add more styles to the simple style sheet before I finish the redesign, but I haven’t decided on that yet. I can live with it like it is right now, too, especially knowing that those using these older or little used browsers can still use the site.

Along the way I found info on serving a style sheet only to IE5 Mac, for those interested in trying that. This is shown with a great explanation via Stop Design’s Doug Bowman at IE5/Mac Band Pass Filter:

/*\*//*/
@import "ie5mac.css";
/**/

Browser CSS Bugs, Hacks, and Workarounds

I’ve talked about hacks and workarounds a fair amount in this post, but I’m still a firm believer that it’s far better in the long run to create your style sheets without any hacks or workarounds first, and then only use them conservatively when deemed absolutely necessary. For example, you can do a lot to avoid many of the browser quirks and bugs by how you approach your CSS. There’s plenty of documentation around the Web about it, but here are a few:

• CSS Crib Sheet? posted November 19, 2003, by Dave Shea via his website, mezzoblue.com. Be sure to review the comments for that post, too, as it’s an interesting discussion.
• CSS Problem-Solving posted March 3, 2004, also by Dave Shea, which is somewhat of a follow-up to the above.

If you’re creating your own site that you can monitor and change as new browser versions come out, you might not need to be as conservative, but if you complete a site for a client and you sign off on the project, it might be better to avoid hacks and workarounds, or at least keep them in a separate style sheet that can be more easily removed once they’re not needed.

Hacks and workarounds today may cause problems later. The next version of Internet Explorer is on the horizon, and other browsers will continue putting out new versions, too. The approach I’m really talking about here is coined “Progressive Enhancement.” See Steve Champeon’s article via Webmonkey: Progressive Enhancement and the Future of Web Design.

See also Integrated Web Design: Strategies for Long-Term CSS Hack Management, by Molly Holzschlag for Informit.com, June 24, 2004.

Checking Visual Layouts via Online Screenshot Services

As I researched IE5 Mac info and testing, I learned of and tried some free Mac screenshot services online, including the following:

• BrowserShots, a free screen capture service for several Macintosh browsers at 800x600 and 1024x768: Firefox 1.0.4, Safari 2.0, MSIE 6.0, Opera 7.54. As I write this post, there’s a 12-day turnaround time for screenshots, as there are lots in line ahead of you.
• iCapture, free screen captures with Safari for Mac.
• lixlpixel Screen Capture, free screenshots with these Mac browsers: Safari 2.0, Internet Explorer 5.2.3, Mozilla 1.7.7. The screenshot results are immediate, too—no waiting.

In addition, I also use BrowserCam, which is a commercial service:

• BrowserCam is a fabulous service that I wholeheartedly recommend. While the free services above are free, they only do the top of the page with a limited number of browsers. If you use an anchor within your page, though, such as #footer and input your URL with the anchor, such as http://website.com/pagename.html#footer, you’ll get that part of the page. (Thanks to lixlpixel for that tip!) BrowserCam will take screenshots that cover the entire page based on page scroll increments, which is how I identified the footer navigation problems shown above, for example. In addition, BrowserCam includes quite a few browsers on multiple platforms.

Getting Ready for Launch

My business site’s redesign is now almost ready to go. I’m in the midst of editing and updating all the content. I’ll do a final test of the entire site with CSE HTML Validator’s batch processing feature that checks for W3C validation, spelling, and links (really handy!). I’m planning to have it online live within a few days.

Ah, Web Standards!

Well, the hurdles I’ve had to jump over for this one redesign are another example of why Web standards matter. While the above may sound like a lot to figure out, the above is nothing compared to the version 3 and 4 browser days and the lack of even decent browser support for W3C Recommendations. At the same time, designers and developers like myself also wish standards support could be a lot better than it is now. We have to keep after 'em and continue to push for it.

Interestingly, most mainstream users don’t even think about standards. They just want to visit a website and do whatever it is they came to do there. That’s how it ought to be, too.

Users shouldn’t have to think about standards at all, in my opinion. Standards should live quietly in the background helping to make everything work smoothly regardless of the browser or platform. In an ideal world, we designers and developers wouldn’t have to deal with all these browser bugs, either.

Courtesy,

www.brainstormsandraves.com

Which web page elements lead to high Google rankings?

The German company Sistrix analyzed the web page elements of top ranked pages in Google to find out which elements lead to high Google rankings. They analyzed 10,000 random keywords, and for every keyword, they analyzed the top 100 Google search results.

Which web page elements lead to high Google rankings?

Sistrix analyzed the influence of the following web page elements: web page title, web page body, headline tags, bold and strong tags, image file names, images alt text, domain name, path, parameters, file size, inbound links and PageRank.

• Keywords in the title tag seem to be important for high rankings on Google. It is also important that the targeted keywords are mentioned in the body tag, although the title tag seems to be more important.
  
  
• Keywords in H2-H6 headline tags seem to have an influence on the rankings while keywords in H1 headline tags don't seem to have an effect.
  
  
• Using keywords in bold or strong tags seems to have a slight effect on the top rankings. Web pages that used the keywords in image file names often had higher rankings. The same seems to be true for keywords in image alt attributes.
  
  
• Websites that use the targeted keyword in the domain name often had high rankings. It might be that these sites get many inbound links with the domain name as the link text.
  
  
• Keywords in the file path don't seem to have a positive effect on the Google rankings of the analyzed web sites. Web pages that use very few parameters in the URL (?id=123, etc.) or no parameters at all tend to get higher rankings than URLs that contain many parameters.
  
  
• The file size doesn't seem to influence the ranking of a web page on Google although smaller sites tend to have slightly higher rankings.
  
  
• It's no surprise that the number of inbound links and the PageRank had a large influence on the page rankings on Google. The top result on Google has usually about four times as many links as result number 11.
  

What Google likes in a website

Google, the Internet's most important search engine now has a lot of competition with Yahoo's new search engine and with the upcoming MSN search. Still, Google is very important search engine to understand as it has the power to bring a tremendous amount of traffic to your website.

This article provides you practical tips & know how’s to improve your Google rankings.

• Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.
• Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map into separate pages.
• Create a useful, information-rich site and write pages that clearly and accurately describe your content.
• Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.
• Try to use text instead of images to display important names, content, or links. The Google crawler doesn't recognize text contained in images.
• Make sure that your TITLE and ALT tags are descriptive and accurate.
• Check for broken links and correct HTML.
• If you decide to use dynamic pages (i.e., the URL contains a '?' character), be aware that not every search engine spider crawls dynamic pages as well as static pages. It helps to keep the parameters short and the number of them small.
• Keep the links on a given page to a reasonable number (fewer than 100).
• Content: Google searches the content on your site to return relevant search results. Be sure to include relevant keywords in the text of all your pages. Also, try to keep them near the top of your pages - Google may not crawl all the way down your page.
• Domain Name: Having your keywords in your domain name may boost your ranking. Google seems to favor sites with keywords in their domain.

Those are few basics to Google rankings. Integrate some of these suggestions into your web page, wait for Google to update in next few weeks to see the difference in your rankings.. Verify what works and what doesn't and constantly improve your site based on what you ascertain.

CSS Drop Shadows II: Fuzzy Shadows

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it.

We thought wrong.

The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. Most notable among the latter was Phil Baines’ method for keeping the markup simple when dealing with paragraph drop shadows. We are indebted to him.

The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow). Given that the shadow image is effectively clipped at those points, we felt this was an unavoidable inconvenience, chiefly due to Internet Explorer’s inability to display PNG’s transparency natively.

Then Jan pointed out a technique for making Internet Explorer render PNG’s alpha channel correctly. It works by activating Explorer’s AlphaImageLoader filter (previously discussed in this ALA article), but does so in an inobtrusive way which requires no extra javascript code. We think it’s a godsend. Combining this technique, some image trickery and our “fake shadow offset” method, we’ll be able to make properly fuzzy shadows that work across browsers.

In this article we’ll learn how to:

• Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.
• Coerce IE5.5/IE6 into displaying PNG transparency correctly.
• Use the above to create fuzzy shadow edges for our Drop Shadow effect.

First, we’ll fabricate our fuzzy shadow edge. To do this, we must create an inverse shadow in our image editing program. Usually we’d use a black shadow over a background color. For this effect, we’ll need a colored shadow. It must be the same color as the background over which we’ll apply the effect.

Start with an image like the “fake shadow offset” we described in the previous article. This one should be thinner than before (about 3px thickness for a 6px shadow has worked out well for us). Our examples will use white as background color. When reproducing this technique, adjust for yours.

We’ll apply a “Drop Shadow” effect to this image, taking care to specify white for the shadow color. A strong shadow is desirable — the stronger it is, the faster your shadow will seem to fade. We should now have something that looks like this:

Save this image as a PNG with full transparency. We’ll use this file for IE5.5, IE6 and standards compliant browsers. Make a regular version sans shadow with thicker offset (as seen in the previous article) and save that as a GIF file. We’ll feed this one to IE 5 (which does not support the AlphaImageLoader filter). Here are sample files for your perusal: PNG/GIF (Check them on an image editing program, since they will look like white on white in your browser).

Since we now have a solid color at the edge of our offset, we’ve effectively given up on the possibility of having a transparent shadow, so we’ll use a simple GIF for it. Make sure you apply the effect over the background color you’ll use. Here’s our example shadow: GIF.

The markup for this effect will be two

’s around our image/block element.

The basic technique is still the same: We’ll set up the fake offset (with its inverse shadow) as background of the innermost

, and the shadow as background of the outermost one. When overlapped, the transparency of the PNG will seem to gradually dissolve the shadow image until it becomes the solid background color. The tricky part is making this work in Explorer.

Our CSS is pretty much what we had seen in the previous article:

.alpha-shadow {
float: left;
background: url(img/shadow1.gif) »
no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.alpha-shadow div {
background: url(img/shadow2.png) »
no-repeat left top !important;
background: url(img/shadow2.gif) »
no-repeat left top;
padding: 0px 5px 5px 0px;
}

.alpha-shadow img {
background-color: #fff;
border: 1px solid #a9a9a9;

padding: 4px;
}

If you look closely you’ll notice we’re still including the non-fuzzy GIF offset (shadow2.gif) as background of the inner

. This is for the benefit of Internet Explorer 5.0, which doesn’t support the AlphaImageLoader filter. As it stands, this code will apply to all versions of Explorer. To make adjustments for IE 5.5/6, we’ll create an extra CSS file.

ie.css

To activate the AlphaImageLoader filter in a simple and reliable way, we’ll first include it in its own CSS file and name it ie.css. We know this is shameful and will probably make the Standards Squad put a price on our head, but we’ll hide this file from other browsers later, so it’s ok. Kind of.

Our ie.css stylesheet will look like this:

.alpha-shadow div {
filter:progid:DXImageTransform.Microsoft»
.AlphaImageLoader(src='img/shadow2.png', »
sizingMethod='crop');
background: none;
}

The AlphaImageLoader filter supports two sizing methods: crop and scale. We’ll use crop for our offset (scale fits the full image into the block, and is not what we’re looking for). Since the filter is somewhat limited and does not support CSS-like image positioning, we’re stuck with shadows that drop down and to the right (the image on its default position is all the way to the left and top).

We should note that, since the filter places the image in the foreground of the block element rather than as its background, this technique could be set up to show fuzzy shadows in Explorer with only one

surrounding the image, and show the hard edge shadow for other browsers. Not being ones to reward bad browser behavior, we’ll stick to the technique with the extra

, which gives us a fuzzy shadow in almost every browser under the sun.

The second line, where we set the

’s background to none, is there in order to remove the GIF offset we specified in the CSS before. Since we'll only feed this file to IE5.5 and IE6, IE5 keeps the GIF offset (and thus displays a hard edge shadow). The rest of the browsers ignore that GIF file by the !important method we specified in the previous article.

Conditional Comments

To hide the ie.css stylesheet from all browsers that don’t need it, we’ll use Conditional Comments, a Microsoft provided technique to serve content to specific versions of Internet Explorer. They are included in the html document and look like standard html comments, so browsers other than IE5+ ignore them (and so does the w3c Validator, which is convenient). We’ll insert this in the of our document, after the CSS for the drop shadow:

What that does is specify that the enclosed bit of code should be used by versions Greater Than or Equal (the gte part) to Internet Explorer 5.5 (it must be specified as 5.5000 because of Version Vectors), thus feeding IE5.5 and IE6 the special stylesheet.

That completes the technique. This may seem overly complicated just to achieve a fuzzy shadow, but then again, they say that God is in the details. As a plus, the mentioned techniques can be used to achieve all sorts of different effects.

Here, have a cat:

CSS Drop Shadows

They’re the corkscrew in every graphic designer’s Swiss Army knife. Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they’re not of much use in the fast-changing world of web design. On the web, adaptability and ease of use dictate trends — and static images with a fixed background effect are not very adaptable.

But what if we had a technique to build flexible CSS drop shadows that can be applied to arbitrary block elements? That can expand as the content of the block changes shape? Compatible with most modern browsers? With better results for standards-compliant browsers? If you’re not sold yet, we can also tell you that it requires minimal markup.

Interested? Well, first off, we wouldn’t want to take credit for something we didn’t invent, but merely improved upon. This particular technique was conceived and demonstrated by Dunstan Orchard, of 1976 design fame (hats off to you, Dunstan). We found it was easy, intuitive, and worked like a charm. However, after closer examination, we saw room for improvement and set to work on it.

Here’s how it works: you need to make a drop shadow image in the image editor of your choice. It should be only the shadow, without a visible border (an easy way to do this is by applying the effect to an empty selection). Make sure your image is big enough to cover the maximum expected size of the block elements that will use it. In practice, we’ve found that 800 x 800 is a respectable enough size. Save it as a GIF, making sure you use the color of the background you’ll apply the effect over. Additionally, save the same shadow with full alpha transparency (no background color) as PNG. This will be used to feed a better shadow to browsers capable of displaying it. These are some sample files: GIF file/PNG file.

We’ll start by giving a shadow to an image and then move on to other block elements. In a moment of ingenuity, we decided to name our class “img-shadow”. Our test subject shall be this cute cat:

And its corresponding markup (one div is the only extra markup we’ll need):

The following illustration shows how the technique works:

First, our previously prepared shadow file will be set as background for the div.

background: url(shadow.gif) no-repeat bottom right;

Then we’ll give the image negative top and left margins to make the “drop” that gives us the shadow. Our shadow is six pixels wide, so that’s our magic value.

margin: -6px 6px 6px -6px;

We float the div to avoid having to specify its size (otherwise it will take up all available horizontal space).

Remember we said that we’d provide better shadows for better browsers? This line will do the trick:

background: url(shadowAlpha.png) no-repeat right bottom !important;

That “!important” bit tells the browser that the declaration is to take precedence over normal declarations for the same element (see the spec). It also happens to be unsupported in all versions of Internet Explorer, which also lack native support for transparent PNG’s. It’s almost too convenient. By specifying controversial declarations twice, we get the desired behavior (IE takes the second one, most other browsers the first one). The end result is that, were the background color to change, browsers that support PNG would maintain a perfectly transparent shadow. Sadly, Explorer’s shadow will stay with its original background color.

But why do this you ask? The reasons are twofold:

• We can: This is a painless, effortless and automatic hack that yields great results in the browsers that support it.
• It may fix itself: If the new version of Internet Explorer (shipping with Longhorn) supports both of these standards, we won’t have to fix a thing to get pixel-perfect, truly transparent shadows in it.

The finished CSS code looks like this:

.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

Differences in margin size account for IE’s box model, and that last padding value gives us a nice frame around the image. Sadly, it is lost in IE 5.5 and 5.0. The drop shadow effect stays, though.

Our shadow will blend seamlessly with its background in standards-compliant browsers. In Explorer, the shadow will clash with the background unless you’ve stuck with the background color you used for your shadow. You can see the results here:

For the next part, we’ll apply the drop shadow effect to a paragraph.

Logic dictates that the same technique should yield similar results when working with a paragraph, which can be treated as another block element. And indeed, with most browsers, it works like a charm. Care to guess which one doesn’t get it right?

While developing this technique, we found that when working with a block element other than an image, in bold defiance of common sense, Explorer decided to clip the left and top parts of the block — the ones that “jump” out of the shadow — regardless of what we tried. Amusingly enough, the only version of Explorer that gets this right is 5.0. No amount of hacks, overflow settings, or gentle suggestions seemed to help (and yes, righteous cursing was tried). We gave up and decided that a different approach was called for.

The method we came up with is partly based on Douglas Bowman’s Sliding Doors methodology, and calls for an extra bit of markup (another div), so our paragraph will look like this:

The rain in Spain ...

Instead of giving the paragraph negative top and left margins, we’ll give it positive right and bottom padding. This will expose the shadow (set as background for the outermost div). Then we’ll fake the shadow offset by using a partly transparent GIF as background for the inner div, which will overlap the shadow. Make sure that the visible part of this image is the same color as the background over which you use the drop shadow effect. Name the image “shadow2.gif”. It should be constructed as follows:

Here’s an example GIF file (this image will most likely look as white on white on your browser, so you may want to save it and take a look at it in your image editing program).

This illustration shows what we’re going to do:

The following are the styles needed to accomplish the effect. Notice that the extraneous image and padding are used only by Internet Explorer. Most other browers effectively ignore the inner div, and stick with the method we used for the drop shadow of the image.

.p-shadow {
width: 90%;
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.p-shadow div {
background: none !important;
background: url(shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}

.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}


The same considerations for background color mentioned in the image example apply for paragraphs. Here’s the end result. (Try resizing the text on your browser to see the box change size and watch the shadow adjust.)

The rain in Spain falls mainly on the plain.

Additional notes

In this article, the styles for image and paragraph have been broken up for clarity, but both could be specified in one fell swoop with minor adjustments.

This technique has been tested with Gecko-based browsers, Safari, Opera and IE 5.0+. Apart from the differences noted, no problems were observed. It should work well with most of the stuff out there (no, not Netscape 4.x).

About the Author

Sergio Villarreal lives in México but spends most of the time in his head. He maintains a weblog and rarely updated webcomic at Overcaffeinated.net and makes a point of learning a new trick every day. Some are even useful.

php/Java bridge

What is php/Java bridge?

The php/Java bridge is an optimized, XML-based network protocol, which can be used to connect a native script engine, PHP, with a Java or ECMA 335 virtual machine. It is more than 50 times faster than local RPC via SOAP, requires less resources on the web-server side, and it is faster and more reliable than communication via the Java Native Interface.

What can I do with the php/Java bridge?

The php/Java bridge allows you to quickly access java classes from within your PHP scripts without having to know Java. It also allows you to access PHP scripts from within your Java classes without having to know PHP.

Because of this two-way flexibility, you can access hundreds of pre-built Java classes from your PHP scripts, and hundreds of pre-built PHP scripts from your Java classes opening up your applications to greater flexibility and enhanced functionality.

How it works

The php java extension and the pure PHP PHP/Java Bridge implementation use this protocol to connect running PHP instances with already running Java or .NET back ends. The communication works in both directions, the JSR 223 interface can be used to connect to a running PHP server (Apache/IIS, FastCGI, ...) so that Java components can call PHP instances and PHP scripts can invoke CLR (e.g. VB.NET, C#, COM) or Java (e.g. Java, KAWA, JRuby) based applications or transfer control back to the environment where the request came from. The bridge can be set up to automatically start the PHP front-end or the Java/.NET back end, if needed.

Each request-handling PHP process of a multi-process HTTP server communicates with a corresponding thread spawned by the VM. Requests from more than one HTTP server may either be routed to an application server running the PHP/Java Bridge back end or each HTTP server may own a PHP/Java Bridge back end and communicate with a J2EE Java application server by exchanging Java value objects; the necessary client-stub classes (e.g.: SOAP stubs or EJB client .jar files) can be loaded at run-time.

ECMA 335 based classes can be accessed if at least one back end is running inside a ECMA compliant VM, for example Novell's MONO or Microsoft's .NET. Special features such as varargs, reflection or assembly loading are also supported.

When the back end is running in a J2EE environment, session sharing between PHP and JSP is always possible. Clustering and load balancing is available if the J2EE environment supports these features.

The PHP/Java Bridge does not use the Java Native Interface ("JNI"). PHP instances are allocated from the HTTP (Apache/IIS) pool, instances of Java/J2EE components are allocated from the back end. The allocated instances communicate using a "continuation passing style", see java_closure() and the invocable interface. In case a PHP instance crashes, it will not take down the Java application server or servlet engine.