I started to code in Vaadin a month ago for a project at my University.
Created a web interface, which seemed OK with me at home. But today in the presentation at the Uni, it all went wrong;
Different computer with a beamer and another screen resolution, all components were overlapped and it looked pretty sh** out!
I now have no idea why. Can some body tell me what I did wrong.
What should I care about, if I want the UI to have a universal looking in all browsers and all resolutions without overlapping etc.?
I guess, I have done some mistake regarding sizing the components or the layouts containing these components. But I’m not sure. Maybe some one else out there who has faced the same problem or has any idea what I can do?
Well your problem generally sounds like the UI you made just didn’t fit in the screen resolution of your presention laptop. It probably was to small which caused some components to be “smashed” together so they looked just smaller or were shoved below other elements.
There isn’t really a one-step-general solution for this. You just have to go over your project (making your app more responsive) and fix these issues while testing the app against different resolutions/viewports (in most Browser developer tools you can change the viewport/resultion on the fly to debug your app. You can even simulate mobile device sizes).
If with some sizes your layout just doesn’t fit at all to the resolution (for example the size difference from desktop to mobile) you can even create seperate UIs and change between them according to the user-agent/screen resolution/Browser using an UIHandler.
The only “tutorial” i can think of would be to look up about Vaadin and building Responsive UIs with it (there is even an add-on called Responsive in the directory though i didn’t look at it yet).
A lot of weird styling errors could also come from using a different Browser (the worst stlying differences i can think of were with creating an app in “modern” browsers like chrome firefox with the newest version and then testing the app with IE8…did look totally different and wrong). So you should also test the app in different browsers too and try to make sure to present it on the best looking one
