CREATING A RESPONSIVE WEB DESIGN
Designing a website in the year 2017 is a challenging task. People access a website via multiple display resolutions, starting with small screens on mobile devices, going to medium screens on tablets and ending with large screens on desktop computers. As a web designer, you are facing the challenge, to make your website look magnificent on each of these devices. But how can you achieve that? With a fixed width of your website? No! With three different apps, each designed for a specific device? No! By deleting your website and publishing a book instead? Definitely not! The catchphrase is “responsive web design” and I am going to show you, how I set up the responsive web design for christianott.co.
State of the artBeginning with an overview of the current state of the art it is surprising, that a certain amount of websites do not use a responsive design. Some websites still use a fixed width and therefore force mobile users to zoom in and out, even though these website designs have decreased in the last years. Other websites have an additional version for mobile devices to their website with a fixed width (or an app for mobile phones). However, the majority of websites that do use a responsive design, stop at a certain width of display resolutions, mostly at around 1600 pixel, probably 2000 pixel. Using an Ultra HD display myself, I found that only a few websites (even if they have a responsive design) make use of the space of a resolution this high.
Definition and challengesBefore we dive deeper into the creation of the design of this site, a little recap on what a responsive design is: It is a design approach, which is about the automatic adaption of your website to the screen resolution by using the available space optimally. Concisely, it makes your website look great on every screen resolution. However, imagine the challenge to display the content of your website in a screen width of 300 pixel up to a screen width of 4000 pixel. That is 13 times wider! Though more space is great, you do not want to cut any relevant information on a mobile device that you show on the big screen, whereas you also do not want to leave a lot of blank space on a high resolution.
Adjust the font size!Some basic adjustments can be made in any responsive web design, which are mainly to show the content smaller on a small device and larger on a large device. To give you an example: A font size of 14 pixel can be easily read on a mobile device with your eyes usually not too far away from the display. However, if you sit half a meter away from your 28-inch-display with 4k resolution, this font size is quite hard to read. Therefore, I adapted the font size depending on the screen-size. The smallest font size being used is 16 Pixel and is usually seen on mobile devices. The largest font-size is way higher than that and stands at 27 pixel. It is used starting at a screen-width of 1600px. In between these two, the font size increases with an increasing screen width and should always be very well readable in dependence of the screen width.
Adjust the image size!In addition to the font size, the size of images can be increased as well. Whereas you are bound to small, low-quality images on mobile devices due to small resolutions and slow mobile internet connections, you certainly do not have these boundaries on desktop computers. A solution might be, to have the same picture available twice on your webpage, loading the small, low-quality version on small screen resolutions and the large, high-quality version on high screen resolutions. Unfortunately, this can cause a lot of effort and you have to live with the fact, that each time a user downsizes his browser window to a mobile phone size, every picture needs to load again (as far as you did not come up with a smart solution to prevent this scenario).
Vector graphicsTo tackle the challenge of scalability and file size concerning images, I prefer to use vector graphics over pixel graphics. Vector graphics are awesome, because they are scalable without losing quality while their file size is dramatically low, sometimes just being a few kilobytes. The start was difficult, however. Despite having a lot of experience in Photoshop, I could never get into Adobe Illustrator to create vector graphics. It was a game-changer when I found out about Affinity Designer, which helped me to create vector graphics very easily. Getting into vector graphics was definitely worth it, nearly every image I use in my posts are vector graphics. The difference between pixel and vector graphics can be seen in the attached image, showing a zoom in on the Footballelixir logo as a vector and as a pixel graphic.
Show additional contentOk, so you made fonts and images larger in your responsive theme, but unfortunately there is still a lot of blank space left on a 4k resolution. What are the possibilities to use this space? The first one I identified is the possibility to show additional content on bigger screens that is not shown on small resolutions. That should certainly not be any important content since you do not want people to miss anything, but you can certainly fill the blank space with nice-looking, but not value-adding illustrations. In the former web design of Footballelixir.com, I did this with the introduction- and wrap-up-section of each article, making you see the logo in addition to the text in a high resolution window, whereas you only saw the text without the logo on a small device. You can still see this approach in the picture below. However, as I renewed the design of the site, it turned out to be slightly boring to show the same picture on every site, because it made the introduction of every article look the same. I still like this idea though, I will probably try to design an interesting additional background that is shown on the sides in huge resolutions, to not make the space look too blank.
Basic box-designThe second possibility available is what I call a basic box-design. By basic boxes I mean single content boxes, that all have the same size, contain only few elements and are placed next to each other. You might have seen it at the front page: The links to the different sections are displayed in boxes of the same size being placed right next to each other, just consisting of text and an icon. As another example, take Instagram’s overview page of the pictures on a profile. These types of objects are perfectly scalable, you can just place as many boxes in a row, as the display resolution allows you to place. You also have the possibility to increase or decrease the size of the boxes accordingly, saving you from showing too large boxes on a mobile screen.
Advanced box-designThe third possibility to fill blank space is what I call advanced box-design. An advanced box consists of several elements that have different sizes. The elements and the boxes themselves can be placed dynamically to fill blank space. I worked with such an advanced box-design in the former web design of Footballelixir.com. Every article page had several boxes that consisted of a heading, a text and an image. It scaled according to the width of the browser window. For small screens (speaking of everything under a display-width of 1000 pixel), the picture was placed under the text-section. Going on from 1000 pixel, the picture was placed in a row with the text and both increased in size up to 1600 pixel. From 3500 pixel on, two boxes were placed in a row, making the design perfectly compatible with Ultra HD and 4k resolutions. You can still see the approach in the picture below. I was very proud of that design because it was ultra-responsive, but it limited me to that point, that the elements always had to be in line. The height of the group of heading and text could not exceed the height of the attached image while the whole box needed to have the same height than the other box in the same row. If they were not the same height, it looked broken. I needed more flexibility though. Some texts do not need pictures and some pictures do not need texts. Furthermore, if you want to add embedded content such as tweets or videos, you need even more flexibility. Therefore, I decided to discard that approach and just work with one column on article pages.
Wrap-upSetting up a responsive web design has been a must. While an adaptive header was already part of the WordPress theme, I used several other ways to adjust the content to the width of the website. I began with the implementation of an adaptive font and image size, so that both are better recognizable in dependence of the screen size. For the scalability of images, I used vector graphics to keep the file size low and not have any losses in regards to the quality of the images. Then I developed a dynamic addition of columns for the overview of articles on both front page and category sites, while I stayed with one column on article pages due to more flexibility. As a future perspective, I am still thinking about adding interesting illustrations to fill up the blank space on the sides in high resolutions. Looking at the final result I am very satisfied with the website theme being flexible, colorful, fresh and modern and I am especially proud, that it serves as a very good basis to present my posts in a visually appealing way.