Monday 2 June 2014

5 free and useful resources for web design

Responsive Web Design

GMC Solution has always advocated transparency in everything we do, sharing knowledge to build a free and supportive network. Those who follow our activities more closely will have noticed that we have recently made ​​a major remodeling our website, integrating a responsive design with high doses of dynamism. Being true to our philosophy, we decided to share some of the "secrets" that lie behind the operation of the website. Some Basic Tips for the Web Designers:

Responsive Web Design: The term responsive is taken directly from English, refers to pages that adapt to different resolutions and screen types. The simplest version of this concept would be a layout that takes up 100% of the screen. In more elaborate projects, different CSS styles are applied depending on the screen width and type of device. The code tells the browser which stylesheet to use is included in the label head:

<link rel="stylesheet" href="css/screen.css" media="only handheld and (min-width: 800px) and (max-width: 1023px), only screen and (min-width: 800px) and (max-width: 1023px)"/>

Handheld indicates a mobile device while screen refers to desktops and laptops. Labels min-width and max-width report the minimum and maximum dimensions from which the sheet designated styles will be used.

Parallax Effect: The parallax effect is a current trend in the web design, and refers to animations that are playing as the user "scroll" vertical on the website.

There are numerous options to achieve this effect, from prefabricated WordPress templates to complex programming in JavaScript. In our case we have chosen to use a resource called Skrollr interesting.

Skrollr is a JavaScript library developed specifically to represent different effects of parallax. It is open source and free, and it can be downloaded from their website. The use of this library requires virtually no knowledge of JavaScript.

Animated boxes: As in the previous case, for the integration of animated boxes we have chosen to use a free open-source solution. With a bit of CSS and jQuery library design can achieve that effect with so attractive that our animations appear anywhere.

Inclusion of RSS: The RSS feeds are must today to unveil the contents of any blog tool. These short excerpts of publications spread quickly through the web, exponentially increasing the natural range of your posts.

We wanted to include our latest publications within the website. To achieve this goal there are several options available online. We would recommend you Feed2JS a very reliable solution open source that does not include any advertising message or "diverted" the information of your website. Its use is very simple, its on-line application generates JavaScript code necessary, and only need to adapt the CSS styles to suit the aesthetics of your website.

Tracking without cookies: Like any other website, we have close monitoring of our visitors. Not only how many visitors we receive, but also their country of origin, use of links, operating system ... we is essential to analyze our business and find areas for improvement information.

The dominant solution on the market is Google Analytics. However, we opted to use a free and open source alternative called code Piwik for several reasons:
  1. It is always free. Other solutions are free only until a certain level of hits is reached. Piwik is maintained financially by voluntary donations.
  2. It is open source, and not diverted your information to their servers. Data collected through GA pass through their servers, which process information before sending. Piwik is a solution that is installed on your server, and data not diverted anywhere else.
As we mentioned at the beginning, this post is not intended to be a tutorial, but rather a guide to some of the tools we've found along the development of our own page. There are plenty of free and open resources for web design. The hard part sometimes is to know where to start.

1 comment: