Media queries are great to change a multi column layout (for desktop) into a single column layout (for mobile).
Bootstrap is great for this. CSS rules are automatically applied without refreshing the page. @Wallace Turner How would you handle more complex UI where you may need to change grid data into a card view? So on desktop you may display the data using a standard table as the screen is very wide. But then on mobile you have to display the information using Card View UI. So the data would have to be contained in div’s? 1. Would you use server side logic to determine the screen size and output the relevant html? Or 2. Would you output both set’s html in the one request but choose what to display using css? I can see the pro’s can con’s with each. Using 1 the page weight would be smaller because you only send the layout you need but then it would require a page refresh if the viewport dimension’s change, portrait to landscape. Using 2 the page weight would be larger as you are sending both layouts but you get nice fluidity when the viewport dimensions’ change. Is there a better way to deal with this? Regards Adrian Halid From: ozdotnet-boun...@ozdotnet.com [mailto:ozdotnet-boun...@ozdotnet.com] On Behalf Of Wallace Turner Sent: Monday, 13 June 2016 2:56 PM To: ozDotNet <ozdotnet@ozdotnet.com> Subject: Re: Mobile enabling MVC application when applicable (and with the usual disclaimers) i like to use response web design [1] which at its core uses CSS media queries to layout the page based on the browser dimensions. Bootstrap may be useful for helping you achieve this goal. If you are not using Bootstrap already (and i suspect you are not) then a few simple media queries [2] may give you a few quick wins on your existing site; some time may be involved in making the mobile page 100% polished. hth [1]: https://en.wikipedia.org/wiki/Responsive_web_design [2]: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp On Mon, Jun 13, 2016 at 2:01 PM, Tom Rutter <therut...@gmail.com <mailto:therut...@gmail.com> > wrote: Hi Folks, I have an existing MVC application that I need to "mobile enable". Same functionality but the mobile versions of the pages will need to be different in look and feel. What are the current ways of doing this sort of thing? Detect the device type and redirect to the mobile versions of the pages? Cheers
