I have been doing some marketing of my site and people seem to want it to be mobile friendly (seems like a fair request). So my question is this: Do you have any tips for me when trying to make my site mobile-friendly? I have quite a bit of content and I’m not sure how to scale it correctly, any tips would be greatly appreciated!
Here’s a link to my editor if you want to check it out: https://bubble.io/page?type=page&name=index&id=meetngolf&tab=tabs-1
The simplest way I could think of is creating clones of the your current pages and elements and resizing them or adding smaller elements for the mobile version.
If I do clone the pages, how do I check if a user is on a PC or on mobile to know what page to send them to?
When you click on any page and the black box pops up you will find the drop down section that says “Mobile Version”, then could pick the mobile page.
I would say, as my number one piece of advice: Design with a mobile-first approach!
I know, I know, this isn’t a great option for you right now. You’ve spent a lot of time designing in a 1200px wide view. But I can’t exactly recommend you start from scratch if I’m being realistic, and I can’t recommend you moving forward with the current layout and design, if I’m being honest.
It may be a different story from other folks around here, but for me, changing my design view to 640px with a 20px margin on the left and right of a 600px wide column group made the most sense for designing a mobile-first app. Every time I place an object on the canvas I have to decide it’s purpose and it’s mobile factors (such as when this element gets hidden, when the margins collapse, etc). All objects I place within the 600px group are 520px wide with a left and right margin of 40px, each set with a minimum width of 30-50% (depending on the use case). After I am at a comfortable point in development of a UI view I jump into the responsive mode where I select which groups of elements can “Wrap to previous line if page is stretched” and which elements stay at a fixed-width of 100% max.
I wish I had an easier answer for you. My team and I have been developing the same app (or rather same idea, multiple versions of similar apps) for 9 months now, and 2 months into designing a 1200px wide view we transitioned to a 640px wide view for sanity sake. We know our customers will be using mobile a ton, so it made the most sense to figure out a mobile-first process rather than a mobile-second band-aid.
I can share more details of our approach if you’d like. FYI: Google, as the world’s leader in realms like this, are splitting (or has split?) their search engine into two parts: desktop and mobile SERPs. To me this meant planning, designing, developing and marketing a mobile-based app makes the MOST sense going into 2017. It doesn’t matter how well you can collapse a 1200px view app into 320px — the strategies for the two screen sizes are so different in every way. I say transition to a smaller viewport today rather than waiting. You will inherently design a better mobile app if every piece of data that goes into it is thought of in a mobile-first approach.
IDK how I can phrase my thoughts any differently than above. Feel free to reach out if you have questions on going in the mobile-first direction, I’ve learned a ton that I can’t succinctly share in the forums.
Wow… That was a lot of information. Thank you so much for the advice, we will definitely be in contact!
@philip thank you so much for this post. I’m very intrigued by this approach.
I’ve spent some hours designing a user profile page with mobile first approach, and my issue is that it takes forever to get the design the way I want when stretching out to desktop size.
Do you have some example pages to share, perhaps?
Very interesting post. As a matter of fact, When I was thinking of how to best design my site 640 made most sense for me too as it is kind of a “breaking point” to smaller and larger sizes. I am since back to 1200.
The reason for me was twofold. I placed all content in blocks. When designing for 640 they are in a nice vertical row. When stretching the page and some blocks went to the previous line there was a gap between a shorter block and the second row. On 1200 I can design in 2 rows which then nicely collapse into one on lower viewports and don’t have those gaps.
The second reason is that I also have a dedicated mobile page with hiding groups which gets added to the app stores via web wrapper which works quite well so far. So even though I have a design which looks good at 1600 and down to 340 I still have a mobile page with a more mobile app feel.
Designing in blocks and and using the grid have been two of the biggest take aways for me.
So I have the same question, but in my case, I need to know how can I make two versions of each page of my website, one if for the desktop version and one for a mobile version? Anyone knows how to?
You clone the page and then on the desktop page, select “Mobile Version” and select the appropriate page.
THANK YOU SO much. I just spent ALL day working when I should have done this. This is incredibly helpful.
For those looking for how to set up mobile versions of pages, here’s a quick video overview.
A few other tips:
- For inputs, it’s best to set the font size to 16px or greater. Otherwise, for users on Apple (iOS) devices, it may “auto zoom” in on the page, causing inadvertent clipping.
- Definitely spend time working in the responsive mode editor and simulate with different page sizes. (What looks good at 450px may not look good at 380px).
- You can use conditional logic that applies based on page width - say for an individual text element, you can adjust things like text size (ex. 32px to 24px) or the actual text displayed (ie. on desktop, show a longer description; mobile, a short version).
- For buttons and inputs, a good rule of thumb is to have your targets be at least 30px in height. Otherwise, it may be difficult to accurately press.
Dan (creator of LearnTo - a whole lot more Bubble tutorials there)
Adding one more thing. Erik Kennedy, a freelance UI/UX designer (with a fairly large following), has an really solid blog and newsletter.
If you’re looking to improve your UI/UX skills, his content is spot on. It’s concise, accessible and illuminating.
Your video is really helpful!
Sorry to be that guy who brings this up years later but I have a question along the same vein. What about making reusable elements mobile-friendly? There isn’t an option for “Mobile Version” like there is for pages.