Creating responsive websites is a key requirement these days. No longer a nice to have feature, it is a central expectation among clients and customers. There are various aspects of Responsive Web Development (RWD) that you need to follow, and if they are not done correctly, it can lead to bad implementations and bad user experiences for your audiences across devices.
Kentico MVC provides you with a clean blank canvas, clear of Web Forms CMS specific mark-up or code added into your generated output. I will explain how we achieved responsive Kentico EMS MVC websites by going through some of the key points to consider and some recommendations on what you should be using to help you during your build process.
If you're looking to transition from Kentico Web Forms to Kentico MVC, have a look at the things to consider when transitioning to Kentico MVC.
Kentico MVC vs. Kentico Web Forms
Firstly, let’s look at the quick differences between Kentico MVC and Kentico Web Forms in terms of the generated output from both of the development models.
From within the Web Forms sites, you will notice the CMS provides a bulk of the core HTML structure and shell. While you can apply appropriate best practice and recommended mark-up around or to replace HTML core tags like the Head and Body elements, there are quicker and easier ways to do this.
Similarly, incorporating best practice mark-up for a Web Forms solution would be difficult as it would need to be applied on the CMS level and potentially through Kentico core files – which can cause issues when you want to apply hotfixes and upgrades.
However, with the Kentico MVC development model, you get a blank canvas to create all the structure and HTML architecture you desire and not have to be locked in to follow anything you haven't stipulated yourself. I see this as a massive advantage in reducing the unnecessary HTML mark-up and going for a leaner lightweight rendered output of your HTML.
With Web Forms, there are a lot of web parts and widgets that Kentico provide, and some of them require something called ViewState to run and specific mark-up to function. ViewState allows you to convey the state of the web forms during PostBack. Granted Kentico have a setting within the admin area to shift this to the bottom of the rendered mark-up, but with MVC we don't need any ViewStates or specific mark-up generated from web control PostBack. With Kentico MVC we create our output views and not be dictated by the CMS.
I truly believe using Kentico MVC would provide you with a cleaner approach to building responsive websites compared to the Web Forms approach.
If you're looking to switch from Kentico Web Forms to Kentico MVC check out the 8 reasons to switch to Kentico MVC.
Prerequisites of a Website Build
Before starting to build a responsive website, it is important to identify the appropriate architecture and front-end frameworks you wish to use. This is a valuable exercise that will pay dividends further down the line – you do not want to be lifting the front-end framework and architecture from a previous project and then realizing there are issues on your new site build from a previous one.
1. JavaScript Module Bundler
Another question you need to consider is whether you should be using a JavaScript Module Bundler like Webpack or not.
They provide you with handy packages to transform the JavaScript, HTML, Imagesand CSS. As the bundlers are really powerful, it’s heavily recommended to use a module bundler to ensure consistency and standards are followed on your projects and best practice to be adhered to by your developers. At MMT Digital we have templates for our front-end frameworks so we can use the same one for all of our builds ranging from pure front end, bespoke backend, and also our Kentico MVC sites.
2. CSS Pre-processor
To add to this, we would recommend a CSS pre-processor like SASS.
A pre-processor allows your CSS building and responsive styling to be done more effectively and efficiently. SASS provides helpful functionality like variables, mixins, functions, and modulisation that will ensure to increase your CSS building standardization, best practices, and speed of delivery. You can then include some of your responsive elements into your CSS building in SASS for your different viewport and device width variables. Each SASS file you create that needs it, can inherit or utilize those variables.
3. CSS Frameworks
CSS frameworks aid in displaying responsive websites by providing templated CSS layouts and grids, that allow for pretty much all your different viewports and devices widths. There are a number of frameworks you can use, including Bulma, Tailwind CSS, Bootstrap, and Foundation. A CSS framework would help with your HTML mark-up architecture and save you lots of time on common items you use on the website, providing you with front-end component libraries that can be applied for mobile first projects. I would recommend one of these if you need to build a responsive Kentico MVC website that has common templated designs.
4. DevOps
In addition to the front-end aspects of the development build for a Kentico MVC site, you will also need to consider the build process. You would need to look into the DevOps setup to establish the build process to execute the front end technologies and module bundler on the specific development environments.
5. JavaScript Frameworks
One of the amazing things about Kentico MVC’s clean output is that you can build the HTML mark-up and architecture as you like, allowing you to incorporate JavaScript frameworks into your MVC builds. In turn, this will allow you to use frameworks like ReactJS, AngularJS, and Vue.js in your Kentico MVC responsive websites.
They can be used for smaller items for the standard websites (simple or complex), create single page applications or create a hybrid of JavaScript dynamic components within pages all within a responsive website. Whichever JavaScript framework you choose to utilize on your Kentico MVC site, it is vital to follow best practices for that particular framework making sure speed and performance recommendations are applied.
What Next?
Make sure you’re up to speed on Kentico MVC. There’s plenty of training material, documentation, and more to get your teeth stuck into.
Once you have architected and configured the prerequisites of your responsive website in Kentico MVC, you will then need to explore the development process needed to bring it alive. Stay tuned for my upcoming article to find out more about developing and testing a responsive website in Kentico MVC!
To find out more about MMT Digital, visit https://www.mmtdigital.co.uk.