Solving Responsive Web Design Challenges With Elementor – Monday Masterclass
Mobile responsive is one of the most popular sales pitches for WordPress themes, templates and plugins, but, as any professional website builder will tell you in practice, there is rarely anything simple about it. There is no clean-cut one-click transition from desktop to mobile screen.
In fact, the actual process has little to do with click or pressing buttons and far more with making the right decisions. Some elements have to be realigned or changed. Others completely removed, sometimes you’re forced to build an alternate section specifically for mobile or tablet devices. Making sure your site is mobile-friendly is becoming more and more critical to generating and expanding traffic, as Google continues to progressively shift more focus on mobile first indexing, a term referring to how Google predominantly prefers the mobile version of your content for indexing and ranking.
So, let’s see what the major challenges are when making your site mobile, responsive and learn the best ways to avoid or solve those challenges. Here we have a standard section with a paragraph of text. Looking exactly the way we intended to on our desktop. The paragraph text has been set with 200 pixels of padding on both left and right sides, which is fine until we test the design on a mobile screen using the mobile option in responsive mode and see this yes, not exactly what the client ordered.
So now. I need to fix something that could have been avoided if we had spent a little more time earlier on on planning the more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas. Accordingly, correct planning involves examining possible problems, as well as considering possible solutions and preparing for them.
Here, for example, we should have considered the fact that the scale of a mobile Green is far smaller than a desktop, and even then every phone has a different size screen. So, instead of setting the padding in pixels, we could set the value of padding in percent so that the padding will always remain the same relative to the overall screen size. Thanks to the responsive mode, we figured out that we should be setting the padding to 17 %, and lo and behold now it looks good on mobile to correct planning also means having other solutions at the ready, instead of tinkering with the paragraph, for example, if we Reset the values here we could go into the editor of the entire section and set its maximum width to 750 pixels.
This eliminates the need to add any custom settings that could get fumbled in the mobile view, while in the desktop view it keeps the paragraph contained in the box section, which we limited to 750 pixels notice that no additional CSS code or responsive customization was needed for Either one of these solutions – so this is the first guideline to follow planning – is essential: try to make the design choices that will help you avoid future problems for your sites in mobile view.
This here is a landing page for a therapist’s web site. Many designers finished designing the entire page. First then get frustrated trying to make the same design work as well in mobile view, making all those small adjustments to every element an easier way to go about. This is to use elementals functionality to our advantage. We should be designing our views, one section at a time as we go along once we have the section looking the way we want in desktop and mobile views.
We can duplicate the section column or widget and update the relevant content. Let’s do the same for this section by the way, this also takes us back to planning instead of completing your work, one view at a time, we should be making sure that each element works, duplicate it and reuse it as a foundation to build the other similar Elements on the page in this next example, this back, which looks great in the desktop view, is obviously no longer suitable when viewing the site on a mobile screen.
Here the designers solved the problem by choosing a different background image to appear only in the mobile view of the site. Back in our therapists page, I’m going to select the section and, in the editor, under the style, tab click on the device icon. For the background image, I’ll select, the mobile view, click on the image box to access our media library select my new image problem solved. Another solution would be to click on the device icon for the position settings and try the different positioning centering options till we get a focal point that suits our design in the mobile view bottom line.
If your images look weird in mobile view, use the options in the elements or editor to adjust their position etc or replace the image with one that works better with your mobile design. In this next example, one you’re, probably very familiar with – we see a three column section with text on mobile view. This would look like three boring rows of text. So, to solve this challenge, we decided to create an alternative section solely for mobile.
Instead of showing text in three paragraphs, we created a slider for the text, which will only appear in the mobile view. What we did was hide the slider section on the desktop view, and we can do the same here too in the Advanced tab in the responsive section under visibility, and we do the same to hide the regular text section from mobile view. This lesson is simple, but important: don’t get stuck on the notion that everything must be exactly the same on all views, get creative and explore alternative ways to display your content on mobile now.
Pop-Ups are an obvious challenge in mobile view. What we’ll be doing this time is making sure that my nice pop-up only appears in the desktop view. Where it looks good, then I can create an alt pop-up, better suited to a mobile screen that will appear as a strip running across my site and define it as a sticky area. I’ll set this pop-up to open only on mobile and this pop-up to open only on desktop when designing for mobile view.
Think mobile. Some elements need to look completely different to achieve the same goal. Finally content: another troublesome challenge of responsive design, for example. This button here reads download now microcopy. 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 use a big call me button and have it appear only on mobile again. This is something that could be avoided back in the planning. What works on desktop view doesn’t necessarily work on mobile view and vice versa, adjust your content accordingly, so we’ve covered planning for mobile-responsive views, reusing areas already customized for mobile, adjusting or replacing background images, choosing alternate elements, redesigning elements like pop-ups and adjusting content and like we Do every week there will be more detailed explanations and insight about all this and more in the article that we publish together with this article.
Let’s recap: we’ve seen the sorts of challenges that arise when making the transition from desktop to mobile devices. We’ve also seen solutions that we can employ to deal with these challenges. We hope you enjoyed this week’s masterclass and we’ll be back next week to discuss another topic relevant to designers, marketers and developers working in a wordpress environment so be sure to click the subscribe button below and tap that bell.
Otherwise, how else will you remember to read it on YouTube or our mobile responsive site till then, as always, we’d appreciate any comments inside and any criticism that you may have and obviously any helpful tips that could help other users thanks for reading
Google Citation Service
Contact us Today