As we all know, there are always two sides to the design of every website. The visual side that all users see with all the graphic elements, buttons, images and the side behind, which is the code that is responsible for the functionality of the website. How to achieve balance?

The enablement side does not contain just one type of code, it spans different ones. First of all, it is the HTML code, which creates a framework in which to embed CSS (Cascading Style Sheets) or programming languages ​​like PHP. In other words, HTML is used to structure the content of the page, while CSS allows you to treat your website content and its style separately and programming languages ​​communicate instructions to the computer.

HTML itself does not power effects like drop-down menus or carousels. There is some code that is expressly dedicated to the user interface, while other code is used to process data and connect to the database. The ‘presentation layer’ refers to the graphical interface, as well as the code that powers it, including the code that controls interactive elements, such as drop-down menus.

The submission code includes:

• HTML and HTML 5
• CSS
• Scripting languages ​​like JavaScript, jQuery, and Ajax.

Usually all of those languages ​​are cleverly intertwined to create a visually appealing and highly functional website design.

1. Creating multimedia interface

Animated and immersive design is achieved by using Adobe Flash or a combination of HTML, CSS, and other mixed scripting languages.

For many years, Adobe Flash led the way, but it started to change. Today, with the development of HTML 5 and CSS, we can increasingly replicate many of the interactive and animation effects.

HTML 5, the latest edition of HTML, has taken a big step forward in terms of presentation layer design capabilities. Provides an improved toolset of elements and properties and recognizes the way designers work and use particular elements. For example, it allows designers to define a navigation group with the new ‘nav’ instead of the previously used ‘div’ element. The animation and interaction design support features of HTML5 have also been impressively improved, and the fact that HTML5 is compatible with mobile browsers like Apple’s Safari has opened up the possibilities of web design.

A few words about Adobe Flash

Flash is an interactive and animation technology that allows you to create a very immersive interface. As for the implementation of the Flash element in website design, the process is quite simple. The component developed in Adobe Flash is exported as a standalone .swf file and in exactly the same way as an image, the .swf file is embedded within an HTML page. The .swf file can be a small part of the page or it can literally be the entire interface. It should be noted that users must have Flash Player installed in their browser in order to view a page with a .swf component.

Despite the ability to create an impressive user experience, using Flash has some downsides. The most significant is the fact that Apple’s mobile platform simply does not support Flash files. Therefore, the website created in Flash should offer an alternative version of the site for mobile viewers (from Apple) (of course, only if the market is important enough for them). The invitation for the user to download the latest version of the Flash player on the iPhone is an irrelevant button, as even if they were to download Flash, the site would still not be accessible.

HTML5: Alternative Flash

As mentioned above, the combination of HTML 5, CSS, and jQuery code now makes it possible to render animated websites that were only possible in Flash. Using the ‘canvas’ element it is now much easier than ever to design a rich and animated user interface. Most desktop and mobile browsers support the HTML5 standard, making it possible to create a layout that works on a multitude of platforms.

1.1 DHTML, JavaScript, jQuery and Ajax

Note that HTML only forms a structure for a content. Scripting languages ​​such as JavaScript, Ajax, and jQuery, which control the behavior of user interface elements and the content displayed on a page, are built into that structure.

Javascript is a dynamic scripting language that is capable of complex animation and interaction effects, such as creating a drop-down menu or expanding window layer. It allows interacting with the user, controlling the browser and altering the content of the web page that is displayed. When JavaScript is implemented in HTML, the HTML is called ‘DHTML’. Dynamic HTML (DHTML) allows you to create interesting interactive components and animations.

jQuery is a simplified form of JavaScript that focuses on the commonly used interactions between JavaScript and HTML. It is designed to make it easier to navigate a web page. jQuery is free open source software and is available online. You can copy and paste ready-made scripts into your web pages and customize them to serve your purposes. With jQuery, you can create animation and interaction design effects with much less code than would be required with JavaScript.

Examples of jQuery effects:

• Expanding and collapsing according to the windows.
• Carousel Image Rotation
• Image zoom when hovering, etc.

Ajax (Asynchronous JavaScript and XML) allows data processing, such as sending or retrieving data, to take place in the background (asynchronously) without interfering with the display or behavior of the web page. Therefore, there is no need to reload the page or click a “refresh” button and the data on the page can be automatically updated / refreshed.

1.2 Advanced CSS graphic effects

In the past, to create a graphic element, for example a button, we used to rely on bitmap graphics such as jpeg or gif. Not only do they increase the loading time of the web page, but they also need to be created by designers familiar with software like Photoshop, and then they need to be changed by hand each time you want to change the look of the site.

Today, CSS offers increasing levels of stylistic control over the appearance of elements. It is now possible to add gradations, rounded corners, reflections, and soft shadows to text and elements simply through code.

There are quite a few useful CSS graphical style controls that we can implement to avoid the use of bitmap graphics in the construction of the user interface.

The advantages of using CSS for our user interface include:

• Faster download times – CSS code is written only once and can be styled on any text or graphic element;
• Scalable layout – CSS code allows you to apply scalable attributes to fonts and elements;
• Easy maintenance: to change the size, color and visual effects of a button, text or design element, we simply change the values ​​in the CSS code and the change will be applied to all the elements assigned to the particular style. ;
• Accessibility: In CSS we use real text for our buttons and interface elements, and these are labeled and identified in a way that screen readers can digest and translate for users who depend on those devices.

1.3 Responsive design

The newest trend in website design is “responsive design.” It is an approach aimed at creating websites in a way that provides an optimal viewing experience, easy to read and navigate on a wide range of devices. When the user resizes their browser window, the web page is immediately updated to optimally display in the ‘display port’ size. View port is a new term that designers use to refer not only to different sizes of desktop browsers, but also to mobile devices that have different fixed screen sizes.

Responsive layout is made possible by the media query portion of the CSS3 specification. It recognizes the size of the browser and tells the page to load the appropriate stylesheet, for example ‘widescreen.css’ or ‘mobilescreen.css’. It is possible because different style sheets contain different layout systems, font sizes, and image optimization settings.

Last but not least is getting creative ideas for the user interface. There are many inspirations online. It is recommended to analyze good design practices, break them down into essentials and see how some of them can be adapted for application in our own field.