An introduction to modern website design 

People are browsing the web on an increasingly wide array of devices. According to StatCounter, most internet traffic now comes from mobile devices instead of desktop computers. As of late 2016, 51.3 percent of internet usage was from mobile devices or tablets. In 2009, 100 percent of internet usage was from people using desktops. The internet landscape is rapidly changing, and websites need to be designed with these realities in mind. Because of the mobile device boom, responsive design is the most important factor for modern websites.

What is a responsive website?

A “responsive” website is this: the website responds to the platform or device that’s being used to view it. If someone is looking at the site from their smartphone, the site changes itself to look good on a smartphone screen. Text will rearrange itself, images will adjust, the menu will be different and so on. A responsive website is easy to use, regardless of how someone accesses it. You can see this for yourself by right clicking anywhere on this page and clicking on “inspect” to emulate viewing our site with different devices using your browser.

You can see from our traffic data over the last few months that mobile and tablet visitors make up 25% of our total visitors and in the coming years this percentage is expected to grow.

More things to consider

Aside from a responsive design, it’s important to also think about file sizes and loading times. Many internet users have limited data on their mobile devices and an even more limited attention span.

To meet modern web standards, websites have to be small and fast. According to data measurement company Nielsen, most people spend about one minute on a website. Users will leave a website if it’s taking too long to load. Google released the results of a study on loading times in late 2016. They discovered that over half of mobile site visits “are abandoned if pages take longer than 3 seconds to load.”

To identify the shortcomings of your sites load time, Google’s PageSpeed Insights and GTmetrix should provide you with more than enough information.

There are many techniques people use to reduce file sizes and load times as well as improve the overall functionality of their site such as:

  • Minification (removing unnecessary characters from Javascript, HTML, CSS, etc.)
  • Image optimisation
  • Asynchronous loading of scripts
  • Browser caching
  • Gzip compression
  • Content Delivery Networks
  • AJAX 
  • An SSL Certificate (https) ensures that all data sent to and from the site is encrypted and secure
  • Usability testing for user experience

Let’s not forget website aesthetics

The user interface (UI) is most important. Links and buttons should be easily visible on all devices. Fingers are generally less precise than a mouse and people don’t want to accidentally click on the wrong link. “Hamburger” menus are the most common for navigation on mobile and tablet devices as its now become a universal symbol. A website’s layout should be responsive and intuitive.

The actual look of a website (such as font choices and colour schemes) is more of a tricky thing. It’s subjective, and different people have different needs. A business will likely have a brand identity, while a personal website is more relaxed. The current design trend leans toward minimalism, which–by no coincidence–is best for people using the internet on a mobile device as well as those looking to consume information quickly and efficiently.

There are a number of website design techniques you can consider for making your site feel more unique such as parallax, clever use of video such as cinemagraphs and animations and custom graphics/branding.

If you ever need help with improving your website or creating a new one, you can always get in touch with the Mude team.