Kentico MVC websites provide a cleaner approach to website development compared to the Web Forms Portal Engine approach. With this in mind, it is essential to treat the blank canvas with care and attention and make sure you follow HTML, CSS, and JavaScript general front-end best practices.
Before getting started with developing and testing, plan your site and make sure you know about these five considerations.
The Development Process
First, you will need to ensure performance and usability are considered and applied for your website audience. Your Kentico MVC page outputs will be lighter and only what you add to your MVC views will be shown.
If you are using CSS pre-processors and front-end frameworks as mentioned in my previous article, you should incorporate the appropriate media queries, or the CSS classes provided by the frameworks to allow you to target the mark-up you have in your MVC views to be responsive.
It is important to follow structured HTML and best practices when you do this, making sure your MVC view for all the pages are inherited, and the viewport is assigned
Widgets in Kentico MVC
It's important to look at how you generate content in Kentico MVC now you have complete control of your output. With this in mind, you will need to consider Kentico 12 MVC Widgets and the outputs they provide. Have you thought about the output from these widgets and how they would work responsively? This is an important aspect of development that people may forget or pay less attention to until it is more noticed later on the project or even noticed by the client.
Mobile-first Implementation
Mobile-first development is another central expectation of a modern website. Whatever you're looking to output in terms of Kentico MVC, responsively you should look at developing the output from a mobile-first approach.
A lot of the CSS frameworks mentioned in my previous article follow this approach, and it helps in delivering a fully responsive website. Instead of performing development actions to hide or display portions of the page depending on the devices, instead, work from mobile upwards to avoid this.
Responsive Assets
When creating a responsive site, it’s recommended that you understand how your assets will need to be served across your devices. You can use a HTML Picture tag, helping to serve the appropriate images to different devices. You may find it is beneficial to serve smaller vectorized images for mobiles devices and then larger images as your devices increase in widths.
To help with images, Kentico provides support for responsive image management. The responsive image functionality enables you to create your own image filters and combine them in different ways to create image variants.
Responsive Icons
Where appropriate you may need to add icons to your Kentico MVC websites. Generally, you will find you may use images of different file types, but for responsive websites, it is heavily recommended to use font icons or even better to use Scalable Vector Graphics (SVG) images.
Testing Your Responsive Kentico MVC Website
As with any website you build, it is important to make sure your responsive websites are thoroughly tested. For responsive websites in Kentico MVC, follow the steps below.
Note: It is recommended that you have a Test Automation Engineer as part of your development team. Their responsibility is to help write manual and automated tests for elements and key journeys on your website. Bear in mind, you cannot use Device Profiles in MVC to test your site as it is not supported.
Manual Testing
You can test your responsive website manually by using specific browser extensions/add-ons like Chrome's Toggle Device Toolbar, which allows you to emulate your website in many different devices and see how it renders.
This is fine as an initial test, but it should not be the only way you test your site – it is much more important to test a responsive site on the devices themselves.
You can also hook up your local responsive testing to mobile devices using proxy services to direct traffic from your phone.
Visual testing does allow you to pick up bugs which may affect the responsive outcome of specific areas on the site where content entered could be the culprit. When this is the case, it is recommended to follow best practice content modeling to help aid this by focusing on mobile-first and then moving to larger devices and different browsers.
Automated Browser Testing
As you're most likely aware, manual testing is something we all do pretty well, but there are always times when something is missed. This is one of the main reasons a lot of the development build shops go for automated testing. This way the automation will identify issues you have missed or resulted from other features.
You can write automated tests to see if certain CSS classes are visible/enabled on specific devices when using a smaller viewport. A good example is to test that your burger menu shows up on mobile.
A tool we heavily use is BrowserStack. It allows us to see test your websites in many different ways and on many different devices on many different operating systems.
Performance Testing
It is very important to look at the performance of your responsive MVC website. You want to make sure that the website you have built works well responsively, but not at the expense of site speed as this will push users away from the site.
There are a couple of ways you can increase your website performance, one of which is to look at reducing the large resources on your website and implement caching to improve the performance.
You can also reduce the number of HTTP requests you’re making for files, so if you are looking to load say three different JavaScript files, this would equate to three HTTP requests. It is recommended to minify and combine these files into one, therefore reducing the number of requests.
A useful tool to help with this is Google Chrome's Lighthouse plugin.
This tool not only helps with performance tips, but also allows you to focus on accessibility, best practices, PWA, and SEO.
As you have full control over your HTML mark-up, combining all of the above would help you deliver responsive Kentico MVC sites.
What Are You Waiting For?
Your approach to development and testing is key to building a successful, responsive website. If you're looking for full control over the HTML mark-up from within a CMS to build responsive websites, then Kentico MVC will give you a clean canvas to apply only what you require to the mark-up without having anything inserted by the CMS for it to work. If you’d like to learn more about Kentico, schedule a free demo, or download a free 14-day trial now.
To find out more about MMT Digital, visit: https://www.mmtdigital.co.uk.