TRINIDAT-WIKI
Responsive web application
Why optimization for mobile devices is becoming increasingly important
Mobile first
Mobile Internet use is becoming the standard. 55 percent of all page views were made via smartphone or tablet in Europe in 2020, while in Asia the figure was as high as 62 percent. Websites and modern web applications must therefore be convincing, especially on mobile devices. The key to this is Responsive Design. It guarantees the automatic adaptation of web content to the size of the screen. Responsive Design is thus the prerequisite for the user-friendliness of a responsive web application and crucial for a positive user experience. Only those who immediately feel addressed by a page and are easily guided through an application will stick with it.
A responsive web application also represents the greatest benefit from the operator’s point of view. Once developed, the web application works on desktop systems as well as on mobile devices. The additional programming of an app is no longer necessary. This significantly reduces the effort required for adaptation to different end devices. Regular software updates, as is usual with native apps, are no longer required. Updates to the web application are made centrally via the server.
How does Responsive Design work?
No matter on which device a web application is opened, content and structure are always adapted to the respective screen resolution. This is the principle of Responsive Design. It does not matter whether it is a tablet or a smartphone. Even the size and format have no influence on the quality of the display. The responsive web application automatically adapts to portrait or landscape format – regardless of whether the display has a size of 4.8 or 7.6 inches. The term Responsive Design was first used by American web designer Ethan Marcotte in 2010. At that time, most people used the Internet from either a stationary PC or a laptop.
The web design was correspondingly rigid. Anyone who wanted to call up a website via smartphone struggled with cropped images, poorly legible text and many white spots on the page. The term “responsive design,” coined by Marcotte, therefore signified a new approach and put mobile use at the forefront.
New web applications or relaunches of existing software are therefore often designed for mobile use. Flexible design grids, flexible content and relative rather than fixed pixel values guarantee the best possible image resolution. More information can be found in the WIKI article “Advantages of individually programmed web applications”.
What are the advantages of a responsive web application?
Stay or go? Users decide within a few seconds whether they stay on a page they have accessed or not. Usability is crucial for the first impression. The prerequisite for this is responsive web design.
From the provider side, a positive user experience is first and foremost a technical approach. After all, the more intuitive and clearly laid out a web application is, the more satisfied users will be. Responsive design is particularly important for web applications where interaction is important. The motto here is to keep things as simple and logical as possible.
Responsive web design: technological basics
Responsive web design is based on a combination of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML is the standard markup language that gives websites a structure. The HTML code is used, for example, to define paragraphs, text modules and graphics. The design of the website is created via CSS. The stylesheet language defines the layout and appearance of HTML elements.
To ensure that the website automatically adapts to the respective end device, it makes use of so-called media queries, which are a fundamental part of CSS3. These are integrated into the website code and determine factors such as screen size and resolution. They thus control the output of the website for the user.
There are defined limits, also called breakpoints. These pixel values indicate from which limit a new layout view applies. Most breakpoints defined in a media query are based on the common sizes of end devices and have 480, 800, 1024 and 1280 pixels.
Flexible grids work with relative values that automatically adjust content by percentage when the display area changes. This works by the flexible grid calculating the size of the content down to the display area. The code is set in relation to this and the browser visualizes this.
User Experience and Accessibility
What does it take to make access to a site as easy and pleasant as possible for as many users as possible? When it comes to user experience, the term “accessibility” comes up more and more often. This is about implementing Internet offers technically and in terms of design in such a way that they can be used by all people, regardless of personal restrictions and technical requirements. This is where Responsive Design comes into play. The following applies: a barrier-free web design makes mobile Internet use fundamentally more pleasant, as these examples show:
Contrasts:
People with visual impairments depend on good contrasts. Users also benefit from clear colors and graphic elements when they use their smartphone in the dark, outdoors or in glare.
Subtitles for videos:
They are often a convenient alternative to audio, for example, in a noisy environment or when watching a video in public. So websites that always subtitle their videos offer significantly more service.
Page structure:
Few menu items, clear navigation and good text structuring provide orientation. But they also provide a quick overview and are thus a first positive user experience.
Blind people use screen readers on websites. This software reads the screen display aloud or reproduces it tactilely via a Braille display. However, the software cannot recognize images or “translate” a graphic into words or writing. This requires an alt text that must be filled in the website’s CMS and is not visible on the website itself. This alt text describes the image and at the same time has a positive effect on search engine optimization. Because the image can now also be read by Google.
You have questions?
We have the answers!
Learn more about the advantages of a responsive web application. No obligation and free of charge.
Get Responsive Web Application Created
Every website operator is also a private user and therefore has different user experiences. The question of how responsive one’s own website is is therefore obvious. The easiest way to check the usability of websites and web applications is to call them up on different devices. The page or application is optimized if all content is scaled appropriately and readable on all mobile devices, laptops and desktop PCs. If this is not the case, a relaunch or the creation of a new responsive website or web application makes sense.
Flexibility is the most important layout requirement here. In addition to flexible layout grids for the grid, this includes flexible font sizes and flexible image sizes. Thus, fonts can be adjusted in percentage sizes as desired. This makes a mobile view comfortable. For image sizes, scaling is particularly useful. Since end devices have different requirements, loading large image files can be very tedious. The frustration of users is pre-programmed. This can be avoided if images are created in different sizes right from the start. With HTML5 technology and CSS3 media queries, a suitable variant is automatically selected for the respective end device.
Flexibility is therefore the greatest asset of Responsive Design. It fits perfectly with a digital world that is constantly evolving, with new devices emerging all the time. Once optimized, a web application can adapt to any screen size thanks to relative values. It doesn’t matter if smartphone displays continue to get bigger or if the trend eventually reverses. Responsive web design always delivers the best possible page view. The best prerequisites, therefore, for a positive user experience.
Does your web application need a responsive design?
Would you like to learn more about Responsive Web Design? Feel free to call us or send us an email for a free and non-binding consultation.