Servage Magazine

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

Articles Tagged ‘design’

Beautiful color selection made easy

Tuesday, April 17th, 2018 by Servage
Have you ever been trying to figure out how to get the colors for your web project design to match each other? Or have you ever been stuck trying to find suitable colors for a website that should match an existing logo to integrate in the corporate identity? Color selection can be easy if you know exactly what you want, but mostly you are starting from scratch, maybe with an idea or preset main color. However, how do you define proper fitting colors to go along with the main color, to both fit the intended design and be aesthetic at the same time? Maybe you have heard of complementary colors? Being ...

Create a cool CSS-based tab-menu

Tuesday, April 10th, 2018 by Servage
We received a lot of great feedback for our CSS-based dropdown menu, so I thought it would be time for another little tutorial. This time showing 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> ...

Servage Web Development Course Part 3: Layout and page structure

Friday, February 23rd, 2018 by Servage
blogimageEvery website looks a little different, but somehow they all still contain similar elements. Like a menu, a content area, a top banner (called header) and a bottom (called footer). These can be arranged and displayed in varuous ways, but mostly they are all there - somehow. In HTML there is the <div> tag which is suited to define and seperate such areas from each other. Combined with CSS styling, these <div> containers, as they are often called, can even be positioned to match the layout you want on your website. So let's have a look at a sample <div> container structure (part3a.html of the project files): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

Servage Web Development Course Part 2: Content formatting

Friday, February 16th, 2018 by Servage
In this part you will learn how to format (style) web pages' main content, such as text, paragraphs, lists, images and links. The formatting will be done with CSS, which was introduced in the first part of the Servage Web Development Course. Just to recap: HTML (Hypertext Markup Language) is the language used for the content of your website. CSS (Cascaded Style Sheet) is the language used to describe the design of your content. It is important to remember that we strictly separate those two elements from each other. One of the main advantages of this, is that you can not only have different people working on content and design separately from each other, you can also ...

Looking at Bootstrap 4

Sunday, December 3rd, 2017 by Servage
Bootstrap4The development of the latest version of Bootstrap entered a beta stage this summer. Going from alpha to beta introduced some major changes, and now that Bootstrap 4 is in beta, there should no longer be many breaking changes. This gives us a good chance to look into the future and see what new is included in the latest version of most popular front-end CSS framework. The New Grid While the grid in Bootstrap is still divided into 12 columns, it now uses Flexbox by default. A new grid tier “xl” has also been added. This means you should use tiers one level higher than previously. For instance, col-md-4 in Bootstrap 3 is ...

What are progressive web apps

Thursday, November 2nd, 2017 by Servage
web-appThe term progressive web app (PWA) is a hot trend right now. It all started back in 2015 and quickly became popular due to the advantages it offers over traditional mobile applications. But what is a progressive web application? How does it differ from a typical mobile or web application? Let’s find out what the term PWA actually means and what makes an application a progressive web application. The Definition of Progressive In one sentence, a progressive web application is a website that looks and works like a mobile application. Modern HTML5 and CSS3 features allow developers to replicate many of the features native applications can do: storing data locally, using animations to ...

Free icons for web developers

Monday, June 19th, 2017 by Servage
iconsA website with no images would look quite dull, and making graphics from scratch can be a difficult task. Since not all developers are graphic designers, many free and paid icon sets and libraries have become popular among front-end developers. They allow you to easily place a large variety of icons on a website. Here is a collection of such icon libraries that are popular among developers in 2017. Glyphicons Glyphicons is an icon library that become popular with Bootstrap since it is built into the framework. Glyphicons has a special license that allows developers to use the Halflings icon set for free in their Bootstrap-powered websites. The Halflings set comes with over ...

Creating cool animated typing effects

Sunday, August 7th, 2016 by Servage
typerjsTyper.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 ...

Pros and cons of implementing autoplay videos in your design

Thursday, June 23rd, 2016 by Servage
videoplayerIf you are one of the people who like to stay up to date with current web design trends and popular features, you have probably noticed that more and more businesses tend to choose autoplay videos for their homepage or other pages. Even though they seemed kind of cool at first, you are still not sure if an autoplay video would be the right way to go for your business and you have a lot of questions about them. So what are the advantages of auto play videos and do they bring any real value to a business? What are the disadvantages of adding one to your website? Motion pictures are worth ...

Web design with Photoshop part 10/10 – Footer

Wednesday, May 11th, 2016 by Servage
photoshopThis is the last article which concludes the example template design, and here at the end you will learn how to add a footer-section to the PSD template. It will consume the remaining area of the canvas below the other content. Start by drawing a rectangular background with the help of the rectangle tool, filling the remaining space. Then select the line tool to draw a line with the dimensions of 940 by 1 pixel. Here the fill of the layer has been set to a darker color so it gives a nice contrast to the white background. Logo Open your logo in Photoshop and press ctrl and T to resize it to fit in ...