SE Mobile Module Responsive Design with own .master file

I will be starting to use the mobile add on as of December 6th if everything goes well.

Now up to now I did make my own .master files all the time and then just used Sitefinity laoutcontrols to make different templates.

As far as I understand the mobile addon works best (only) with layoutcontrols used from within SF. Now this would let me to belive that to take full advantage of mobile responsive design you should make all the template (even a master) within SF

Anyone using mobile mobile responsive module heavy who can give me some tips on this.

Markus

PS: I liked to have my own .master file a lot - kind of felt good to have some stuff on my disk and not only in the database. Also sometimes i needed the code behind or wanted to add some .js. or .css myself.

Hey Markus,

You can use your own .Master file or a build in template it doesn't make a difference.
After all responsive design is about reflowing html by means of media-queries and classes.

If you're going to use your own .Master file and you want certain elements to be responsive by setting up reflow rules in the Sitefinity backend, your classes will have to play nice of course.

Take a Sitefinity 33%-67% 2 column layout widget. With the mobile add-on you can say a 2 column layout needs to reflow into 2x 1 column on Mobile.
What happens in the background is that media queries are added to layout-transformations.css so that class sf_2cols_1_33 and class sf_2cols_2_67 all become 100% width at a certain breakpoint.

However with the mobile add-on for each 'rule-group' you have the option to point to an external css file as well. 

 So you could have everything <400px point to markus-mobile.css and >400px <768px point to markus-fallback.css and inside those files use your own classes and media-queries.


---
If you stick to your own class names, the only thing your end-users wouldn't be able to use is the the visual reflow (system settings) as shown in the attachment.
---

Personally I use custom .master pages all the time, even with the mobile add-on. However I usually build out templates & pages (the stuff inside the PublicWrapper) inside Sitefinity.

It even works with Twitter Bootstrap, allowing you the option to use the Bootstrap responsiveness or use Sitefinity.

Sometimes it's best to hardcode certain regions/lay-outs into a .Masterpage but it only takes about 5 mins extra to simply re-use the Sitefinity class names, and by doing so ensuring the end-user can use the backend without limitations.

Jochem

Dear Jochem

Thanks for the great answer. Looking forword to working with the mobile module in SF

Markus