When running your own website, the most important things to keep in mind are usability and visibility. There is nothing more frustrating than loading a website where the content is all jumbled up, you cant find the links your looking for, and the font sizes/colors make the text too hard to read. Simply put, people will not spend much time on a messy, illegible website. In the beginning of online web development, the focus of making a universal website relied on compatibility between browsers. Netscape and Internet would handle HTML and CSS code differently. Depending how your website was coded; colors, shapes, and a layouts would differ depending on what kind of browser you were using. Today, *most* website development is standardized across browsers and this is not much of a problem anymore. The new challenge for website creators is making sure your website is mobile friendly.
A recent survey showed that over 51% of website traffic is generated from mobile devices. This pattern has steadily trended upwards since 2015, and this will probably continue to be the case going forward. Mobile viewership is such an important factor that recently google announced they would being indexing mobile friendly websites ahead of non-mobile friendly sites on their search results. It’s never been more important to make a website mobile friendly. When I speak about mobile friendly, I mean that the layout, text, and images are resized to be properly viewed on a mobile device, whether it be a tablet or phone. Here is an example of a non-mobile friendly website:
Notice how when the screen size is changed, the content size is unchanged a scroll bar to the right and bottom appears. This website is not user-friendly and would likely rank very low on a google search index.
Adaptive vs Responsive Designs
When talking about mobile website designs, 2 words are mainly used: Adaptive and Responsive. An Adaptive website is one that has several different layouts for different screen sizes. An adaptive site recognizes how it is being viewed (in desktop browser, on smart phone, or on tablet), the size of the view port, and then decides which layout to show the user. An example of an adaptive website is https://www.cnn.com/. Try browsing the website and shrinking the page width or height. You will notice that content does not move on the page until you let go of the click, and even then, the content only changes if the window reaches a minimum or maximum size. Notice the difference in the menu bar at the top of the screen, you can see the transition of the screen size as it goes from desktop, to tablet, to phone.
Responsive design is a design concept that uses a fluid grid system to make sure your content is usable on any device and any screen size. The fluid grid system is a smart system that splits your content up into a grid, forming the grid relative to the size of the screen. As the screen size changes, the grid changes with it, fluidly shrinking or moving elements on the screen. A great example of Responsive design is BMW.com.
Adaptive vs Responsive, which should I chose?
When in doubt, build a responsive website. Responsive websites are a bit more complicated to create, but provide a lot of benefits. Responsive websites load faster, transition smoother and work well on any device. Adaptive designs produce multiple layouts, which make them more resource heavy and take longer to load. If you are building a simple website that won’t get a lot of web traffic, an adaptive website would work out well, but the new standard and the go-to design patter is a responsive website.
If you would like to create a new responsive website or modify an existing one, please drop me a message on my contact form and we can talk about how I can help!