I'm involved in a project for a redesign of an existing site. The Designer Team delivered us -the Engineering Team- four separate HTML/CSS prototypes of how the site should look:
- On a Desktop Browser.
- On a Table Device, a similar but simplified design of the Desktop View
- A High-Tech Smartphone, the design is mobile-app like and very different from the Desktop and Tablet designs. Also, less content is shown there.
- A Low-End Smartphone, a simplified version of the precedent design but still very similar.
My first impulse was build one HTML/CSS prototype using Responsive Web Design, and merge the prototypes made by the Design Team, but now i'm having some concerns:
- Merging disparate prototypes might produce low-quality code.
- We might be sending code/files to some mobile devices that they don't need.
- We need to handle the situation where -for example- some option must be present in Tablets but must be hidden in Smartphone. Using CSS to hide can be bandwidth waste, so maybe there's a need of some server side code.
Because of that, the idea of building two different Web Applications -or even better, handle two Views in a same web application using some server side Framework like Spring Mobile- was being considered. I am not an expert on Responsive Design, so I wan't to know what's the best approach is this situation or the standard way to tackle this problem.
PS: If it's worth saying, I'm building a Portal using WebSphere Portal as Portlet Container and building the Portlets using Spring Portlet MVC.