How Responsive is your Website? Editor X Pricing Calculator

Building a responsive website can be a tough task, especially if you're working with multiple design tools and frameworks. Today, we'll dive into one specific example where we built a pricing calculator using Editor X and Figma – and how we could have saved some trouble by prioritizing responsive design from the start.

In this post, we'll cover:

1. A brief overview of what we did in the previous video

2. Why starting with the desktop version is crucial

3. Fixing the tablet version responsive design issues

4. Revisiting the mobile version of the pricing calculator

5. Takeaways and tips for building responsive websites

6. How Live learning at https://livelearning.editorx.io/editor-x-tv can help you build responsive websites and further your career

So, without further ado, let's dive in!

A Brief Overview of What We Did in the Previous Video

In a previous video, we created a pricing calculator design for a mobile device using Figma and then implemented it in Editor X. However, we missed working on the responsive design aspects for tablet and desktop versions. Now, we'll correct that oversight and develop the responsive design for these devices as well.

Why Starting With the Desktop Version is Crucial

Here's a tip when designing for multiple devices in Editor X: always start with the desktop version first, then work your way down to tablet and mobile versions. This is because the rules defined in site builders like Editor X are designed in such a way to advocate for this top-down structure. If you try to go mobile-first, you may encounter issues down the line with rule sets not applying correctly. We're going to remedy that now by first creating a desktop design for our pricing calculator.

Fixing the Tablet Version Responsive Design Issues

Once we've redesigned our calculator for desktop, we can then move on to adjusting the responsive design for the tablet version. To do this, we'll closely examine the transition between the desktop and tablet versions, making necessary adjustments to rules and position settings.

As you make changes to each version, keep a close eye on how they affect the other devices. Remember that making changes to one device can have a ripple effect on the others' designs.

Revisiting the Mobile Version of the Pricing Calculator

After we've completed our work on the desktop and tablet versions of the pricing calculator, it's time to revisit the mobile version. Even though we had an initial design, as we mentioned earlier, the changes we make in the other two versions will affect the mobile version.

Going through the mobile version again, double-check its responsive design and re-adjust any elements that may have changed due to updates in the other two versions. Remember, the goal is to achieve a seamless transition between all devices and a consistent user experience.

Takeaways and Tips for Building Responsive Websites

1. Always start with the desktop version first – as rules in site builders like Editor X are designed with a top-down approach

2. Be meticulous when working on different device versions to minimize issues during adjustments

3. Keep in mind how changes in one design may impact the other versions of your website

4. Ensure seamless transitions between devices for a consistent user experience

Live Learning at https://livelearning.editorx.io/editor-x-tv: Build, Design and Further Your Career

Building responsive websites is just one of the many skills you can learn at Live Learning. By joining our community, you can participate in monthly NoCode Design Challenges with prizes, access mentoring on building design businesses, and find resources to help further your career.

Whether you're a seasoned pro or just starting, there's something for everyone in this growing community. Don't miss the chance to collaborate, learn, and grow professionally in the world of design, business, and technology. Head over to https://livelearning.editorx.io/editor-x-tv and join us today!