Tags: Web Design

Web Design

Here we explain what responsive design is, we present its evolution and we focus on responsive design.

Web design is about creating web interfaces and not just about the graphical design of the user interface. Web design requires technical skills (programming), visual and graphic creativity.

Web design is no longer limited to creating a simple HTML/CSS Web site.

Web design takes more orientation towards web programming and more and more sites contain Web applications (to register members or customers, to charge, etc.).

This requires web designers to have programming skills (in JavaScript and possibly other languages)

Web Design

Evolution of Web Design

A few years ago, to create a website it took little time to learn the basics of HTML and create our first web page with a simple text editor. It was also fast enough to create a page template with a certain style and add new pages to the site. To produce some effects, we could possibly add some scripts in JavaScript, to scroll text, to show a luminous trail behind the mouse and so on.

The CSS language began to emerge and the DHTML (in JavaScript) and Flash Player objects appeared.

But internet browsers had very different implementations of HTML/CSS and JavaScript, which made it difficult for Web designers. It was difficult to create a website that looked the same in all browsers. Some software like Adobe Dreamweaver, Microsoft FrontPage could simplify the development of a website from a visual creation.

But the birth of mobile phones has complicated Web design because their browsers are not able to correctly display the pages of websites designed so far for desktop computers. Web sites were often designed for 960-pixel screen widths.

To adapt websites to mobiles, some created a mobile version of their site and detected the features of the device to redirect to the corresponding page.

New problems occurred with the introduction of tablets and devices with small screens.

Several techniques appeared: the adaptive design then the responsive design.

Adaptive design consists of detecting the user's device type (smartphone, tablet or desktop computer) and generating the content (HTML/CSS and JavaScript code) specific to the support. This strategy best matches the needs of the user but requires more page design work and is quite expensive in terms of content maintenance.

The responsive design that uses the CSS media queries to change certain properties of objects according to the size of the browser window seems to have taken over.

Responsive design is also recommended by major search engines.

There are currently many CSS frameworks based on this principle including Bootstrap and Zurb.

The major disadvantage of responsive design is the difficulty of creating style sheets with the media queries since we must modify the properties of certain objects according to the different screen resolutions. This encourages working with a CSS framework to avoid recreating all common objects each time. Note that CSS frameworks are always quite heavy because they try to support a maximum of browser versions and some features of the CSS language may not be supported by some versions.

Responsive Design

Responsive Design is a technique that attempts to adapt the same HTML page to all screen sizes by primarily using CSS, media queries, and defining almost all object sizes as percentages of the parent. To facilitate the adaptation of the content to the width of the screen, we use a grid whose column widths are expressed in variable units (percentages, em, vw, etc.).

As the width of the screen decreases and a media queries event is triggered, the width of some columns is automatically increased, causing the next column or columns to be pushed down.