Is a single page structure better than a multi page structure?
We get lots of questions about which is better…
The easiest answer is, it depends.
In some situations, you have to use a single page app. In some, a multi-page is the better alternative.
To add some context, we put together a quick video covering single page apps…it shares our view on when to use this structure, why you should use it (or switch to it), and the beginnings of how to set it up.
I know there’s already discussion around this topic scattered around the forum in some shape or form, but for those of you who specifically chose one structure over the other…
What were your specific reasons for choosing the structure you did?
Just a little accuracy. it is not necessary to have its application in one page to be authorized Apple or Google store. If you have as in my case hundreds of ‘Repeating Group’, you have no choice but to have several pages otherwise experience on some phones will not be acceptable. In addition, your Bubble experience in the editor will be greatly affected. The good news you will see over time whether you need to switch to multipage mode. Great video @romanmg.
Single page will be better but you need to set a lot of state as well as planning.
The good part is the loading time is alot faster compare to multi page type.
Just sharing our experience
Great advice, @JohnMark! The specific goals for the app definitely come into play during the decision, but you’re right – there are a lot of important factors to consider (user and dev experience).
@loh.cher.e, good points…are there other reasons besides load time that you think make SPAs better, and do you think this structure is better across the board, no matter what? Or have you found exceptions (in your experience)?
Just sparking conversation and looking for some other opinions
I mainly opt for single pages when designing web applications with an all-in-one dashboard. Why? For the simple fact that many dashboard sections (which can pass as standalone pages) are complex and affect page speed significantly; continuously loading/reloading a section (in this case a ‘page’) is not ideal. I’d rather a longer load time upfront and a seamless and quick user experience than the opposite. You can optimise the user’s experience by using an engaging loading icon of some sort.
It will be interesting to hear what others have to say.
Just to add, aside from page speed, professionalism is another factor. When looking at great dashboard UI/UX designs from top organisations, they also adopt SPAs. So when designing dashboards, I aim to recreate top-level ones comparable to the best SaaS applications.
Having said that, there is a plausible argument that functionality > design.
@jamesbond do you have a few examples of great dashboard UI/UX design I could draw inspiration from ( can include yours )? I do not want to sidetrack the subject so if you are willing to share the examples a PM could also be an option.
@jamesbond these are good points regarding speed and ease of use in these situations. I think the debate for functionality > design might have to be a case by case basis depending on specific goals.
@jamesbond, if you sent along an example to @SenorPelota and want to share here, too, it could be a great showcase of the points you were making about using SPA structure for dashboards. If you have a multi-page example to compare, even better
Thanks for asking @romanmg. There is a plethora of lovely designs on UI/UX sites like www.dribbble.com to gain inspiration. The Bubble template section is also a great source, however, here are some great Bubble made dashboard designs:
Estimly - this form builder is almost guaranteed to tickle your fancy. A sleek and professional design that inspires great colour combos to think about. Plus it’s also mobile optimised! https://estimly.bubbleapps.io/
Airdev CRM - this is for the dashboards that place great emphasis on analytics. Straight away you see the data jump right at you. Another dashboard that has been mobile optimised. https://airdevcrm.bubbleapps.io/portal?tab=dashboard
I’ve enlisted some of my favourites but there’s more that templates you can gain inspo from! These dashboards are lightning quick as the creators of each dashboard respectively - @Thimo, @ZeroqodeSupport and AirDev (@vlad) have done well to factor in Bubble best practices.
With the Airdev dashboard, you can see there’s a slight initial load time, but once loaded, transitioning between views is immediate.
Their template looks/functions great! I think it also provides a great transition into a common topic…
We often get questions from people who are considering building SPAs about how to reduce that initial load time or at least give the user a better experience.
As @JohnMark mentioned, if you have hundreds of repeating groups, for example, having multiple pages could end up being necessary. @loh.cher.e also brought up loading time, and @jamesbond made great comments on this, too.
If you guys are willing to share some more insight (or if anyone else wants to chime in)…when building a single page app and considering initial load time, what are your own best practices that might be helpful for anyone considering this?
Great points, and like I’ve already mentioned, there’s somewhat of a tradeoff. Are you willing to sacrifice a longer initial load time for seamless and quick transitions between sections? Top-level SPAs like Google’s Gmail leverage loading icons/motions to optimise the user’s experience and mitigate bounce/report rates, while others engage the user with a story/game of some sort; it’s an opportunity to really get creative!
It was more than a longer initial load time, it was an unacceptable download time and freezes on old phones. That’s a point to consider. Lighter better. It is difficult to predict this kind of situation in advance. Once downloaded, the change between pages is quick.
Do you know how to implement such a loading animation? When just using the workflow ‘launch loader when page loaded is No’ the animations comes way to late…
Thanks @romanmg for yet again simplifying and explaining things. I wish I had access to this thread when I was first working out what and how to do SPA. I hate to think of how many hours I have spent reading threads with endless opinions and mixed replies that have left me more confused and wasting more time than necessary. I have two questions:
1. Screen size of mobile apps.
It is one thing starting wide (e.g. 1200px) and using responsiveness to scale down to mobile (easier) and another to start small (e.g. 320px) and use responsiveness to scale up (more demanding). What are the implications in terms of build time, Google SEO, etc. Is Google SEO impacted by whether you use a width of 320px (as I’ve seen you suggest) or 600px (as some on other threads suggest) or are both seen as mobile by the Google algorithm?
2. Popups in an SPA
I see a number of threads where people had difficulties making them responsive from small to large. I eventually discovered that I need to set the popup width to the widest size I want (e.g. 1200) and use ‘collapse margins’ to get my 320px content to stretch. But I’m wondering if using a 1200px popup in an otherwise 312px app negates all the hard work and potential Google gains made elsewhere. Is there any reason I ought to avoid popups, or any other element when aiming to produce a wrapped mobile app for the app stores? UPDATE - While I think of it, is there a way to stop all the scrolling on the page below a popup - can we somehow force the app to just scroll between top and bottom of the popup?
And for those reading this thread to learn how to approach SPAs, I recommend the following two threads from @petter (another expert bubbler).
@patricia, great questions! For screen size, I’m not sure how Google’s algorithm would treat those screen sizes differently. I’ve mentioned designing mobile apps at a width of 320px before because it makes it easier to cover most smart phone sizes since 320px is on the smaller end (and there’s less risk of cutting things off, which Google doesn’t like).
I think in terms of SEO, you’d be best using Google’s mobile friendliness testing tool (https://search.google.com/test/mobile-friendly) to confirm whether it has the “green light” in their eyes. An SEO expert may be able to weigh in here regarding the Google-related questions, though.
Yap we have some multi page project and a single page ordering app project.
Conclusion is the single page load alot faster.
Even now cloud already have cloud fair help to increase the loading speed. Single page design still the best in our opinion.
)? I do not want to sidetrack the subject so if you are willing to share the examples a PM could also be an option.