What is a responsive website?
The short version is that responsive design ensures that your website looks great on all devices and screen resolutions/sizes.
In more detail, responsive design uses one html code for your website rather than creating two sets of html (one for desktops and one for mobile devices). This is easier for search engines to index, thus you guessed it – better for SEO. In responsive design, your site content is displayed in different layouts in order to be optimized for the screen size giving a much better user experience.
We have collected a number of best practice examples on how to build a responsive site in this chapter. You can also learn how to switch from a non-responsive site to a responsive one and what you should be aware of during this process.
Create a responsive website
In mono we've optimized desktop design so that it is also optimized for tablets. This means that the content areas (column layout in the different page types) are shown the same on both desktops and tables. Full-width modules (e.g. Jumbotron) automatically scale to the browser width - giving great effects for screens big and small. Mobile sites are created by stacking column content and module content elegantly for the ultimate mobile browsing experience. All this means that you can design a responsive mono site with the same freedom and flexibility as before (unlike many competitors that are template-based).
Create responsive page templates
We have designed a series of best practice page examples that work well with responsive design. The page examples are broken up into several groups (homepages, product pages, galleries, etc). Each group contains several different designs that are shown in both desktop and mobile views. Where it made sense, we differenciated the content between the desktop and mobile views (an option with mono responsive) and have explained how we did it.
The homepage is arguably the most important page of your website. Within seconds, it needs to tell your user what your business is about and make them interested to learn more.
Products and Services
On thes pages you need to communicate what your company sells. These pages should be easy to understand and well-structured, all while encouraging sales.
See how you can quickly build a webshop by building great product pages with mono shop modules.
With mono there are several gallery options. Get inspired with a few different gallery page examples.
Your 'About' page tells your user about your company history and the people behind the business. The about page is an important page that generates trust for your users.
Your contact page should help your customers get in touch easily. Depending on your business you should include a map, opening hours, contact information, etc.
Landing pages are an effective way to focus on a specific offer or product/service that will lead to some kind of conversion - be it a phone call, booking, lead, etc. See some great examples for inspiration here.