In this article, we wanted to discuss how we create highly responsive websites for all device types and screen sizes when building with Elementor. This is our individual agency workflow, and we've developed it over the past couple of years of operations.

If you think this could be helpful to your business and design, feel free to adopt it. Keep in mind that the majority of the websites that we build are fairly complex, and not simple five page corporate landings. Some of these steps are incredibly helpful when building out complex ecommerce shops or content websites, but could be glossed over to save time and money when building a simpler site.

Mockups

The first step to our responsive web design is mocking it out. We use Adobe XD to create website mockups, designing with a mobile first ideology. What this means is that we will go ahead and create a mobile mockup before even thinking about the desktop version of the site. 60% of all website traffic comes from mobile browsers, meaning that this is more important than getting desktop right.

Bit out of date, but this shows the changing trends

We will then take that mockup, expand it out to a tablet size, and then expand it out to a desktop size. The desktop version of the site can look fairly different from the mobile version of the site, but it has all the same sections and structure to reduce the number of DOM elements, and keep everything responsive.

By designing a mobile first mentality, we can ensure that that aspect of the website is perfect from day one. By using Adobe XD, our agency can easily collaborate with each other, share mockups for feedback, and even view them on personal phones while designing.

Specifically, when it comes to responsive website design for complex projects, mocking up the website statically is incredibly important. You can read our article about mocking up sites here: https://isotropic.co/is-making-a-website-mockup-worth-it/

Once the mockups are done, tested by user input groups, clients, and our agency team, it's time to actually create it on Elementor.

This is the most important aspect of responsive website creation: actually building it.

Responsive Website Creation With Elementor

When building out the website, we will define the basic structure in its desktop form first. However, we’ll end up populating the content from mobile to tablet to desktop.

By doing it this way, we’re able to ensure that this structure works on all sizes of screen, and by populating content with a mobile first mentality, we know that it will look good( from the start) on a cell phone.

To ensure everything looks good on the various screen sizes, we will use the built in “responsive hide” feature that comes with Elementor. It's on the advanced settings tab of the builder. However, you need to be mindful when hiding elements (this is just using CSS display:none in a graphical user interface), as all of those elements will still load. If you're hiding half of your web page on mobile, that can seriously impact the speed of your website, so you need to be mindful, and create the site to be as lean as possible.

The current version of Elementor ships with three responsive breakpoints. In some situations, these three breakpoints are more than enough to end up with a high quality responsive design. However, when designing with other tools we use up to six individual breakpoints. Elementor doesn't let us do this out of the box, so we're stuck using CSS media queries.

On that note, please vote to have the Elementor devs add addition breakpoints as a native feature:

Luckily, we use a ton of custom CSS as it's just faster for us to develop like this. However, if you're not familiar with CSS or don't like using it, there are a collection of plugins out there that allow you to add custom break points to your project. In the past, we’ve specifically used Piotnet add-ons (talked about in the previously linked article), as they have a ton of great third party elements, and the tool ships with a custom breakpoint utility.

However, we wouldn't purchase another Piotnet license just to add mobile breakpoints, CSS media queries are a quicker and cheaper way to do this.

Another tool that you can use when it comes to responsive design is something called CSSHero. CSSHero allows you to essentially generate a ton of custom CSS by using a nice graphical user interface. We've used this in the past, and it has been fairly beneficial to our workflow - you can read about our thoughts here.

When adding specific content elements, we try to follow all the responsive design best practices.

For example, we will size specific elements using VH, VW, or percentages. We try to avoid pixel dimensions whenever possible, as this can negatively impact the responsive aspect of a website on unique screen sizes.

If at all possible, we try to use SVGs for our icons and basic graphics on the site, as they are the most responsive. Images will deteriorate when blown up, and SVGs won't (not to mention that they are much smaller than most images, leading to a much quicker loading time).

We really like using REM for all of our typological elements. REM just takes the base HTML text value, and either expands or decreases the site. For example, the typical base font size for most browsers is 16px, so one REM would equal to 16 pixels.

Of course, these font sizes differ between browsers, especially when comparing desktop and mobile. For us, this is great because it allows us to get responsive text sizes that are visible and legible on multiple screen sizes.

There are a ton of articles on responsive design best practices on Google, so if you are interested just search for them. What it really boils down to is being mindful of your visitors, keeping things simple on mobile, and ensuring that elements are continuous between desktop and mobile devices.

Be sure to try to use relative measurements such as percentages and REM to ensure that elements properly scale up and down to meet the screen size requirements.

Mobile Speed Optimization

After we have a general version of our website, it's time to optimize it for speed. We have a ton of articles and resources on how to make an Elementor website load faster, but there are several things that you definitely need to focus on when it comes to mobile browsing.

Mobile devices have less power and slower internet, meaning that these type of sites typically load a lot slower than desktop websites. This is just a known fact, but it's something that needs to be mitigated as much as possible, or else your visitors won't make it to your website. Humans only have an attention span of 6 seconds, and your site should load in 2.

When it comes to optimizing Elementor for speed on mobile, the two most important things are fonts and images.

When using fonts, they should always be preloaded and using the .woff .woff2 file format. This ensures compatibility with most mobile browsers, and these file formats are small and quick to load. to properly optimize all of our fonts on Elementor websites, we either host them locally or use WP Rocket to preload them quickly.

Images typically have the most the largest negative impact on the loading speed of your mobile website. You need to ensure that they are properly optimized, and being served in next generation formats like WebP. This isn't really something that you can do manually, but Luckily there are tons of services out there dedicated to optimizing and converting images automatically.

Our go to tool to ensure that images load quickly on mobile websites is called ShortPixel. You simply need to install it, click the big red optimize button, and it will compress and convert all of your images, and serve them over a CDN to ensure the quickest loading time possible for your mobile Elementor website.

Testing The Site

By now, we have built out our website, ensured that it looks good on mobile, and optimized it for speed. The final step in our mobile Development workflow for Elementor is testing. This is by far the most important part of any responsive website project, as you now need to test that the responsive design that looks good on all types of screen sizes.

In the past, there used to be barely standardized screen sizes. You would have your large laptops, small laptops, tablets, and mobile devices. That would be about it period now, each laptop comes with its own screen size and aspect ratio, mobile devices range from incredibly long and tall screen sizes to short and fat screen sizes. there are a lot out there, and it is your job to ensure that your mobile design works well on all types of screen sizes.

To test our mobile responsive design on our Elementor website, we employ several different tools.

Firefox developer edition

The developer tools that ship with the Firefox developer edition are incredibly powerful, and easy to use. When it comes to responsive design, we use Firefox developer tools to emulate specific viewport sizes.

If we identify any major issues with this method, we can easily edit the CSS applying to the specific element, and see if we can make a quick fix.

Browser Stack

Browserstack is more oriented towards agencies and enterprise use, and it allows us to test our dev site between up to 2000 real devices and browsers. by running through the real devices and dozens of browsers, we are able to identify any issues that may be occurring on legacy devices or browsers. It costs $29.00 per month, and they also have a free trial . If you're working on a specific project that you think could use a tool like this, I definitely recommend taking a look at that trial.

If you're also a smaller agency or a freelancer, you can access reduced pricing coming in at $12.00 per month for 100 minutes of testing. Finally, if you have an open source project, which probably isn't the case if you're using Elementor, you can access free testing.

Responsively

This final testing tool is a recent addition to our toolbox, but is one of the most important aspects to our responsive Elementor web design workflow. Responsively Is an open source project that allows you to easily preview up to 30 preset device screen sizes, and use dev tools directly in the browser. There are a ton of unique and advanced features such as mirrored interactions between all of the screen sizes, a customizable layout, and a ton of devices. You also get a chromium developer tools console, so you can easily edit CSS like that.

This is the final tool that we use to identify any potential issues with the responsive version of our Elementor websites, and it's definitely something that you should be taking a look at. The tool downloads as a browser extension and standalone application. You click on the browser extension, and it opens up the website in the application.

Conclusion

Finally, once we have tested our responsive design built with Elementor through dozens of devices, viewports, and browsers, we're finally confident enough to push the changes live.

That completes our workflow for responsive design when it comes to Elementor. If you found this interesting, feel free to adopt it into your own routine. If you have your own workflow, feel free to post it in the comments section below as it may help other creators using element door.