It’s 2020 and nobody needs to be convinced that all web pages you create need to look awesome on mobile devices. When it comes to creating websites, we often focus on the desktop first (more screen space to play around with), and start working on the mobile experience at the end of the project.
Web page builder Dorik comes with a simple button that allows easy switching between device previews. If you switch between desktop, tablet, and mobile devices early on in your project you will avoid getting frustrated at the end.
In this post, we will continue our example project from our post that explains how to build a landing page with Dorik, and make that page responsive.
This short screen recording shows our landing page before optimizing it for mobile devices.
In case you used pre-made templates with Dorik this step is not necessary as they are already compatible with tablets and mobile phones. For all sections that were done from scratch, you need to make them responsive individually.
Working mostly in Elementor, I was prepared for my usual work of clicking, typing, going through multiple settings, but Dorik convinced me right away that this will be a very easy task and can be done pretty fast.
What I like to do is start from the top and go through each section to make sure I have consistency. This will make a visitor feel you dedicated time adjusting your website for mobile versions and will keep them on the website longer.
You can expect, by default, that all headlines, photos, and text will be oversized and might not fit the screen as margins and paddings were not adjusted for smaller devices.
Switching between device previews in Dorik
So let’s take a look at each setting in your Dorik page to improve the mobile experience.
Step 1: Understanding Doriks Responsive Settings
On top of your website, you have a selection of which mode you are currently editing: desktop, tablet, mobile phone. My goal here was to switch from desktop to mobile as that is where customization is needed most.
Dorik is designed to make landing pages quickly, responsive mode included. Almost every element has a responsive mode switcher to allow for a faster adjustment while editing or adding content.
Step 2: Fix Margin and Padding
The most important thing to make your website responsive is fixing margin and padding. Spacing that looks good on desktop is usually not looking good on mobile.
The margin controls how much space is outside the border of the element you are editing. The padding controls how much space is inside the border and the content of the element you are editing.
As the mobile version is selected, it is time to fix padding and margin. What I usually do to find the perfect ratio of content and screen size is to return my values to zero (from what I used in Desktop) and then play around with the values to find the perfect fit. Often sections will be too high, and that is what I fix first.
This short screen recording shows margin adjustments for a better fit.
My general advice here is to stick to the same padding/margin settings for the corresponding device. It improves consistency across your page and makes it easier for your visitors to read/view your page.
If you need a general explanation of the topic, check out the explanation I added in a post about customizing padding/margin in Elementor.
Step 3: Heading and Text Adjustment
Once you are done with margin and padding, it is time to work on your headings and text blocks. This is important as good overall readability of your website is crucial for overall impression as oversized text difficult to read will steer your visitor away.
By default, the font style settings you apply on your desktop design are applied to your mobile design.
Dorik made this step very simple. It is done via a slider, as you select a heading or text you want to edit.
Screen recording shows editing of the main title and text below to make sure they fit on screen and can be read easily.
Step 4: Adjusting Image Size
Another important thing is to customize images for smaller screens. Once switched to mobile, images are oversized and expanded. As mentioned in my previous post about creating a landing page with Dorik, this is when image height/width mode comes in handy as you can quickly adjust both using a slider.
Screen recording of image customization in responsive mode.
Step 5: Changing Visibility of Individual Sections
Dorik has this very useful feature called “visibility and position” in which you can simply mark sections you don’t want to have on tablets and mobile but want to keep on desktop.
This setting might be useful if you use advanced features (like animations, custom CSS, etc.) that you have a hard time customizing for mobile. Instead of trying to get the same section displayed on mobile, you can simply hide it.
Keep in mind that users expect to see the same content from the desktop on mobile and tablet. You can hide sections, but you should consider recreating those sections for mobile.
Step 6: Don’t Forget To Check Your Layout
When doing final checks you will notice that on mobile it sometimes makes sense to change the order of your elements.
Dorik gives you the option of Reverse Column Stacking for responsive modes to automatically reverse the order of your columns for a better layout.
This way, you can make sure that you do not show several blocks of text or images one after another.
Don’t forget about your tablet users. Customizing your page for tablets is easier, as the available screen size is not so different compared to desktop.
Screen recording of customizing content in tablet mode.
Step 7: Global Options & Custom Saved Templates
Customizing a landing page for mobile devices can turn into a click marathon. You can avoid that by adding responsive settings in global options.
Typography settings for headings and body text can be set in global options. You can always override those settings in custom content elements if you want to.
Another way of saving many clicks is to save your custom created sections, rows, and other elements after making them mobile-perfect. This will save you lots of time and helps create a consistent design on your landing page.
Like other page builders, Dorik does not automatically adapt your custom-built landing page to be perfect on all devices.
But Dorik makes it easy to constantly switch and customize for different devices. This will simplify the whole process as responsive websites are customized quickly.
If you want to be on the safe side, you can always stick to using the ready-made templates Dorik provides.
Hand-picked related content: