Servage Magazine

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

Articles Tagged ‘design’

Enrich your WordPress site with a modern theme

Tuesday, October 9th, 2018 by Servage
Wordpress-ResponsiveHave 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 ...

Cheap and professional WordPress themes

Tuesday, October 2nd, 2018 by Servage
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 ...

Create nicer looking forms with CSS

Monday, May 28th, 2018 by Servage
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 ...

Blueprint CSS Framework makes CSS styling easy

Monday, May 21st, 2018 by Servage
The last post about nicer forms introduced some simple CSS tricks to get nice looking forms. It also mentioned the Blueprint CSS framework, which is pretty nice. Blueprint is basically just a set of stylesheets (.css files) that you can include in your website to get certain default design and layout functionality. Why is this great? You often want to do similar things with your web projects in terms of design. Blueprint offers help with exactly that. It makes your standard pages look good, and gives you a great starting point for further customization. It's much better than using the various browsers' own default styling. The features CSS reset of styles to ...

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