Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Archive for August, 2013

Heading towards a better UI design

Saturday, August 31st, 2013 by Servage
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 ...

Easier form-markup with HTML5

Wednesday, August 28th, 2013 by Servage
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 your HTML code

Saturday, August 24th, 2013 by Servage
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 ...

How to add links in HTML

Wednesday, August 21st, 2013 by Servage
If you’re creating a page for the Web, chances are you’ll want it to point to other web pages and resources, whether on your own site or someone else’s. Linking, after all, is what the Web is all about. There is one element that makes linking possible: the anchor (a). <a>...</a> Anchor element (hypertext link) To make a selection of text a link, simply wrap it in opening and closing <a>...</a> tags and use the href attribute to provide the URL of the target page. The content of the anchor element becomes the hypertext link. Here is an example that creates a link to the Google website: <a href="http://www.google.com">Go to Google Home Page</a> Linking to Pages ...

Build a toolkit to support your development

Monday, August 19th, 2013 by Servage
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 ...

Text-formatting in CSS

Saturday, August 17th, 2013 by Servage
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 ...

How to create a simple page in HTML

Wednesday, August 14th, 2013 by Servage
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 ...

Common mobile web problems

Monday, August 12th, 2013 by Servage
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 ...

CSS pseudo class and attribute selectors

Sunday, August 11th, 2013 by Servage
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 ...

Using colors with CSS

Friday, August 9th, 2013 by Servage
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; ...