Streaming live at 10am (PST)

Custom / Separate Mobile site


#1

Hi All, I wanted to know if there is a way to create a separate mobile version of my website?

Just to be clear, I am not asking about how to customize parts of my website to be visible only on desktop or mobile etc. What I am asking is if there is a way to create a different site (code, images, etc) for mobile (acessed when browser window is @ mobile resolution).

Please let me know if my question is unclear or you need more info from me.

Assuming you don't need a link to public share of site since this is general question, but if helpful I can post ofcourse.

-Thank you!



#2

Webflow is designed to prevent this type of use, so I'm not sure what benefit would come from having two separate sites.

Out of curiosity, what feature are you looking for that can't be achieved using the same website?


#3

my website is mostly made up of video files. Background videos, vimeo links etc. I don't want to have these on mobile because it would be too slow to load/ view etc.
For mobile I want to build a diff user experience with images etc. Going through my whole site and turning off all background videos, links etc. and then adding images in layout just for mobile etc..would be much easier to have custom mobile solution!


#4

You could build a dedicated mobile website or "adaptive" web app; creating a separate website tailored specifically for mobile. Using a mobile redirect code that you would place in the Head Section of your Webflow site.
This code snippet will detect if your visitor is on a mobile device and would automatically redirect them to the custom mobile version of your site. The drawback is that this is literally a separate website specifically for mobile. So you will be paying hosting for Webflow site AND for the mobile site. Another drawback is that you have two sites to maintain.
Adaptive design is truly far more superior than responsive design in that you can create custom user experiences for each device size. However it's a lot more work to maintain.
With my previous company, we specialized in this but ultimately responsive design ends up winning due to the fact that it's easier and more cost effective to maintain one website that resizes content across devices. Bigger companies like Nike, who have the money and resources, use adaptive design.


#5

Thank you so much! Can you provide code or link to what this mobile direct code would be?


#6

@PageMill_1_0

Did you know you can click on the any element within your site build and go to the settings icon for that element and choose what devices it will show up on? Literally any element, a single div, a heading, a single paragraph...

So if you have a video you want shown on the desktop and tablet versions of the site, but not on the phone sized media queries you can handle that very easily without adding classes & declaring a display: none to deal with it. Just click on the settings, and toggle the "visible on" buttons to suit your need.

Now, as a suggestion to swap out some of the more resource intensive content for much smaller/optimized images. You can just as easily duplicate that exact same chunk of content/css that you've already made fully responsive down through all devices, hidden on the two phone sized resolutions, and just change the background element from a video to an image & set it to show on the phone sized media queries only.

Webflow makes this really easy.


#7

I've heard that Webflow still makes a call to these media queries, so essentially they are still being loaded but are "hidden". Do you know if this is the case? I'm not sure


#8

Most platforms that you would use to build a mobile specific site will generate the code for you. I used to use Fiddlefly, it's an insanely awesome platform for making mobile specific sites. But again, I don't suggest maintaining two sites at once unless you truly have the time for it. Otherwise stick with responsive and figure out how to bend the platform to your will.


#9

Syndicate15 - thank you so much for your insight & help. Making a separate mobile site is what is best for my needs and your comments have been great.

Also I was able to find the code for mobile redirect here:
http://www.inmotionhosting.com/support/website/redirects/mobile-redirect


#10

Awesome, glad you found a solution! What platform are you going to use to build the mobile site?


#11

Since my main issue is really design & content being unique to mobile version Webflow allows me to do everything I need. However I'll be looking at Fiddlefly in the future to see what it offers!
Thanks again! You're input was invaluable & really appreciated!


#12

Why do you need a mobile redirect code if Webflow will achieve what you need through responsive design? How are you planning to use the redirect that you found?


#13

maybe not explaining my goals well... A responsive site is not what I needed. The design/layout/content etc for mobile version of my site I want to be unique. Customizing or turning off every section of my webflow website & then tweaking for responsive mobile did not make sense. It was better use of my time to build separate website in webflow @ mobile size & then export the code for desktop & mobile & ftp to my hosting account. I put redirect code in header & it goes to folder that contains the mobile site. Works well.


#14

Ah, very nice. I wasn't aware that could be done. Awesome!


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.