UI / UX Tips

Posts

Is Web Design Ruining Your SEO Efforts - 5 Things NOT to Do!

Search Engine Optimization is often thought of as a set of tips & techniques that, if done right, can shoot up your website ranking in search results and get it to the top! This is only half-truth though. The process of optimizing a website starts right from the time you think about building a website. Yeah... contrary to popular belief, SEO is not something that follows website launch. Rather it is what you need to base your design process on. And just like there are best practices to optimize your website, there are also other stuff that can potentially have a negative influence on your SEO efforts. So just as much you need to do the right things, you also need to make sure you don't do the wrong things: Here are some design elements that you absolutely must NOT apply: Drop Down Navigation or Mouse-Over Menus This was a rage till recent past! Drop down menus not only saves real estate on a page but is a great way to arrange the navigation elements cleanly... Not to mention th...

HTML <!DOCTYPE> Declaration

Definition and Usage The doctype declaration should be the very first thing in an HTML document, before the <html> tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly. HTML/XHTML Elements and Valid DTDs Doctypes Available in the W3C Recommendations HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML ...

What Beautiful HTML Code Looks Like

I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it! I can’t help but view source on every nice looking website I see. It’s like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It’s just so tempting to see if a beautiful website is built with beautiful code as well, or if its beauty if only skin-deep. Code? Beautiful? Sure. After all, Code is Poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator. It gets me to thinking, what makes beautiful code? In HTML, it comes down to craftsmanship. Let’s take a look at some markup written they way markup should be written and see how beautiful it can be. It’s big enough to print out and tape up inside your locker to impress your friends....

Understanding border-image

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers. The basic idea The border-image shorthand property has 3 parts: border-image: url(border-image.png) 25% repeat; Essentially, these allow you to specify: 1. An image to use as the border 2. Where to slice that image, dividing the image into 9 sections 3. How the browser should apply those sections to the edges of your element The pertinent details Let’s look at each part of the process in a little more detail. The first part is easy, and is familiar from the background-image property. For demonstration purposes I’ll use this image, which is 100px x 100px: Slicing your image The second part can have from one to four values, much like the border-width property, and they are specified in the sa...

Web on the Cell and Importance of XHTML

Cellphones are the new face of the web. Getting the Internet into cell phones proved a smart idea and today the number of users that browse websites on phones has risen considerably. Thanks to technology that now we can access the net with that little thing on our palms. The prime reason for the Internet over Cellphone popularity is the wireless mobility that it offers. All we need is an Internet connection (offered by both service provider and cell phone manufacturer) and the World Wide Web is in our hands. XHTML plays an important role here. While coding any website, the programmers keep the website compatibility in mind. There is however a special XHTML language version for cellphones called XHTML-MP (Mobile Profile). However, many phones that have built-in browsers go just fine with XHTML alone. Systematized, hand written, table-less XHTML coding perfectly supports the browsers at cell phones. Earlier, WML was the primary markup language for mobile web. Well that was way back. Toda...

XHTML Web Design - Top 10 Benefits

If you are still using HTML in your web design, consider transferring it to XHTML as it is the wave of the future. As new browsers are developed they will be using XHTML more and more because it is compatible with a wider range of devices. What is XHTML? XHTML is a combination of HTML and XML (Extensible Markup Language). XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML. Top 10 Benefits of Using XHTML in Web Design 1. Clean code All XHTML tags must have closing tags and be nested correctly. This generates cleaner code. 2. Search engine spiders Because XHTML documents have cleaner code they can more easily be spidered by the search engines. 3. Faster loading Web pages that don't contain errors and have clean code will load faster in all browsers. 4. Reduce bandwidth costs Lean XHTML documents mean you will use less bandwidth and therefore reduce costs particularly if your web site has 1000s of pages. 5. Backward compatible XHTML documents are backward ...

XHTML Equals to Browser Compatibility

XHTML is the big in-thing in web designing these days. It is the fastest growing trend that has now become a highly sought after service. So what is XHTML, and how does it guarantees browser compatibility? Let us study it in some detail. Plato once said, necessity is the mother of all inventions. HTML, which was once a popular source code, is now overshadowed by XHTML, i.e., Extensible Hypertext Markup Language. Earlier there were few web browsers. But as different web browsers have also marked the industry with its advent today, it becomes important to please all of them (as you don't know which browser the end-user uses). XHTML allows the site to divide the content from its appearance through CSS (Cascading Style Sheet). This makes the layout equally appealing and compressed for all web browsers. Web has crossed its comprehensible boundaries. It started with being on our system desktop, shifted to laptop screens, and has now reached our cell phones and Personal Digital Assistants...