Revamp of a site: the restyle of the graphic design

The revamp of a website allows you to renew the graphics while keeping the contents and functions offered to visitors unaltered. In addition to the immediately obvious benefits deriving from a restyle, such as a new more modern graphic interface, other positive aspects of this approach should not be underestimated.

A PRACTICAL CASE: POINT-BY-POINT REVAMP

Starting from a website with proprietary CMS, developed in 2006 with HTML4 technology and Flash navigation menu, let’s see the changes made up to the new product.

1: COMPATIBILITY

The original site was developed and optimized to be used by PC, and made use of Flash technology for the navigation menu, located on the left of the screen. In a modern panorama, in January 2014 we can observe how the percentage of consultation of websites via PC dropped to 72%, offset by an increase in the use of mobile devices, which reaches 28% (respectively 22% for smartphones, and 6% per tablet) [source: statcounter.com]. This leads us to foresee in the restyle of a site the use of a responsive system, that is capable of automatically adapting to the size of the display of the device used, without penalizing the accessibility of the contents.

Another important point is the Flash technology: used in the original site for the animation of the navigation menu, this technology is however almost no longer implemented in the browsers of mobile devices. Furthermore, thanks to the new HTML5 + CSS3 standards, it is no longer necessary to use Flash to obtain complex animation effects. Therefore in the restyle phase it is good to analyze if the need to use Flash is real or if this can be replaced, in order to obtain a product that can also be used by mobile devices.

2: NAVIGATION

On the original site, navigation was via a vertical menu displayed on the left side of the screens. The modern web design trend, on the other hand, more widely involves the use of a horizontal navbar placed at the top. The first advantage of this solution is to not lose space for the contents, which are displayed under the navbar using the entire horizontal dimension of the display. In addition, most modern navbars automatically adapt to the size of the display, showing a reduced menu, which can be expanded by pressing a button, so as not to occupy all the space of the smaller display, allowing content to have priority over navigation . When necessary, it is possible to “fix” the navbar, so that it is always visible, while the contents are scrolled,

3: MORE MODERN ELEMENTS

HTML5, CSS3 and jQuery offer very powerful and flexible tools to integrate sophisticated and usable components into their pages, to better attract the navigator’s attention, without these being difficult to use.

One of these elements is the so-called “carousel”, or an area of ​​the site with automatic scrolling, often accompanied by side lees to scroll to the previous / next slide, and optionally a small reference to the individual slides present. This element can be automated so that it automatically scrolls at predetermined intervals, adding dynamism to the visual result, and allowing you to show much more information to the navigator without having to proceed with navigation.

 

Another very common element is the “modal” (see the article Popup Lightbox and Modal window with JQuery ), that is an additional window that opens above the page content, partially obscured by a semitransparent “curtain”. Modal windows are very useful, for example, to show additional information to the navigator, without the need to open pop-up windows (increasingly blocked by web browsers). Once his task is finished, the modal can be hidden, and the use of the contents / functions of the site resumes from the point where the modal was opened. The modal windows can be used, for example, to show the navigator the terms of the contract and the privacy policies used by the site at the time of registration.

  1. modern elements: modal windows, so as not to leave the current page and show more content

Another application of the modal is to show the enlarged version of the images of a product, without the need for them to be opened in secondary windows, or that it is necessary to press the back button once the consultation of the single images is finished. In combination with jQuery it is also possible to create a “slideshow” of the individual images, which on PC can be “cycled” automatically or by clicking on left / right arrows, or on touch-sensitive devices, they can be directly dragged to scroll.

4: SOCIAL NETWORKS

The web nowadays is populated by a very nourished series of social networks, which allow users to publish their preferences, accompanied by any kind of comments or appreciation. In the restyle phase of a site, it is therefore also essential to analyze the needs for integration with the most popular social networks. Generally you can start with a basic integration, that is, provide one or more buttons that allow users to express their appreciation of the page, or to share it on their profile. This first type of integration is the simplest, and usually requires that the social media involved are Facebook, Twitter and Google+.

Should an even deeper need for integration emerge, it is possible to integrate within the new version of the site comments from the platforms just mentioned, and refer, for example, to products or articles on the site.

IN SUMMARY: ASPECTS TO BE EVALUATED IN THE RESTYLE OF A WEBSITE

–          Compatibility with as many devices as possible, without having to have different versions of the site. Therefore, use a platform that includes responsive web design

–          Smart navigation: more space for content, without however leaving the user without the possibility of accessing the navigation menu. The back button of the WEB browser is present and used mainly on PCs, while on portable devices it is not said that it is always accessible or comfortable to use.

–          Modern elements: they attract the attention of the navigator, and give an attractive look to the new site.

–          Social networks: they exist and are widely used. They represent an opportunity, but it is necessary to establish case by case how important and deep the integration with the new site is.