In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor. Tip #1. Responsive Design Begins and Ends With Correct Planning. In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. 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. Tip #2. Positioning Elements for Mobile Responsive View When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. 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. Tip #3. 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. Tip #4. 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. Tip #5. 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. 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.
advertising for mobile responsive
websites would have us believe that
adapting your desktop design to a mobile
screen is the easiest thing in the world
being 100% 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 video 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 watch 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
watching
[Music]
