Mobile Version Question

Hey guys, I have a simple question

My desktop version design is quite complex. I am still familiarizing myself with responsive design guidelines and came across this paragraph in Bubble’s responsive design tutorial page:

“If you want to have a radically different design for mobile, you can keep having a different page for a page. Just design another page and make this page the ‘mobile version’.”

From your experience, before I get started with responsive, would this be the way to go to avoid spending too much time fixing elements for responsive design? Would it be easier if I just created simpler mobile version alternative pages instead?

In general, changing a page that’s not designed to be responsive into being mobile-friendly can be a time-consuming job. In many apps it makes sense to have a simpler application that’s easier to navigate for mobile.

Unless you have specific reasons to avoid multiple pages (for SEO purposes for example), there’s no harm in setting them up on different pages. If you’re just starting out, designing for mobile can be a great learning experience too.

Thanks @petter

And to make sure I have understood properly, if I create a separate ‘mobile version’ homepage, this means that on mobile phones the site would automatically show that page instead of the desktop version?

Yes, that’s correct!

1 Like

Ok thats a relief. I think this would be a much better option for my use case. Thanks a million

1 Like

@petter I just started to test this ‘mobile version’ page out. I selected from the dropdown in the editor the page it is supposed to be the mobile version of, however, when I send myself the link of the original page to my iPhone 5 and open that link in my phone browser, I am still seeing the original page, not the ‘mobile version’ page I created.

Any ideas what might be the reason I am not directed to the mobile version?

Just got this figured out. I had things backwards…I put the mobile version page indicator on the page that is the mobile - I thought I’d be indicating this is the mobile version of the page in the dropdown.

However, you need to on the original page, select from the drop down the page that will function as the mobile version of the original.


That’s great. I think would be helpful for the OP.

1 Like

How does @bubble define mobile ? Is 768 px wide tablet also mobile ?

I think it is phones only…from what I am seeing a tablet (768px) is not going to the mobile page

Hi @carla , can success team make an comment about this feature ? And please add it to documentation cause not clear

1 Like

Hi Petter,

I was planning on creating a mobile version of my product pages, do you think this will impact my SEO ?

Thanks a lot
PS: sorry if this is off topic

Sorry for missing your post there, I just realized, months later! :confounded:

Since Google rolled out their mobile-first strategy, a separate mobile page is considered “safe” in SEO terms, in that Google will recognize it as the mobile version of the same page, rather than duplicate content.

That being said, it does place some demands on you as a developer. For Google to recognize that it’s indeed the same page, you need to be careful to maintain the content, meta tags and bi-directional annotation. In the long run, this can give a higher maintenance cost.

Officially, Google doesn’t “prefer” responsiveness over separate URL’s as far as I know, but personally I prefer to set up pages that rely on SEO responsively, as it makes the job of maintaining and analyzing the content easier. The only thing that would make me create a separate mobile page is if the mobile experience is very different from desktop (and even then I would first consider setting them up in separate groups as long as it doesn’t make the page too heavy)

For non-SEO apps (behind a login for example) I would use the same strategy, setting up a separate mobile page only if it made the UX significantly better for mobile users. But my threshold for doing so may be a bit lower, since I don’t need to consider SEO.

Generally, I think that the mobile vs desktop discussion is simplifying things a bit too much. There are not just “two” sizes you need to prepare for. With phones, phablets, tablets, laptops, big screens and even ultrawide screens that are growing in popularity (not relevant for most apps, but an interesting development that you can play around with), my approach is “how can I make screen size not matter”, instead of thinking strictly mobile/desktop. From this perspective, a fully responsive site makes the most sense.

1 Like

Thanks for your answer :slight_smile:

This topic was automatically closed after 70 days. New replies are no longer allowed.