Servage Magazine

This time we show how to create a nice-looking tab-menu, based purely on HTML and CSS. See a live tabmenu example here. First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-) <ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> <li><a href="">Contact</a></li> <li><a href="">Login</a></li> </ul> So far this is somewhat similar to the dropdown menu, except we don’t have sub-items. This tab-menu and the dropdown ...

Typer.js is a JavaScript library that allows you to create animated typing effects for any kind of text. Animated typing is often found on product landing pages to impress visitors with features of a product. In addition to a nice visual experience, libraries like Typer.js allow you to have many sentences that erase the previous one, resulting in less screen space required for text. Getting started Setting up Typer.js on your website is simple: Just download the JavaScript file from www.steven.codes/typejs and include it on your website using a <script> tag and you are ready to go! Unlike many other JavaScript libraries, Typer.js does not depend on jQuery or any other libraries. It ...

When building a website today there is almost no question about if it should be made responsive or not. It makes sense to adapt websites to the device they are being used on, and thereby improve the user’s experience significantly. However, as soon as you begin discussing how you want to adapt the site to different devices and how that responsiveness should actually be implemented, then you run into some general decisions you need to make. Now, responsive and adaptable are different things. It is important to understand the difference because it makes you able to consciously choose the method that is best for your given scenario. Note that responsive and adaptable are ...

In the last blog, we gave you a general overview about our websitebuilder. In this blog, we like to explain some features of that tool more detailed. However, in case of questions or remarks, you are of course always welcome to contact our support via ticket or live chat. Start using the sitebuilder with installing it on one of your host. The guideline for that, can be found HERE. As soon as the installation is complete go to "Domains and Websites" -> "Sidebuilder" to find the "Admin" button. Push that button to enter the editor. In the design step you can adjust your template by selecting colors and fonts to ...

Transform Values: transform function(s) | none Default: none Applies to: transformable elements (see sidebar) Inherits: no This article focuses on the more straightforward 2-D varieties because they have more practical uses. Transforms are supported on all major browser versions with vendor prefixes. They are not supported at all on IE8 and earlier, Firefox 3 and earlier, and Opera 10.1 and earlier. You can apply a transform to the normal state of an element and it will appear in its transformed state when the page loads. Just be sure that the page is still usable on browsers that don’t support transforms. It is common to pull out the transforms only when users interact with the element via a ...

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

There are pros and cons of a brand style guide and controversies over making it public or keeping it internal. It fulfills the purpose of simplifying and generalizing your web design processes to provide the same recognizable look and feel across your products on all devices. Branding in the mobile era has become a more intricate process, and the complexities for designers in branding are likely to increase even further with the technological advancements in media. Therefore the involvement of more than one designer in branding is a common scenario. Expectations of collaborative environments, organization and management of entire branding processes become the need of the moment in many design and marketing companies. If you are a ...

Have you ever wondered how you can get started with an own website in a quick and easy way? Or maybe you already have a website and wish to have a better, less time-consuming, and more easily changeable system? Over time Wordpress has evolved to a super stable and super versatile platform. Used by millions to power their blogs, websites and even complex apps, Wordpress has great capabilities today which make many of the traditional custom web development work obsolete for smaller projects. You can literally drag and drop websites together using systems like Wordpress - and the right themes. The latter is where you can greatly set your work apart from ...

Previous articles have covered a variety of sources for good Wordpress themes. One of the main problems is that often the good stuff costs money ;-) Like everything else, no one can afford to work for free, and good stuff deserves a reasonable price. Nevertheless lots of people are working with hobby-projects on the side. They just want a quick and nice solution. While there are various systems available open-source, like the vast amount of content management systems out there - the good design stuff is yet to be more publicly available. Elegant Themes has a membership-approach to sharing professional Wordpress themes among a large audience. By signing up ...

Forms are one of the commonly used elements in HTML. It's a basic functionality for most websites to capture specific information via user input through HTML forms. So why do so many forms look really boring? Why are businesses still missing out on new customers because of unappealing order forms? It's amazing what you can accomplish with form design. It looks good, gives a serious impression, and attracts users. Examples The images illustrating this article are two examples of beautiful order forms I've found online. They are integrated with the rest of the website design, they have a simple layout, there isn't too much data to be added. Users are unlikely ...