I’m attempting to migrate some of my already existing pages over to bootstrap 3, and I’m wondering the best design to do this.
On the non-mobile devices, I display a list of items on the left. If you click an item, it will either render a detail section or pop up a dialog.
On mobile, however, I need this to slide into a new edit page.
I’ve been googling how to do this with a single set of responsive bootstrap code, but I haven’t seen anything that quite matches what I’m looking for.
It would seem to me that I need completely different templates. One for mobile and one for non-mobile. Is there a better way to go about this, or is this the right approach?
You could use media queries which hide/display separate ‘sidebars’ That way you can keep all of your original content together and just have two separate link lists (one for mobile another for non-mobile) and have them do separate things.
You want to reduce the amount of duplicate code. If it is more thank just the actions of the links then you may want to consider a whole new template.
I think there must be different pages for mobile. The ideal experience on both are diffrent.
The screen size is so small that a fixed 25 pixel width is a much larger percent of the screen. On non mobile, collums are easier to read than long lines of text.
Another thing is touch screen for mobile. Much more common, especially with iPhones.
On non mobile, tabs can take you in order through a page. Assuming you have any buttons or text boxes, being guided through in the right order is nice.
It’s good idea to consider creating new templates for migration as the old templates rarley fit for responsive design.