UI / UX Tips

Posts

Showing posts from July, 2010

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...

Keys to Building a Successful Small Business Website

A small business website serves the primary function of providing information about the business, the products, and the services. The purpose of creating such a site is to attract visitors, create inquiries or leads, and generate more business. A small business website should be able to market the products and services over the Internet and create a sense of need in readers so as to achieve greater conversion rates. So what are the keys to building a good small business website? * Quality content is of utmost importance. No matter how attractive a site looks, it is ultimately the content that will hook people and keep them coming back. After all, when you recommend a site to a friend, do you do it merely because the site looks good or because the information available is helpful, useful, and interesting? To ensure the online success of a site, it is extremely important to have unique and fresh content. You can try blogs, or can update content at least once every week. Remember that...

Tips for Web Design that Crosses Cultures

The internet has the potential to put a global audience at your fingertips, but there’s far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to do with language, design and SEO that all need to be addressed before your website becomes truly accessible ‘world-wide’. Thankfully, though, there are a number of simple tricks you can apply that will make it all a less daunting process. Translate your content This is perhaps the most obvious but also the most important tip. English is arguably the most commonly used language internationally, but it still serves as a native tongue for only about 20% of the world’s population. Clearly, an English-only website will be inaccessible to a huge percentage of your potential online audience of 1.8 billion people. There are various ways to translate your content and the method you choose may reflect budget and time constraints. The easiest way is to add a translatio...

Present Trends in PSD to HTML & XHTML Conversion Services

Have you ever wondered the outcome of such a major boost in the the web industry? Such a flooded demand for the PSD to HTML/XHTML/CSS conversion service providers for all your business needs have catered the scope of a wide variety of service providers in this arena who can actually try and provide the best possible services they can at affordable prices. To be able to meet the business requirements, and that too, when we are living in the world of globalisation, outsourcing these services serves a lot of purpose. To be able to bait more and more customers and come up with the most effective conversion results in terms of the traffic your site is able to draw, the various business organisations hunting out for these conversion service providers. And, if we see the other way round, the importance of such conversions is that you get a chance to fit in to the particular set of service. You get a chance wherein you can actually focus on to the popular design format. A well professional set...

HTML 5 Tag Reference

<article> Specifies an article <aside> Specifies content aside from the page content <audio> Specifies sound content <bb> Specifies a user agent command <canvas> Define graphics <command> Specifies a command <datagrid> Specifies data in a tree-list <datalist> Specifies an "autocomplete" dropdown list <details> Specifies details of an element <dialog> Specifies a dialog (conversation) <embed> Specifies external application or interactive content <eventsource> Specifies a target for events sent by a server <figure> Specifies a group of media content, and their caption <footer> Specifies a footer for a section or page <header> Specifies a header for a section or page <mark> Specifies marked text <meter> Specifies measurement within a predefined range <nav> Specifies navigation links <output> Specifies some types of...

Advantages Of Tableless Websites

HTML was originally designed as a semantic markup language intended for sharing scientific documents and research papers online. However, as the Internet expanded from the academic and research world into the mainstream in the mid 1990s, and became more media oriented, graphic designers sought ways to control the visual appearance of the Web pages presented to end users. To this end, tables and spacers have been used to create and maintain page layout. Problems then started to arise from the use of these techniques. As many webpages are build with tables nested within tables, this resulted in large HTML documents which use more bandwidth than documents with simpler formatting. With slower performance, the internet slowly begun to decline and the Web development industry shrank. Because of this, several UI development was carried out by coders with greater knowledge of good coding practice. It was around this time that many became critical of messy coding practices and the idea of table...

Why A Professional Logo Design is Valuable to a Small Business

Why A Professional Logo Design is Valuable to a Small Business Imagine doing business without your most important tool: a computer, your knowledge, your personal assistant, or the telephone. You sit, unable to work. Without that tool, your company's future success would be in danger. And the same is true of any company functioning without a professional logo design. Logos as Identification The importance of logos may be traced back to the industrial revolution. Images on crates and boxes helped differentiate between mass-produced goods. That's why you can tell Morton® Salt, for example, from other salt packages at a glance. And if you're going to advertise, don't bother—not until you have a professionally designed logo that will be instantly recognizable. You could do more harm than good. Logos for Professionalism Would you want to do business with unprofessional company? Neither would your clients. A custom logo can give a five-person service firm an air of professiona...

Online Logo Creation - Makes Perfect Sense!

There are several things which you need to take into consideration while designing a website. It's the designing of the website that plays a significant part when you are exactly trying to make a fine site that will not only attract more visitors but also drive more revenue for your business. When you are looking for some of the most important aspect of your website, you will surely come across the logo creation task that seems to be more important than the others involved in the whole assignment. Logo creation is a job that can make you feel always great about your business. Logo creation can always make you feel better about the announcement of online business, especially when you are trying to draw quick brand recognition. In order to create an effective logo for your website, you can hire professionals involved in this venture. But the charges from a professional seem to be high most of the time. At the same time it will take more time for creating the right kind of logo for yo...

What is XHTML ?

XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and more strict version of HTML 4.01. If you already know HTML then you need to give littel attention to learn this latest variant of HTML. XHTML stands for EXtensible HyperText Markup Language and is the next step in the evolution of the Internet. The XHTML 1.0 is the first document type in the XHTML family. XHTML was developed by the W3C to help web developers make the transition from HTML to XML. By migrating to XHTML today, web developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility. Developers who migrate their content to XHTML 1.0 will realize the following benefits: 1. XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools. 2. XHTML documents can be written to operate better than they did before in existing browsers as well as in new ...

Adding Video to Your Website

Before you add any video to your web page, it's important to understand that videos can take up a lot of web page space (file size) and bandwidth. Every time someone clicks to view the video they will be taking up some of your allocated bandwidth. Be sure to check with your web host if you're not sure how much you are provided. If you're paying a monthly fee for web hosting, you could exceed your limits and be charged an extra fee if enough people view your video file. Uploading the Video First you must upload/save your video to your web server. You may want to create a folder called "video" and save it there. So the path to your video will be something like http://yoursite.com/video/movie.avi. Embedding the Video One thing you should keep in mind is that every web browser treats videos differently. What may work in one browser, may not work in another. So you should use both old and new HTML embed tags. (<object> and <embed>). See the sample code...

Using Cascading Style Sheets to Create Your Website

Cascading style sheets is the newest and best way to develop a web site. The pages are built better they are easier to maintain and the all around experience is just greatly improved for both the developer and the end user. Of course with new technology must come new training. Hitting the books back at school may not be an option, especially if building a web site is not really business related but more of a past time activity. Take heart you can still learn the inside information that you need to know to make the best of this great knew way to design web pages. Cascading style sheets tutorial can easily get you on your way to using CSS layouts and templates. Where to Find the Tutorials The best place to find the tutorials for CSS is online. There are plenty of websites that offer this tutorial for free. Many of the websites that offer CSS layouts and templates will also offer the tutorials for proper use. In many cases if you are not a business and you will not be building your site f...

Mobile Web Design

Mobile web design involves the development of Internet-connected applications for viewing on a mobile device such as a smartphone or tablet PC that are connected to the Internet via a wireless network. This design today still suffers from usability and interoperability problems. Usability problems are difficult due to the small physical size of the mobile phone form factors. Interoperability issues arise from the platform fragmentation of mobile devices, mobile operating systems and mobile browsers. These are two of the toughest challenges when doing web design for the mobile web. Going forward, the distinction between the mobile web and native mobile applications is predicted to become increasingly blurred, as mobile browsers gain direct access to the hardware of mobile devices and the performance of browser-based applications improve. Persistent storage and access to sophisticated graphics user interface functions may further reduce the need for the development of platform-specific a...

Tableless Web Design

Tableless web design, also called tableless web layout, is a method of designing web pages without using HTML tables for page layout. Instead of using HTML tables, style sheet languages are used to arrange the different elements of text on a web page. One of the most common style sheet languages is Cascading Style Sheets, or CSS. W3C introduced CSS in December of 1996 in order to improve web accessibility and to also make HTML code semantic instead of presentational. HTML was originally designed as a semantic markup language that was intended for sharing research papers and documents online. As the internet became more mainstream, graphic designers looked for ways to control the visual appearance of the web pages that they designed. This caused a number of problems as tables were nested within tables that created really large HTML web pages. CSS was introduced to solve this problem. Tableless web design using CSS has a number of advantages over tabled web design. One of the advantages ...

Checking Web Design Changes in All Possible Browsers

I was looking at one local web designer's portfolio a while ago. I noticed that a lot of his websites looked fine in Firefox, but not in Internet Explorer. He was obviously testing only in that browser. Then suddenly the situation reversed as newer sites looked fine in Internet Explorer, but not Firefox. And there is also a local fancy dress shop who's website you must look at in Internet Explorer, because the images of the costumes do not show in Firefox. Seriously, and these examples are genuine, this is a major problem as many customers will just see the problems, fail to navigate the website and move on. What do we need to do? So what do you need to do? Well the answer is very simple. Install the latest versions of Internet Explorer, Firefox and Chrome onto your computer and check that the website works in all of them and make the necessary changes to get them displaying correctly. But, this is not enough. My own website statistics that I have accumulated from the visitors ...

Design Usability and Graphics Compression

The first thing that we should know about the two most popular Internet Browsers, Netscape Navigator and Internet Explorer, is that they don't display web pages in the same way. To make matters even more confusing, neither do PC or Mac computers display images the same way. In short, images created on a Mac appear much darker on a PC, and images created on a PC appear much lighter on a Mac. Pixel size differences (72 pixels per inch on a Mac and 96 pixels per inch on a PC at 640x480) make font sizes vastly different. So, there has got to be ways around these differences, right? Right.... To an extent. What we'll cover in this article are a couple of tips to make sure that your pages are displaying nicely regardless of the system or browser, and to help your pages download as quickly as possible no matter what they're being viewed on. Step One: Compress the Graphics Before we do anything else, we have to make sure that our graphics have been optimized for the web. Most graph...