Servage Magazine

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

Chronological article list (Blog View)

Blog View vs. Front PageThis page lists all articles by date (blog-like) and is therefore a good alternative to the front page that sorts pages by popularity. If you prefer chronological listing of the newest articles you should use this page.

Intelligent and super simple HTML5 slider

Saturday, December 8th, 2018 by Servage
super-simple-sliderAs it says on the official Super Simple Slider website, there are already many sliders out there. However, there is something special about Super Simple Slider. As the name suggests, it is super simple to set up and it supports all types of content from images to divs and text. It also includes other useful features that we are going to describe in this article. Installation part one: Downloading the required files To add the slider to your website, you should first go to the official www.supersimpleslider.com website and download the files to your project folder. There are three files and one folder you need: An images folder, jQuery, a stylesheet file and ...

Introduction to HTML5 canvas element

Saturday, December 1st, 2018 by Servage
html5-canvasThe <canvas> element is probably the greatest addition to HTML5. This new element can be used to create anything from a single-color box to complex shapes and charts. We will take a look at how to build some simple shapes with the <canvas> element and learn what can be achieved with more advanced use of the element. What is an HTML5 canvas? In simple terms, a canvas is a <div> inside which you can render graphics. Those graphics can be simple shapes such as circles and boxes, or more complex graphics like charts and even animations. A canvas can be created with the <canvas> tag. This might come as a surprise, but drawing to ...

Use pre-made CSS animations with Animate.css

Sunday, November 25th, 2018 by Servage
animate-cssAnimate.css is a CSS library that allows you to animate elements on a web page. It is very easy to set up and provides dozens of premade animations for you to use, such as bouncing, sliding and fading animations. Another great thing about Animate.css is that it does not use any JavaScript for animations. Everything is done with CSS in a single file. Setting Up Animate.css As promised above, setting up Animate.css is simple. You only need to include one CSS file that you can find on the official website: https://daneden.github.io/animate.css. Click the download link, save the file and include it in your HTML file using a <link> tag. Here is an example: ...

Build an interactive feedback form with Javascript

Sunday, November 18th, 2018 by Servage
javascript-codeListening to feedback of users is important. The tool we are going to explore this time is not a typical feedback form. Instead, it allows visitors to give feedback interactively. Users can highlight areas or elements on a web page they need help with, write a comment to describe their issue or question, black out sensitive information and finally, send the feedback or support request. Initial Setup and Requirements We will achieve the above features with a tool called Feedback tool by a GitHub user JoeyAndres. This tool was previously abandoned but JoeyAndres forked the project to create a maintained version, so thank him for being able to use it. The Feedback tool depends ...

What is object-oriented CSS?

Sunday, November 11th, 2018 by Servage
css3Object-oriented programming is a common practice in many programming languages. It helps you with the DRY principle (don’t repeat yourself) by allowing you to repeatedly use code from a single code base. How would applying the paradigm work with something other than a programming language, like CSS? Let’s find out how CSS can be written in the same way and what are the benefits of doing so. The Two Principles of OOCSS Object-oriented CSS (OOCSS) is built upon two main principles. Firstly, content should be separated from containers. If content and its container are not tied to each other too closely, it allows you to reuse the containers for different types of content ...

Build A Toolkit To Help Define Your Web Design Style

Sunday, November 4th, 2018 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 ...

Brand style-guide for your design process

Tuesday, October 30th, 2018 by Servage
brand-style-guideThere 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 ...

Migration & actions required from customer end

Sunday, October 28th, 2018 by Helge
As informed, we are in the middle of moving our customers to our brandnew platform. The new platform comes with a new control panel with plenty of new features like e.g. SSH access, back up options and much more. Also, the hardware is brand new and meets highest requirements.  Manywiki customers are already moved, the other ones will follow within the next weeks. How does the migration work? In the beginning of the migration, you will get a first mail. When the migration is finished, you get a second one. In both e-mails, you will find important info about the new system. Also, some actions are required from your end to make ...

Conditional stylesheets with CSS3 media queries

Tuesday, October 23rd, 2018 by Servage
css-media-queriesMedia queries is a powerful feature used to selectively apply CSS styles to a document based on certain conditions. The most common conditions are screen height and width, and these conditions are often used to create responsive websites. These days, it is crucial to understand how media queries work to create modern websites. The @media rule A media query is created by using the @media rule inside a regular CSS style sheet. @media is followed by the rules that apply to the media query. If these requirements are met, all styles inside the media query will be applied to the web page. Here is an example of what a media query can look ...

Great WordPress plugins enrich your site

Tuesday, October 16th, 2018 by Servage
wordpress-pluginThe Wordpress content management platform is one of the most popular and most widely adopted systems among web publishers. The users include everyone from amateur hobby site owners to professional publishing magazines. The Wordpress system provides the foundation for a really great website, suiting almost any need you might have. One of the great advantages of Wordpress is the easy and straightforward scalability of features through plugins. You can easily extend the core Wordpress functionality even as a novice user, and this is really convenient. Rarely the basic Wordpress system fulfills all of your needs, so using plugins is something you will likely need some time. This post has aggregated a few ...

Recent articles

Enrich your WordPress site with a modern theme

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

Cheap and professional WordPress themes

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

Manage your business from one single place

There are many business management, collaboration, communication and CRM apps out there, with more or less functionality. But what really makes a good one stand out from the crowd? It's depending a lot on your needs, but certainly Skylight is a very interesting player in the field. It offers a wide range of functionality to improve the work processes in your organization. ...

Manage your web development more efficiently

Web development goes though many stages. It all starts with a great idea or vision that turns into a real concept, the base for your application and business. Often multiple persons are involved in the project, it takes a team effort to be successful. And being successful is what it's all about, since no one can feed himself from great ideas alone. So how do you ensure success from the beginning? You can't! But what you definitely can do, is improve the odds. You can surround yourself and your project with skilled and ten-oriented people, you can use professional management tools, and much more. Another thing that you definitely can do, is to use a great tool to organize your collaborative effort, to streamline development and make sure everyone is pulling in the same direction.

Validate your code for a better web

The problem isn't new, but it's still present. Standards and best practices have not just been invented for fun, or mere entertainment for nerds. They actually fulfill rather important purposes. Without standards and best practices, we wouldn't know how we should do things. Without compliance to the defined rules there would be chaos. Or actually, there is chaos... Because the standards and best practices for the web are not being ...