Presentation level in website design

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

The permissive side does not contain only one type of code, but includes different ones. First of all, it is HTML code that creates the basis for embedding CSS (Cascading Style Sheets) or programming languages ​​such as PHP. In other words, HTML is used to structure the content on a page, while CSS allows you to process your website content and style separately from it, and programming languages ​​transmit instructions to the computer.

HTML itself does not support effects such as dropdown menus or carousels. There is code specifically for the user interface, while other code is used to process the data and connect to the database. The “presentation layer” refers to the graphical interface as well as the code that supports it, including the code that controls interactive elements such as drop-down menus.

Presentation code includes:

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

Usually, all of these languages ​​are skillfully woven together to create a visually appealing and highly functional website design.

one. Creating a multimedia interface

Animated and immersive designs are achieved through the use of either Adobe Flash or a mix of HTML, CSS, and other scripting languages ​​mixed together.

For many years, Adobe Flash led the way, but that began to change. Nowadays, with the development of HTML 5 and CSS, we can reproduce most of the interactive and animation effects.

HTML 5, the latest revision of HTML, has taken a huge step forward in terms of presentation tier design capabilities. It provides an improved set of elements and properties and addresses the way designers work and how they are used. For example, it allows designers to define a navigation group with a new “nav” instead of the previously used “div” element. The animation and interactive design support features in HTML5 have also improved dramatically, and the fact that HTML5 is supported in mobile browsers such as Apple’s Safari has opened up the possibilities for web design.

A few words about Adobe Flash

Flash is an animation and interactive technology that allows you to create a highly immersive interface. When it comes to embedding a Flash element into a website design, the process is quite simple. A component developed in Adobe Flash is exported as a separate .swf file, and just like an image, a .swf file is embedded in an HTML page. The .swf file can be either a small part of the page, or literally the entire interface. It should be noted that the Flash player must be installed in the browser to view the page containing the .swf component.

While it can create an impressive user experience, there are some drawbacks to using Flash. Most notably, Apple’s mobile platform simply doesn’t support Flash files. Therefore, a website built in Flash should offer an alternative version of the site for mobile viewers (Apple) (of course, only if the market is important enough for them). Prompting the user to download the latest Flash player on the iPhone has nothing to do with the button, because even if they downloaded Flash, the site would still be unavailable.

HTML5 – Alternative to Flash

As mentioned earlier, the combination of HTML 5, CSS, and jQuery now allows for the rendering of animated websites that were only possible in Flash. Using the canvas element is now much easier than ever to create a rich and animated user interface. Most modern desktop and mobile browsers support the HTML5 standard, which allows you to create designs that work on multiple platforms.

1.1 DHTML, JavaScript, jQuery and Ajax

Keep in mind that HTML simply forms the structure of the content. Intertwined with this framework are scripting languages ​​such as JavaScript, Ajax, and jQuery that control the behavior of user interface elements and the content displayed on the page.

JavaScript is a dynamic scripting language capable of creating complex animation and interaction effects, such as creating a dropdown menu or expanding window layer. It allows you to interact with the user, control the browser, and change the displayed content of a web page. When JavaScript is embedded in HTML, that HTML is called “DHTML”. Dynamic HTML (DHTML) lets you create interesting interactive components and animations.

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

Examples of jQuery effects:

  • Unfolding and minimizing by windows
  • Rotate the carousel image
  • Zoom in on hover, etc.

Ajax (Asynchronous JavaScript and XML) allows you to process data, such as sending or receiving data, in the background (asynchronously) without interfering with the display or behavior of the web page. Therefore, reloading the page or clicking the refresh button is not required and the data on the page can be refreshed / refreshed automatically.

1.2 Advanced CSS graphic effects

Previously, we used bitmap graphics such as jpeg or gif to create a graphic element such as a button. Not only do they increase web page load times, but they also have to be created by designers who are familiar with software like Photoshop, and then need to be manually changed every time you want to change the look of the site.

Currently, CSS offers more and more stylistic control over the appearance of elements. You can now add gradations, rounded corners, reflections, and soft shadows to text and elements simply with code.

There are quite a few useful CSS graphical style controls that we can implement to avoid using bitmap graphics when creating a user interface.

Benefits of using CSS for our user interface:

  • Faster loading – CSS code is written only once and can be applied as a style to any graphic or text element;
  • Scalable Design – CSS code allows you to apply scalable attributes to fonts and elements;
  • Ease of maintenance – to change the size, color and visuals of a button, text or design element, we simply change the values ​​in the CSS code, and this change will be applied to all elements assigned a specific style. ;
  • Accessibility – In CSS, we use actual text for our buttons and interface elements, and they are labeled and identified in a way that screen readers can digest and translate for users who rely on such devices.

1.3 Adaptive design

The most recent trend in website design is “responsive design”. It is an approach to building websites in a way that provides the best browsing experience, readability, and navigation across a wide range of devices. When the user resizes their browser window, the web page is immediately refreshed to optimally reflect the “viewing port” size. Viewport is a new term that designers are using to refer not only to the different sizes of desktop browsers, but also mobile devices, which all have different fixed screen sizes.

Responsive design is possible thanks to the “media queries” part of the CSS3 specification. It recognizes the size of the browser and tells the page to load the appropriate stylesheet, such as widescreen.css or mobilescreen.css. This is possible because different style sheets contain different layout systems, font sizes, and image optimization settings.

Last but not least, it is about creating creative ideas for the user interface. There are many ideas for inspiration on the internet. It would be a good idea to review the best design practices, break them down into key elements, and see how some of them can be adapted for our own application.

Leave a Comment

Your email address will not be published.