As a xpage developer I also need to do some styling from time to time. This isnt a big issue ofcourse unless you need to create an app which is also suitable for mobile devices. Now with the mobile controls at hand it isn’t a big problem developing a mobile website but what if you want to create a website which should look good on mobile and desktop devices and you don’t want to build a mobile and a desktop version of your app?
Here is where responsive webdesign comes in. I’m just learning this myself ( since I’m not a great UI guy.. ) and I already like it. In it’s simplest form all it comes down to is just to add some extra lines to your css files..
Lets say you use the oneui template and you want to hide certain parts when you are viewing the page on an Iphone. You only need to add the following line to the css:
@media screen and (max-width:320px) {
.lotusRightBar { display: none; }
}
As you can see the right sidebar is not displayed when the size of the screen is les or equal to 320px width. In this very simple way you can add your responsive design to the oneui template without having to create a complete new website for mobile. Unless functionality commands it ofcourse 😉