Creating a separate Mobile Site

Community resources General
1

Hello,

I’m not very experienced in web design, so this may be an obvious question.

I already published a desktop website that is intentionally brutal and definitely not responsive.
Granted it is very painful to navigate on mobile devices and I knew that would be the case.

My initial plan was to make a completely separate mobile version from scratch so that I can recreate a similar retro style to the desktop version. My question is how do I actually go about creating a mobile-specific version of my site on Webflow?

Thanks!

2

Hey @kid_convalescent, are you actually wanting a completely different website for mobile devices (i.e. different content).

Or are you just wanting to make your already existing website responsive, so it becomes more mobile-friendly?

3

Hey Oli,

Thanks for trying to help out :slightly_smiling_face:

Because of the way the website is made, it would look gross if it was responsive for mobile. The whole homepage is basically gifs on a grid which you can click to navigate to various pages, and so on mobile, the best I could do is line the gifs fin a column.

I’m happy with how it looks on desktop, but I’m wondering If I can have a completely separate version of my site for mobile devices using the same domain etc, right here on Webflow.

I hope that’s clear enough :upside_down_face:

Thanks!

4

Hey @kid_convalescent,

Technically, it is possible, yes. You’ll just have to use the CSS property display: none;

For example, if you wanted a testimonial slider on your ‘desktop site’ but not on your ‘mobile site’ then navigate to the mobile breakpoints in the designer and set the slider to display: none;

However, it’s my understanding that this isn’t very good practice for a number of reasons, including page-load times and SEO.

But in terms of ‘is it possible?’, then yes, it is.

I hope this helps! :slight_smile:

5

As @Oli.Timmis mentioned, you can use display: none to hide elements on a particular breakpoint but there really isn’t an easy way with Webflow to create a completely different mobile site that’s served to users on smaller devices. I’d be surprised if you weren’t able to rework your site to work on mobile but it’s hard to say without seeing what you’ve put together.

Are you able to share an example of your current homepage and what you were hoping to achieve on mobile?

1 Like
6

Hey @kid_convalescent.

I do have an idea that you could probably use, but it would somewhat break some rules of proper semantic code structure, as well as potential page-load times, SEO…like @Oli.Timmis mentioned.

<section>'s can be placed inside <div>'s, so you could technically wrap all of your sections for your desktop site in a single <div>, name it accordingly. Then go to your mobile breakpoints or whichever you want the mobile site to start at, and choose display: none;.

Then, build your mobile pages all within a <div>, and name it accordingly. Since it will only be displayed at the mobile sizes you can build it in the corresponding breakpoint Webflow provides. Then only have it displayed at mobile sizes.

Does that make sense? It’s probably a horrible idea, but I don’t see why it wouldn’t work.

<¯\_(ツ)_/¯>

AC

7

I am also interested in this question. I recently launched a website letStel where I sell personalized books for kids. But I ran into a problem - the developers created a responsive design very poorly and because of this, the website has a high bounce rate. A friend told me that it would be better to make a separate mobile version, but I heard that a responsive design is now more popular and better for search engines. Can you advice which option will be more suitable for my website?