Monday Masterclass: Solving Responsive Web Design Challenges With Elementor

This week we’re tackling the challenges of responsive design head-on, and focusing on correct planning, with boatloads of expert advice, tips, and simple solutions for problems in mobile responsive design.

No device can be ignored.

This is now an axiom; an unwritten law that none of us, regardless of profession, career or field of expertise, can afford to be trivial about. 

And yet, we find ourselves at the dawn of the 21st century’s 3rd decade still constantly solving problems with responsivity from one device to another. 

Lack of standardization of formats and screen sizes, code and platform updates, technological innovations and advancements, all belong on a long list of reasons why something in our design works wonderfully on our desktop screens, but appears as an absolute mess on a mobile device. 

We could ask how we correct or repair a fault in our designs until we’re blue in the face, only to face a similar situation with our next design.

Why? Because we’ve been addressing the problem from the wrong angle.

Solutions to design-specific responsive problems are what some would call a band-aid fix, a temporary solution. It’s as though the correct response to the red warning light suddenly appearing on your car’s dashboard, is to fix the red light.

Responsive design begins and ends with correct planning.

Importance of Planning in Responsive Design

In this business, no one in their right mind would set off on a project without a plan, a draft or sketch.

But having a plan is hardly the same as planning. Pam Didner, the passionate digital marketing guru, explains that “planning is an active way of discussing the goals, objectives, strategies, and tasks that we need to accomplish.” Plans, on the other hand, are merely the documentation of a planning process. 

Planning keeps you aware and focused on a multitude of aspects that would otherwise be neglected. It’s what generates and nurtures the kind of experience that draws your attention to those little details that will materialize as major complications further down the pipeline.

Taken from Adobe.com

Things to Address and Examine in Planning:

The following is a list of some of the issues that Hadas Golzaker and Ziv Geurts, two of our professional designers, address during their planning phase. 

  • Shifts in proportions and layouts
    Whenever defining proportions of things like size, padding, and negative space, etc., always set your values in one of 2 measurements:
    • EM a measurement equal to the computed font-size of that element’s parent. 
    • Percent (%). 

Screen-size will probably not be standardized anytime soon, if at all. Which is why need as much control as we can get on the sizing and proportionality of our graphic textual elements. Pixels are (comparatively) too accurate a measurement.

  • Font sizes are important, especially if you are measuring in EM and all the other visual elements will be relative to its size.
  • Buttons should be thumb-sized and placed in an area on the mobile screen that can be easily reached with your thumb (when holding the device in one hand).
  • Remember what works and what doesn’t work. Things like hover effects and video autoplay don’t work on mobile. 
  • White/negative space is more important when designing for mobile. Don’t clutter your screen; think streamlined and spacious.
  • Page load speed is far more important for mobile users, who are less patient. Avoid using heavy files and too many plugins. 
  • A/B testing on mobile is very important. 
  • Less content is better for mobile. Commuters do enjoy long engaging articles, but generally speaking, the majority of users will be happier when you make your point sooner rather than later.
  • Think of you audience. If your main audience is aged 15-32 years old or younger, you may want to focus on the Mobile UI design first as this will be the lead design and the more relevant to your users.
  • Knowing your audience, and your product is one thing, but there is so much of planning that rides on knowing your tools. 

Know Your Tools

Knowing your tools helps you identify possible solutions, and how to better organize the way that you work. Knowing which stages are dependent on others, in order to create a corresponding hierarchy, is exactly what you want to establish an efficient workflow. 

Proficiency of this sort is gained through experience but gained far quicker through the experience of others. 

Watching a tutorial or reading a blog post, whether at work or during your commute (like yours truly) is a great way to know your tools and proficient in their flexibility. Every time I find myself brushing up on new features or just watching how someone created something inspiring, I find myself off on my own daydream, imagining how I could use these ideas in my own work — and I highly doubt that I’m alone on this. This is all part of that focus that develops through the process of correct planning.

We’re going to kick start this by going over some solutions that users and ourselves use, in the hope that this will solve your current problems and inspire your future designs. 

Positioning Elements for Mobile Responsive View

When it comes to positioning sections for mobile responsive view correctly, we suggest avoiding setting values in pixels.

In the example below, we have our a section using 200 pixels of padding set either side of the text widget inside it. This works very well when viewing on desktop, but not nearly as well when tested in responsive mode for mobile view. 

Desktop view
Mobile view

Instead, we rely on either one of two solutions way back in our planning stages.

Setting values in percent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.

Desktop view
Mobile view

Another option is to control the section itself. This can be done in the Elementor editor, using the layout and advanced tabs. In the example below, we set the maximum width of the section, in the layout tab, to 750 pixels. Now, whatever we put in this boxed section will be constrained to the limit we set. 

Desktop view
Mobile view

It’s solutions such as these that eliminate the need to add any additional CSS code, responsive customization. 

Responsive Design: A Horizontal Approach

Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. 

An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along. 

Once we have made sure that section looking the way we want it to in desktop, tablet, and mobile views, we can move on to the next. 

Where possible, duplicate sections, columns or widgets, and update the relevant content; re-use them as foundations to build the other similar elements on the page.

In the example above, we have a landing page for a therapist’s website that we built horizontally, making sure an element such as a column and its contents, worked wonderfully across all devices, before continuing. This is also a great example of saving time by duplicating assets that work responsively. 

Change / Position Background Image

Certain background images, like that of the example below, may look great in the desktop view. However, it doesn’t take much experience to see how it wouldn’t work well when viewing the site on a mobile screen.

Here the designer solved the problem by choosing a different background image, to appear only in the mobile view of the site.

Desktop view
Mobile view

Replacing an image with one that works better with your mobile design is easily done in the Elementor editor. Clicking on the section, select the Style tab, then click on the device icon for the background image, and selecting the Mobile view.

Whatever we now select as an image (by clicking on the image box to access our media library) will only appear as the background image when viewing on mobile devices.

The same goes for all of the background settings in this category. Clicking on the device icon, then selecting the Mobile, in effect, tells the editor that whatever you set (positioning/centering etc.), remain unique and dedicated to only appear when viewed on the specified device.

This is not only true for images.

Create Alternative Section

As promised, we are only too happy to share our experience and insight with our community, who will no doubt be familiar with our next example. Well within the top area of our home page, we needed to come up with a solution to the 3-column text section. 

Desktop view

Rather than having this appear as 3 boring rows of text in mobile view, we decided to create an alternative section, with the text inside a slider widget.

Using the same principle we mentioned earlier, we hide the slider section on desktop view and do the same to hide the regular text section from mobile view. This is done by entering the Advanced tab, in the editor for the section, and under Responsive, we turned on/off the section’s visibility on the relevant device.

Mobile view

Many designers get stuck on the notion that everything must be exactly the same on all views. Please allow us to save countless hours of frustration, by admitting that it doesn’t have to. Get creative, and explore alternative ways to display your content on mobile.

Popups

Popups are an obvious challenge in mobile view, but only so long as somehow trapped in thinking that popups have to look and act the same way they do in desktop view.

In the example below, we’ve taken the basic elements of our desktop popup, and create an alternate popup, better suited to a mobile screen, that will appear as a strip running across my site. Not only will we define it as a sticky area, but also to only appear on Mobile devices. We do this by assigning this alternate popup template, and once it is published, and we’ll enter the Publishing Settings, select Advanced Rules, and in the Show on Device options, we’ll assign this popup to only appear on Mobile.

When it comes to design for mobile, think mobile. Some elements need to look completely different to achieve the same goal.

Content and Micro Copy

While there are certain content issues, such as length and number of paragraphs, they’re more related to layout than the actual phrasing of your written material. 

We do, however, need to consider the kind of content that is fashionably become known as micro-copy. 

CTA Button Options for Desktop & Mobile views (in Elementor Editor)

In our next example, we notice a desktop view containing a button that reads “Download Now”, something that would make no sense were it to appear in mobile view. 

We could duplicate the text widget, add something more mobile-appropriate, like “Get it now” and only show this text widget in mobile view. 

Similarly, we could create a big “Call me” button and have that appear only on mobile devices.

Again, this, like most examples, is something that could be avoided back in the planning. What works on desktop view, doesn’t necessarily work on mobile, and vise versa. 

Conclusion

Investing time in planning will undoubtedly save time and resources throughout the rest of your project. 

Correct planning means simultaneously reviewing and figuring out who your audience is, what devices will carry the lead design. Consider the elements that will be more problematic in responsive design. What could go wrong? How would you fix it? What tools would you use?

Don’t forget to sharpen your axe and get to know the tools that you use — use Elementor’s functionality. Use the responsive mode, and the tools to your advantage.

Liked This Article?

We have a lot more where that came from! Join 715,710 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Simon Shocket
Simon Shocket
With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that’s a lot to live up to.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

21 Responses

  1. Speaking of responsive design, why is there no option to move the input field for the Search widget full-screen skin? It sits slap-bang in the middle of the screen and on mobile it’s obscured by the on-screen keyboard. Can we have the option to move it to sit in the top third of the screen?

  2. Thanks for your help. In the case of the current web site the friend-clients had nothing other than a couple of pictures and lots of requested sections. So, yes, ideally you’d plan but e.g. as has been mentioned quite a number of times in the case of video on mobile, the customer most likely is very particular as to the view accross devices being the same and if you haven’t got grey hair already you get them because e.g. a navmenu behaves different depending on screen size, browser, machine etc. The menu is meant to be more functional rather than design, yet where the top line of the submenu falls might be very cherished (that doesn’t only apply to old people but even Millenials). I have been in print all my working life and of course on paper it’s static.
    You can educate yourself but not necessarily does the client want to (at point I frantically looked for fixed site/size option, before I realized that setting the screen width to 1920 causes rapid changes when viewed smaller, so went more to the default; the navmenu stays longer.

    I suppose eventually there will be workflows such as Pitstop in print that check everything for problems or automate settings. Obvious layering as you’d find in InDesign or others would help responsiveness setup. I found to my cost that a carefully set webpage with wrapround etc on the deskto destroyed when I used the same elements, attempting to make them behave different for mobile mode. It required a new set of design and keeping them as separate elements and then hidden/shown respective to viewing mode, like a computer, on or off, but not changeable

  3. When hiding content from specific devices (for example a huge hero image only for desktop view) is there a way to tell Elementor to not serve the large image for mobile devices? “Traditionally” this would be done with the element or srcset in – is this possible? Or coming soon? thanks!

    1. The message ate my code 🙂 the second sentence should read as:

      “Traditionally” this would be done with the element or srcset in – is this possible? Or coming soon? thanks!

  4. Simon, just today I started making some major changes to my mock-up’s mobile and tablet views. So, either I had a premonition today that I’d get response to some of the challenges I’ve encountered via divine hands (i.e. yours), or you may well have been the one who had a premonition that I’d be doing these changes today. 😉
    Thanks either way.
    You’re a responsive design saviour

  5. Hi,
    How do you make the sticky menu change size just like you did koshaparis.com ?

    I think it’s CSS. Would you know what code he used?

    Thanks!

  6. Excellent post, Congratulations Simon. This post was very well explained. I’d like to make a note of the contact form widget. When you try to align the send button to the middle or right side, it does not, the alignment only works if it is positioned to the left side.

    If I am wrong please correct me, it may be that I am doing something wrong, thank you very much.

  7. Perfect timing…I’m creating my very first website for my healing practice!! It launches in two days and my much younger girlfriend was just talking to me about mobile optimization!! Thank you for continuing to provide great information, as well as explain how to carry out the steps, helping us newbies create a website that looks professional!!

  8. Thank you for the practical and useful advice!
    Plan, plan and plan!!
    I figured out that I should plan and test before I save blocks as templates and reuse them in other pages. It saves lots of time.

  9. Thanks for these tips, Simon!
    I’m about to make my website more mobile-friendly and this just came at the right time. It’s already mobile responsive but as you’ve pointed it it may not need to look exactly the same as my desktop version.
    I need to play around with lay-out options and work on a more condensed, mobile-suited copy and this will be a good starting point for my planning!

  10. Hi Simon,

    Nice basic advice! What we run into however is the lack of landscape formatting. Moving from desktop to iPad portrait is a huge step and we have to code a lot to have it work for landscape. For us an in between step (iPad landscape, which also resembles a lot of other viewports, would be one of the most valuable additions. Perhaps that’s something to look into?

    1. Totally agree Tom. This is the main issue I have with Elementor’s generally excellent tools to control changes for mobile from a ‘desktop first’ design approach.

      To judge this exact option (especially landscape iPad Pro), I find myself frequently having to leave the Elementor Editor to review the appearance in a mobile emulator (e.g. Chrome Developer –> ‘Toggle device toolbar’). And then return to make any changes arising.

      That works, of course. But it’s a time consuming workflow…..

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 715,710 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.