Tablet and Mobile Design in Editor X | Wix Fix

Hey guys! I hope you're having a fantastic day. In today's blog post, we're going to be diving into the wonderful world of designing tablet and mobile views inside of Editor X. If you haven't yet checked out our video on creating the desktop version of the brand new Wix Fix website, I highly suggest you do so. You can watch the video here. I shared all of my tips and tricks for creating the most stunning websites in Editor X, and a lot of those functions will be applicable to tablet and mobile views as well. If you don't watch the video first, don't worry, but you might find yourself a little lost. Anyway, let's dive in and create an amazing tablet and mobile experience!

Before we begin, here's a quick reminder: livelearning.editorx.io is an awesome resource for mentoring on how to build design businesses, further your career, and even participate in Monthly NoCode Design Challenges with Prizes! Make sure to check it out and join the community. Now, onto designing mobile and tablet views.

Preparing for Tablet Breakpoint Design

After ensuring that the desktop view looked great on all screen sizes, it's time to switch over to the tablet breakpoint. Once we click on the tablet icon, we'll notice a few things happening in the header area: there's our logo, the menu, the container with the cart button, and the hire us button. You'll also see the mobile menu icon sitting behind the logo.

At this point, the header might start looking a little cramped since all of these elements take up quite a bit of space. So to make sure everything stays clean and visually appealing, we're going to opt to use the mobile menu icon instead of the other elements.

Designing the Tablet Breakpoint

To get started on actually creating a design that works for tablet devices, we'll follow these steps:

1. Remove unnecessary elements: First, let's go ahead and get rid of the cart and Hire Us buttons. Since we will be using the mobile menu for tablets, these buttons will already be included as part of that menu.

2. Switch the menu: Next, we'll need to switch out the desktop menu for the mobile menu. To do this, click on the desktop menu and toggle the visibility off for the Tablet breakpoint. Then, click on the mobile menu icon and set its visibility to on for the Tablet breakpoint. Now, the mobile menu button will display when the site is accessed from a tablet device.

3. Resize and position the logo: As you may have noticed, the logo takes up a lot more space on a smaller screen. To fix this, simply click on the logo, resize it, and drag it to a position that's visually appealing for the Tablet breakpoint.

4. Adjust other sections accordingly: With the header now in a good place, it's time to adapt the rest of the website for tablet screens. This involves resizing and rearranging different elements, such as image and text. Make sure to ensure proper spacing, font size, and image size, so it fits nicely on the selected breakpoint.

Creating the Mobile Breakpoint

With the Tablet breakpoint design complete, the final step is to create a design suitable for mobile devices. The process for this is similar to what we did for the Tablet breakpoint.

1. Resize and position the logo: As with the Tablet breakpoint, we'll have to resize and reposition the logo for a smaller screen. Just click on the logo, resize it down, and place it in a suitable position for mobile devices.

2. Adapt the rest of the site for mobile screens: This involves resizing and rearranging all elements on the site, making sure they're suitable for the mobile breakpoint. Ensure that images, text, and other elements are spaced properly and create a visually appealing layout.

And that's it! With a few simple adjustments, your website should be fully optimized for different devices, providing a seamless and stunning design on desktop, tablet, and mobile screens.

Now that you've got the hang of designing for multiple breakpoints in Editor X, don't forget to join the livelearning.editorx.io community for mentoring, design challenges, and resources on building design businesses and furthering your career. The more you learn, the better you get, so don't hesitate to keep improving your skills!

Do you have any tips or tricks for designing in Editor X? Share them in the comments below!