Those who deal with Web design and software development know that it is not always immediate to find the right space and the right hierarchy between the multiple elements that constitute a layout. In addition, it is relevant to adapt the design to different device interfaces. Many people create responsive content taking into account only the resolution of the device where the layout is supposed to be displayed, but this is not enough.
In order to go deeper into the topic, the term “Responsive” was first introduced by Ethan Marcotte in 2010 who asserted, “Responsive is a combination of flexible grids, scalable images and media queries.”
Today, it is not enough to adapt a content to its container. In fact, it is now a priority to create anthropocentric content that places the user at the center of both the web communication and browsing. Here’s now a story to not lose the thread, where Bob is the protagonist. Bob is in his office and he’s looking at the website of a major supplier because of business purposes. He browses the web page from his desktop pc and assimilates a lot of information relevant to his work project. In the evening, he decides to go out with his dog Axel and as long as he walks, he browses from his mobile a web page to purchase of a water purifier for his apartment. In these two situations the user approaches the visited websites in two completely different ways. While in the office, Bob is more focused on the job and therefore he reads the content in depth. Where the second scenario is concerned, Bob is more distracted and relaxed, hence he needs more visual stimuli and contrasts to be able to capture faster both the flow of information.
In these two situations the user approaches the visited websites in two completely different ways. While in the office, Bob is more focused on the job and therefore he reads the content in depth. Where the second scenario is concerned, Bob is more distracted and relaxed, hence he needs more visual stimuli and contrasts to be able to capture faster both the flow of information.
Hence, for the creation of an ad hoc layout, we shall take into account:
- the device in use;
- the relationship between user and device
- the differences between android and ios.
In order to explore the practical side of the process, the steps to analyze for the realization of a responsive layout are the following.
Layout
There are different procedures to set up a layout that is strictly related to one’s preferences when structuring a project. In my view, I prefer to start by hierarchically prioritizing the requirements of the project to outline the ideal approach to maintain. The first question I ask myself concerns whether the layout I’m going to create will be mainly displayed on a desktop or on a mobile. This allows me to choose the best approach to start designing from. In case I’m creating an administrative dashboard in Angular, it is unlikely that the layout will be displayed from mobile, so it is preferable to first focus on an optimized design for a desktop. Once the desktop design is set, the first thing to do is to paste the following lines inside theandtags on the html page. This will set the display on all screens with a 1 × 1 aspect ratio and remove the default functionality from iPhone and other smartphone browsers that confer the full view to websites and allow users to enlarge the layout by pinching it. Then, the next step is to add the media queries that allow full control over the display of the layout elements on the various devices.
<!—add for full responsive layout—> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
Media Query
Media queries are CSS statements that identify the type of device or a relative feature in order to apply different styles or conditions.
Typhography
The best way to manage font size is to use the size in rem. The css3 specification includes the possibility to use rem dimensions, which work almost identically to em units. Rem is resized according to what is expressed in the root elements of the page, i.e. the html component, in opposition to the em unit that inherits the size characteristics from the parent element. The browser will convert the rem and em dimensions into px values.
Show and hide items with the display component
There will be times when it is necessary to either show or hide items because of the display resolution. The display property specifies whether and how an item is displayed. You can manage the visibility of various html elements via css.
//Use this to hide and element
.hidden {display:none;}
//Use this to show a hidden element
.visible {display:block;}
Vector Images
Bitmap is a valid solution in case your icon has many details and some fancy effects applied. On the other hand, another option to consider is the use of a vector image as it can adapt more appropriately to different resolutions.
