Website Mobile Responsiveness

The Website Builder and all existing themes available on Knorish have been carefully designed to ensure that your website is mobile-responsive. The platform automatically adjusts the elements and their content on a page according to the size of the device being used. This means that irrespective of the device size - Mobile, laptop, tablet, or a large screen, you will be able to create a website that is mobile responsive. 

TABLE OF CONTENTS

• Best Practices
  • Responsive Images
  • White Space (Negative Space) Usage
  • Relative Font Sizes 
  • Section & Text Placement
  • Menu Setup
• How To Check If Your Site Is Mobile Responsive

Best Practices

In order to ensure that you create a responsive website there are 5 methods that you must adhere to. These 5 methods have been listed below for your reference

Responsive Images

Use responsive images that adjust their size based on the screen size of the device to ensure that images do not stretch or become distorted. 

This means using contextual images which should not have text pasted on the images. The Text must be added on the section as a separate element. When you use images that have text pasted on them, based on the different device sizes, the images can get cut leading to the text not being readable.

White Space (Negative Space) Usage

White space or negative space is the area between design elements. Ideally, 20% space on the left and right of the site page are left open for devices to not cut out elements from your website.

The image above shows the white space being left for this exact reason. This ensures the page is seen clearly across devices - big or small. 

Relative Font Sizes 

While fonts realign on the basis of the device in use, use relative font sizes to ensure that text is readable on all devices. Too large a font or too small can make the text non-readable.

Section & Text Placement

Break up larger text into smaller segments to create bite-sized content. You should also use a bullet-point-based structure for your content to ensure you have a higher readability of the text.

Similarly using alternate image-based sections can also help in breaking the monotony of the design and makes reading the page a lot easier.

Menu Setup

Ensure to arrange the menu on the website neatly to avoid any breaks in the view. Having too many menu categories can break the view on laptops or desktops of varying sizes.

This means not having too many options on the menu in the first category. Should you need to add multiple links in the menu, create categories under which subcategories can be listed.

Key menu categories that should be added

• About
• Courses
• FAQs
• Contact Us
• Login

Important Note: On mobile devices, the menu automatically changes to a ☰ hamburger menu ensuring a clean menu view. No custom setup is required.

How To Check If Your Site Is Mobile Responsive

Follow these steps below to check if the site is mobile responsive.

Inspect Method

Preview your website on different mobile devices by clicking 

• Windows OS: F12 OR Windows – Control + Shift + C
• Apple: F12 OR Command+Option+i 

Then Click on Dimensions on the top left of the screen to select the devices available in the list and check for mobile responsiveness.

Direct View On Device Method

Alternatively, you can also open your website on different devices & browsers to ensure that it is responsive. Elements that are not must be edited to ensure the site is responsive.