window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-63172957-1');
Sound
Awwwards
</html>
Created by potrace 1.16, written by Peter Selinger 2001-2019
Back to blog
Web Development

Advanced Design Techniques

Article contents:

As the internet becomes more widespread, the number and variety of the devices through which users access the internet has also grown. While websites were once accessed primarily via desktop computers, the proportion of website page views via mobile devices is increasing. In Asia and Africa, for example, more than 60 percent of website calls were made via mobile devices in 2018, while in Europe the share was just under 38 percent (Statista Research Department, 2019).

Responsive user interfaces offer a way to present website content in a user-friendly and visually pleasing way on various screen sizes. We will look at the basics of responsive user interfaces, some of their challenges, and what should be considered when designing responsive websites.

Responsive Web Design

The term responsive web design refers to a collection of measures that aim to design a website in such a way that it is optimally adapted for various visual output devices. For example, a smartphone in landscape or portrait mode can serve as the visual output device for the website. Alternatively, a smart watch, tablet, laptop, large monitor, or even a high-resolution television screen could be used for this purpose. Thus, screen sizes can vary greatly. A responsive website is designed so that its content can be optimally adapted to different display sizes, which is illustrated below with the example of the IU website. Users often have different devices through which they want to access website content. Thus, it is necessary that the mobile variant communicates the same content as a desktop variant. The visual design and structural layout must also not change too much so that users do not get lost.

Responsive websites enable optimal adaptation to different screen sizes by relying on three core elements: a fluid layout, adaptive content, and layout breaks through media queries. These elements are explained in detail below.

A fundamental challenge in responsive web design is the understanding of, as well as the approach to, design. In the past, websites were designed mostly for fixed window sizes, but, in responsive web design, it is necessary to make the content adaptable.

Wroblewski (2009) coined the “mobile first” design approach. Previously, the design of a website began with the desktop version, followed by the creation of a mobile version for smaller screens by means of “graceful degradation.” This means that the corresponding desktop web page will be adapted, or in most cases, reformatted to fit mobile requirements as gracefully as possible. Wroblewski (2009) cited three main reasons for a mobile-first approach, which is becoming increasingly widespread:

  • Page views via mobile devices have grown strongly in percentage terms in recent years. Starting with the design of the mobile version ensures that companies have developed a well-conceived design solution for the rapidly growing market.
  • The design of the mobile version, with their small screen sizes in mind, forces designers to limit themselves to the essentials. This focus on the key functions of the website means that users can reach the information quickly and without detours. This results in a streamlined interface with high user satisfaction, which has a positive impact on both the success of the site and the user experience.
  • Mobile devices, such as smartphones or tablets, offer additional possibilities compared to a classic website. For example, by including position data via GPS or acceleration data via the sensors of the mobile device, additional information can be added to provide even more personalized (additional) offers. For example, when searching for a restaurant via a mobile device, the user’s location can be included in order to present the search results prioritized according to distance. These enhanced functionalities can, in turn, increase usability.

Page Layout

The layout is the first component of a responsive website. To explain the difference between a responsive layout and other layout approaches, we will first introduce the different variants.

Fixed Layout

A fixed layout cannot be adapted to different screen sizes. The dimensions of the fixed layout are given in pixels. If the screen is too small, scroll bars are displayed. For mobile devices, the complete layout is sometimes scaled-down linearly to a default value .

Fluid Layout

The fluid (or flexible) layout is defined in percentages in relation to the display window. The dimensions of the layout then change with the size of the window. Content elements, such as images and texts, remain at their original size.

Adaptive Layout

The adaptive layout is basically a fixed layout that exists in different variants. If the window size is changed, the layout “jumps” between the variants. Consequently, the adaptive layout adjusts itself between several fixed display sizes. The change between the fixed layouts takes place at defined break points. Between individual break points, on the other hand, the layout behaves like a fixed layout.

Responsive Layout

The advantages of both the adaptive and the fluid layout are combined in the responsive layout. It contains breakpoints like the adaptive layout, outside of which the layout changes significantly. Between the breakpoints, however, it behaves like a fluid layout. The responsive layout is also equipped with scalable content: images, for example, adapt to the available space.

Grid Systems

What are the functions of grids in web design? Modern websites are based on a grid system. A grid system is an invisible system of lines along which various design elements such as images and buttons can be aligned. This supports the web designer and leads to a structured and harmoniously aligned layout. If a grid is used in the background, web designers also have the possibility to deliberately allow individual elements to break out of the grid in order to let them come strongly into the foreground of the viewer. Thus, grids serve as a useful design tool for web designers. In contrast to graphic and print design, however, grids are not derived from the design, but are constructed first. Therefore, the layout of the website is based on the previously established grid. This is necessary because there are no fixed areas for display on the web. These vary greatly depending on the window size of the browser and the user’s terminal device (Hellwig, 2015).

In the past, the 960 grid system was very popular for static layouts. It is useful for us to learn about the 960 grid system, as it serves as the basis for understanding more complex grid types. As the name suggests, the static 960 grid system is based on a total width of 960 pixels. This width has been used to create a workspace that can, in turn, be easily subdivided. The 960 pixels can be displayed easily in both twelve-column and sixteen-column grids. Based on this grid, the various design elements of the website can be aligned (Hellwig, 2015).

The disadvantage of this static grid system, with its fixed layout and width of 960 pixels, is that content can be “lost” on smaller screens or can only be accessed via a horizontal scroll bar. With 960 pixel-wide screens, the layout fits exactly, while space is wasted with larger screens.

To design a responsive web page (or website), the creation of an adaptive grid system is necessary. Therefore, grid systems with fixed pixel values must be converted into a fluid grid with percentage values (Ertel & Laborenz, 2017). Web frameworks such as Bootstrap can assist in the development, as existing templates already specify fluid grid systems.

A widely used grid system based on the fluid layout uses a header area followed by a three-column layout with navigation, main content, and sidebar areas, followed by a footer. In contrast to the fixed layout, the column width of the fluid grid system is specified in percentages, and thus adapts smoothly to different screen sizes.

Breakpoints

As explained above, the responsive layout is based on the fluid layout. At predefined thresholds, also called breakpoints, the layout switches between different grid systems. Breakpoints therefore allow even more flexibility when designing for different screen sizes by creating layout breaks. For example, a single-column grid system can be used for small screens (e.g., smartphone screens). At a predefined breakpoint, for example, a window width of 640 pixels or more is switched to a two-column grid. For larger screens, a three-column grid is used. At the breakpoints, the system switches between different grid systems depending on defined window sizes, which are known as viewports. The breakpoints ensure the flexibility of responsive layout systems.

Both adaptive and responsive layouts work with breakpoints. The key difference between the two systems is that the responsive layout is more flexible, as the content is scaled fluidly between the breakpoints. The advantages and disadvantages of adaptive and responsive layouts are as follows (Ertel & Laborenz, 2017):

  • Both layout types adapt for different screen sizes. Thus, they function better than a fixed website layout on mobile devices.
  • With adaptive layout, pagination only occurs at assigned breakpoints and the page remains unchanged in between. The website is therefore only optimized for the previously designated screen sizes. In addition to the disadvantage of jumpiness, space is sometimes not optimally utilized.
  • The adaptive layout gives the designer more detailed control compared to the responsive layout.
  • The responsive layout offers more flexibility for all screen sizes.
  • Whether implementing either the adaptive or responsive layout is a higher requires more effort depends on the layout pattern, the number of break points, and the extent to which the design elements of the web page (e.g., images) should change.

Media Queries

Along with flexible layout grids and adaptive content, media queries are one of the three central components in responsive web design. Media queries are the core technology used for switching between different layouts at breakpoints. This allows different cascading style sheets (CSS) to be assigned to different output media, such as smartphones, tablets, or large screens. This allows us to take the different properties of the output media to be taken into account.

In simple terms, the web browser on the respective end device receives the website as an HTML document after a web page call. The “hypertext” in HTML means that documents are linked. Linked documents allow interaction, unlike linear documents such as books, whose format cannot change. Hypertext documents are a foundation of the World Wide Web and are rendered by web browsers. Web browsers create a user interface that is then experienced by the user. HTML is used to create, structure, and link information on a website. Multimedia content can also be integrated. However, the visual presentation is not specified by means of HTML, but is determined by the web browser with the help of design templates such as CSS. CSS was developed as a standard for the presentation of the contents of a website. Thus, design features such as colors, layout, or typeface are specified independently of the HTML structure. Only by changing the style sheet can websites be displayed with a completely different design. This is impressively demonstrated by Dave Shea (n.d.) on the CSS Zen Garden website, for example.

With responsive websites, it is possible to switch between different layouts at defined breakpoints. For example, a screen width of 768 pixels or more can be switched to a multi-column layout using media queries. Different properties can be assigned to different screen sizes using CSS. Between the defined breakpoints, responsive websites behave like a fluid layout. When the breakpoint is reached, however, media queries are used to switch to an adapted layout. This is how the high flexibility and adaptability of responsive websites to different visual output devices is achieved. Web frameworks such as Bootstrap also support the development of dynamic websites and offer solutions for defining breakpoints and controlling them via media queries.

CSS Frameworks (Bootstrap)

In this section, we will understand how to use Bootstrap to format our HTML files and explore the CSS styles applied directly to our elements. We will discuss responsive grid systems and mobile-first support with Bootstrap, as well as the display order of the various extensive prebuilt components.

Brief history of Bootstrap

Bootstrap, originally named Twitter Blueprint, was created in 2011 by Mark Otto and Jacob Thornton, two employees of the Twitter company (Bootstrap Team, n.d.). Initially, Bootstrap aimed to offer a library of standard components that would speed up and standardize the development of user interfaces. Bootstrap was designed to reduce redundancy and increase adaptability and reusability among different internally developed web applications. This speeds up the development process, as it is no longer necessary to repeatedly create basic foundations. For example, usually a website will have a sign-in/sign-up system, so it makes sense to reuse existing code for this.

After using the Twitter Blueprint framework within Twitter, contributions from internal developers towards the project (it was renamed “Bootstrap”) increased. Shortly after, Twitter decided to release Bootstrap 1 as an open-source project to the community. Its code has been available since August 19, 2011. Since then, a team led by Otto and Thornton, as well as a community of developers, have helped accelerate Bootstrap’s growth.

After many contributions from the core team and the community, Bootstrap 2 appeared in early 2012. This version provides developers with new graphics components: progress bars, button groups, carousels, etc. (Hussain, 2017). The most important novelty of Bootstrap 2 is the implementation of a system that allows the creation of fully responsive websites (using a 12-column grid system) and web applications that adapt to mobile media, such as smartphones and tablets.

Bootstrap 3 was released in 2012, and its major development is the integration of the response as a core functionality of the library. It is designed mobile-first with a grid system with 12 columns, making it easier to build a site for mobiles and then adapt it for larger screens. This version is suitable for most developers, and it is used by many websites today.

Bootstrap 4 was finalized on January 18, 2018 (Otto & Thornton, 2018). Bootstrap 4 is practically a complete rewrite from Bootstrap 3 and is considered easier to use than previous versions.

What is Bootstrap?

Bootstrap is an open-source CSS framework that makes the construction of websites and applications easier. A framework corresponds to a set of libraries of components, grouped together for a specific purpose and with internal rules that users must follow, that is reusable (as opposed to re-creating every component repeatedly). In other words, Bootstrap is a collection of CSS and JavaScript files containing predefined rules that work together and can be used to create complex designs in a straightforward way. These rules are enclosed in classes, so only the classes of interest are used to apply a set of styles to a particular HTML element.

Bootstrap is overall one of the most popular systems for developing responsive, fast, and reliable websites and applications. Bootstrap has earned its popularity because of its responsiveness and mobile-first orientation.

Bootstrap Response Grid System

Bootstrap is designed with a responsive grid system, as well as supporting classes that form the columns and rows. Bootstrap grids are based on the flexbox, and a grid will always be made up of 12 basic columns, scaling from 1 to 12. Bootstrap provides you with the following predefined prefix classes to define the width of each column and aim the column for a specific viewport size: col-, col-sm-, col-md-, col-lg-, and col-xl-. The following table resumes more detail on the prefixes

Five classes grid system in Bootstrap on multiple devices
PrefixDescription
col-extra small devices—screen width less than 576px
col-sm-small devices—screen width equal to or greater than 576px
col-md-medium devices—screen width equal to or greater than 768px
col-lg-large devices—screen width equal to or greater than 992px
col-xl-xlarge devices—screen width equal to or greater than 1200px

To define a new grid line, we use the .row class. For each new row, we decide the number of columns the row will have out of a possible 12, thanks to .col-* classes. Here it is important to understand that Bootstrap grids automatically have 12 base columns, which are implicitly defined. We then can “group” some of these 12 basic columns together in each row to form new customized columns.

The classes above can be combined to create more dynamic and flexible layouts. Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.

Basic structure of a Bootstrap grid

In the following example, we create a row by using <div class=”row”>. Then, add the number of columns you want by using the tags with suitable col-*-* classes (in our example we created 3 columns). The first star * represents the responsiveness (sm, md, lg or xl), while the second star represents a number between 1 and 12.


&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-*-*&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-*-*&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-*-*&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

In the next example, instead of adding a number to each col, let bootstrap manage the layout. Thus, if a row has three elements to which we have passed a .col class, each of the three elements will automatically occupy a space with a width equivalent to 12/3 = 4 base columns of the row.


&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Creating a grid with columns of the same width

We start with a simple example consisting of a grid with one row and three columns of the same width, using col-sm-4 class.


&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-4&quot;&gt; col-sm-4&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt; col-sm-4&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt; col-sm-4&lt;/div&gt;
&lt;/div&gt;

Thus, each column has the same size and is reduced to the small size viewport defined by Bootstrap (≥ 576 px). In the following, we show how the previous code appears in the browser (for clarity, we added coloring):

If we view the previous code in the viewport size smaller than 576 px, all these columns will start stacking up: The first column stacks upon the second, which stacks upon the third, as shown in a shot of next screen:

Creating a grid with columns with multiple viewport width sizes

Moreover, we can set a specific column width based on the screen size, and we can use multiple classes within multiple viewport sizes, as follows:


&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6 col-md-2 col-lg-4&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-3 col-md-4 col-lg-4&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-3 col-md-6 col-lg-4&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Considering the previous example, the columns will have the same size within the large viewport size ≥ 1,200 px, as shown in the following screenshot:

The proportion of the column starts to change when we visualize it in the medium viewport size according to the assigned classes on each column. The width of the first column will become smaller, the second column will keep the same proportion, and the third column will become larger, as the following screenshot shows:

The proportion of the column will change again when the web page is at the threshold of the medium and small viewport sizes defined by Bootstrap, which is around 991 pixels, as shown in the following screenshot:



Back to blog

</html>
Wordpress Developer Loader, Web Developer Loader , Front End Developer Loader Jack is thinking