Responsive web design

Almut M. Logo
graphic designer

"The technical realisation of my website by Mrs. Müller was quick, professional and uncomplicated, with fresh and expert input and ideas."
Stefan Dehmel, Dehmeldesign

Responsive Webdesign

Many websites are almost unusable on a mobile device because the design was created for fixed widths that go beyond the screen size of a smartphone or tablet.
Web design needs to change because within the next few years, the internet will be increasingly used on smartphones and tablets.

The wide variety of screen sizes (also landscape and portrait orientation has to be taken into account) make it inevitable to build a website right from the start responsive. It is less effort than "making a website responsive" which was designed with a fixed width layout for desktops only.

screensizes responsive web design
Many screen sizes have to be taken into account when developing responsive websites

Touchscreen instead of a mouse

In order not to disappoint mobile website visitors, it is essential to create a "responsive" web design. Responsive website design means that the web design adapts itself to smaller screen sizes. The navigation and user interface should be reconsidered for touch screens and optimised for operation with fingers instead of a mouse.

Less is more

Pages with very large hierarchies and deeply-nested navigations should be simplified. Comprehensive tables are difficult to display on a smartphone screen as well.

While there are some technical solutions to make a table still accessible on a smartphone screen, they can never be more than an emergency solution, because they don't provide optimal user experience.

Therefore plannng a website for mobile devices is a good opportunity to reconsider your concept of mobile content and to ask yourself, which of the contents are really important to your users and which are only "nice-to-have".

If it is impossible to simplify the structure and contents of your website, consider to set up an extra .mobi website or using a content adaption solution.

Pictures and responsive web design

providing pictures for different screen sizes, resolutions and especially also for slow internet connections is a challenge for every web designer. Dependent on website requirements and budget of the customer there are  different possibilties to solve the problem, such as the <picture> element, media queries and Javascript solutions or the "one-size-fits-all" approach.

Mobile content concept

Responsive web design? Content adaptation? Or an additional mobile website? There are different options to build a website for mobile devices all with their pros and cons:

  • Responsive web design
  • Content Adaption (RESS: Responsive Web Design with Server-Side Components)
  • an extra .mobi website

Responsive Webdesign

  • Same website/same content for all devices, which means lower maintenance requirements for the website operator.
  • The user will be served with the same content , no matter from which device s/he is accessing your website.
  • Slow internet connection might cause performance problems, because the same content will be provided to all users. only after being already sent to the client, the content will be adapted to the users screensize (by css media queries)

Content Adaption

  • The server checks in advance (Useragent detection) which device requests the website and sends only the appropriate contents which have been optimized for that particular device. By doing so, user experience and page loading time can be improved, because only relevant data is sent to the client device.
  • Higher development effort due to more complex technology.

.mobi website

  • Optimized for mobile devices, customized content can be provided.
  • Two websites will have to be maintained.
  • Two URLs which have to be remembered by the user (e.g. website.com und mobi.website.com),an two URLs which have to be redirected.

Are you encouraged to make your website mobile-ready to provide your business and your customers with a clear added value? I'd be happy to advise you.