240811 – MOOVPAD Web App – Absolute Positioning

22-09-22-01

Balancing Difficulty vs Function

The image to the left shows a screenshot taken back on 22/09/22, when I was just starting to learn about Blazor WASM. It shows the template Hello World app when the new project is created, complete with a side-bar nav menu and optional links at the top for key information. For a standard type app, where the main goal is simply browsing through information and interacting with form content, it makes life very easy.

However when the goals include matching the style of an app across different platforms and devices, incorporating design choices other than side-bar type nav, and building for the eventual integration of custom animation and effects, then traditional layout options (e.g. tables) are not really sufficient. Or at least, using those traditional styles needs someone with much more UI experience than I have to utilise them properly and achieve the desired effects, if it's possible. And so this is why I use absolute positioning for all of the MOOVPAD apps.

Screenshot 2023-09-29 212851
Screenshot 2023-07-28 171646

Absolute positioning requires much more work to get the desired layout and style built. That's because you literally need to manually enter the top and left starting position for each element, as well as width and height of the element. And if you then add the complexities of resizing windows, together with the need for the same code to adjust for different screen sizes (e.g. smartphone vs desktop) and the inclusion of animation effects down the line, you quickly end up writing many thousands of lines of code just to handle the UI layouts.

With the UI code already written for the MOOVPAD Web App on desktop/laptop, where window sizes can be larger than mobile devices, I now need to take each UI layout method, using absolute positioning, and write similar methods for smartphone and tablet devices. The rest of the code that deals with data and so on won't need to change of course. But it does mean that the UI code will likely be at least double what it is at the moment.

Thusly I am justifying the nerdfullness of my decisions 🙂

Stay awesome,

EMH

Screenshot 2024-02-25 164317

HOW MOOVPAD IS BEING BUILT

For the overview of how MOOVPAD apps are being developed, the reasoning behind particular decisions during development, policies, and more in relation to all the technical things, please see the link to the left.

This will be an ongoing work in progress, and will always be linked to the bottom of each upcoming Blog post.