Servage Magazine

In order to get good conversion rates and positive user experiences, user interface design is vital. Let’s take a look at some practical ideas to do that. Single Column Layout The first consideration in user interface (UI) is the page layout. In our previous web era, we were free to try various options for layout and among them, multi-column approach was common, since we then wanted to use screen space at a maximum level. Now, with mobile web, we are restricted to single column layout since panning on hand held devices is not advisable, along with the scrolling involved. With finger gestures, a visitor feels a natural ease and fun in scrolling ...

The Web is no longer static. Nowadays, we need constant interactions online, which is provided through dynamism. Web forms are an integral part of web applications as well as several types of data driven websites. Creating web forms is a daunting task for an HTML web developer, since they tend to fiddle with style and cross-browser compatibility, particularly when consistency in look and feel is considered. Therefore, most of us try to implement new technologies like JavaScript libraries and various modern frameworks like jQueryUI and YUI to solve the rich functionality problems. Before HTML 5 Before, HTML 5 we had to place a bunch of JavaScript on the top of our pages, ...

Organizing Page Content Prior to HTML5, there was no way to group these bits into larger parts other than wrapping them in a generic division (div) element. HTML5 introduced new elements that give semantic meaning to sections of a typical web page or application, including sections (section), articles (article), navigation (nav), tangentially related content (aside), headers (header), and footers (footer). The new element names are based on a Google study that looked at the top 20 names given to generic division elements (code.google.com/webstats/2005-12/classes.html). Curiously, the spec lists the old address element as a section as well, so we’ll look at that one here too. The elements discussed in this section are well supported ...

We web designers fall under an artisan job category since part of our profession involves creative work using our own tools. Like a traditional craftsman, we have some project and time period and tools to accomplish our tasks. We have to select our own brushes, colors palettes and canvas. We have limited disk space and CPU power, as they have to carry their tools in a bag and go outside to work with limited resources and choices. We Need Selected Tools Like traditional craftsmen, we also have to choose our tools carefully. Our tools enable us to perform our work freely and according to our style and likeness. They must be powerful ...

The Font Properties When I design a text document (for print or the Web), one of the first things I do is specify a font. In CSS, fonts are specified using a little bundle of font related properties for typeface, size, weight, and font style. Here are some important syntax requirements: All font names, with the exception of generic font families, must be capitalized. For example, use “Arial” instead of “arial”. Use commas to separate multiple font names, as shown in the second and third examples. Font names that contain a character space must appear within quotation marks. Specifying font size Use the aptly named font-size property to specify the size of the text. You can specify text ...

This chapter introduces the elements you have to choose from for marking up text content. There probably aren’t as many of them as you might think, and really just a handful that you’ll use with regularity. A semantically marked up document ensures your content is available and accessible in the widest range of browsing environments, from desktop computers and mobile devices to assistive screen readers. It also allows non-human readers, such as search engine indexing programs, to correctly parse your content and make decisions about the relative importance of elements on the page. With these principles in mind, it is time to meet the HTML text elements, starting with the most ...

We web designers are living in a flowing river of time, where everything is changing, including the technologies. Before 2007, we were living in a pure web era, where mobile had no traces. But today, a new generation is mobile savvy and the world wide web itself has shifted noticeably to mobile. If you want to remain contemporary, you should accept this hard truth and reflect it in your work. If your client is not aware of this phenomenon, it is your duty to tell them and convince them to be mobile first in their endeavors. This is their future, as well as yours. If you don’t wish to jump on ...

Have you ever noticed that a link is often one color when you click on it and another color when you go back to that page? That’s because, behind the scenes, your browser is keeping track of which links have been clicked (or “visited,” to use the lingo). The browser keeps track of other states too, such as whether the user’s cursor is over an element (hover state), whether an element is the first of its type, the first or last child of its parent, and whether a form element has been checked or disabled, just to name a few. In CSS, you can apply styles to elements in these states ...

If you had seen the Web back in 1993, you would have found it to be a fairly dreary affair by today’s standards—every background was gray, and all the text was black. Then came Netscape Navigator and, with it, a handful of attributes that allowed rudimentary control over font colors and backgrounds. For years, we made do. But thankfully, we now have style sheet properties that have laid those unmentionable presentational attributes to rest. Specifying Color Values There are two main ways to specify colors in style sheets: with a predefined color name, as we have been doing so far: color: red; ...

A web page with all text and no pictures isn’t much fun. The Web’s explosion into mass popularity was due in part to the fact that there were images on the page. Before images, the Internet was a text-only tundra. First, a Word on Image Formats In order to be displayed inline, images must be in the GIF, JPEG, or PNG file format. In addition to being in an appropriate format, image files need to be named with the proper suffixes—.gif, .jpg (or .jpeg), and .png, respectively—in order to be recognized by the browser. If you have a source image that is in another popular format, such as TIFF, BMP, or EPS, you’ll ...