Modern Web Design: Common Mistakes You Should Avoid

Web design and development have changed a lot over the past years. Mobile internet is mainly responsible for this, changing when and where we use the internet. Many things that were common ten years ago are now considered outdated. This even applies to a lot of things that were completely up to date two to three years ago. What should you avoid doing when it comes to designing and developing modern websites?

Layouts For Desktop Devices and Smartphones Only

The days of developing your website for one view only have been over for a while. By now, you'll only find very few websites without a responsive layout. However, in a lot of cases, only two devices, or types of displays, are considered when it comes to responsive layouts: the classic monitor and the smartphone. Here, the desktop layout receives a fixed width, while the mobile layout is often stretched across the browser window's entire width. The differentiation between desktop and smartphones alone is not sufficient anymore. Nowadays, there are tablets, phablets, and a bunch of other different devices with various resolutions. Differentiating between two types does not do this evolution justice. Thus, you should keep your layout flexible enough for it to work on all resolutions. On large monitors, your layout shouldn't have any lavishly large borders on the left and right. And on tablets, the layout for mobile devices shouldn't be displayed.

Mobile Version of Your Website

Let's stick with mobile web design. When the options of responsive websites were very limited, own mobile versions for websites were developed. Even today, a lot of major news portals have an own mobile version, which is often accessible via an own subdomain. Of course, this makes us face the same layout problem. On top of that, you'll always have to take care of two versions of a website. The display of the correct version also fails to work in many cases. For instance, the mobile version is often loaded on tablets, although displaying the desktop version would actually be entirely possible given the resolution.

Hiding Content From the Mobile Internet

Websites are becoming increasingly more complex. This applies to the content, but also for the design. Large format images and graphics are combined with multi-column texts and additional sidebars. The difference between the display sizes is becoming increasingly larger. Thus, nowadays, the goal is to design websites that look equally good on large monitors, and small smartphones. This certainly is a challenge. A lot of web designers take the simple, but not recommended route. Supposedly expendable content is simply hidden on smartphones. This may make sense at a glance, making the website a lot clearer on a smartphone. However, this approach is not beneficial for the visitor, as websites are accessed via mobile devices more often than via desktop devices. Because of that, no content should be withheld from smartphones. Instead, you should figure out a way to present all content in a clear, and space-saving way. This can be done by using sliders, or hiding content via the sidebar, and displaying it via a button.

Unsolicitedly Placing Windows and Videos Above the Content

So-called "Modal Boxes", which are placed above a website's entire content when a user tries to leave it, have turned into an annoying custom. These areas are often used to tell the visitor about the newsletter, or certain offers. If you're actually about to leave a site, they are not annoying. However, if you accidentally leave the top area of the site with your mouse, you'll already get molested by said screen. So, if you don't want to annoy your visitors, you should stay away from these popups in modern web design - as beneficial as they may be for a website operator. The same applies to videos that hide a website's content without asking the user.

Simple Resolutions and Wrong Image Formats

The internet did not only become more mobile; the resolution increased as well. For displays and monitors, the size is not the only factor anymore, the resolution is one as well. This way, the pixel density increases, and the resolution becomes sharper. This becomes increasingly noticeable with images. In a simple resolution, an image looks blurry and fuzzy on a high-resolution display. But HTML5 and CSS3 allow you to set different images for different pixel densities. Use this option to make sure that your website looks good and razor-sharp on new devices. Alos select the right format for your images and graphics. Use JPEGs for photos, PNGs for graphics, and SVGs for vector drawings.

System Fonts and Too Small Fonts

Since web fonts have made it into all browser after many years, using system fonts is not necessary anymore. There are tons of free and charged fonts that you can take over into your web project. Make sure that these fonts are available in the new format WOFF2. This replaces the previous default format WOFF, and saves, even more, space thanks to better compression. Especially on the mobile internet, this is a big advantage. Also, make sure to not make your fonts too small. And don't use a single, set font size. On smartphones, fonts should have a different size than on large monitors.

Making the Visitor Wait

Today, users expect websites to load fast. Thus, you should develop your website in a way that makes that happen. Optimize images and use the right format. Use techniques like the "<picture>" element, to always deliver the appropriate image size. Load lower resolution images on smartphones, instead of resolutions that are required on a large monitor. Make sure that JavaScript doesn't block or slow down the distribution of HTML, and ensure that externally integrated files don't have a negative effect on your loading times.

Photo by Jason Goodman on Unsplash