Design and CSS styles
Version 7.x > Design and CSS styles > Mobile Layouts and Responsive Design View modes: 
User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 10/25/2012 8:15:00 AM
   
Mobile Layouts and Responsive Design
As I read through the documentation here: http://devnet.kentico.com/docs/devguide/mobile_creating_mobile_pages.htm about developing for mobile, I don't see anything on what needs to be done with the master page templates. Right now all I see the documentation talking about is the content, not the master templates (header, nav, footer).

Is there any kind of example of how it works from end to end and not skip out on any parts? For example, how to create a simple site from scratch utilizing the mobile features in v7.

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 10/31/2012 9:46:52 AM
   
RE:Mobile Layouts and Responsive Design
So no one has used one or the other or even a hybrid version yet? Would really like to have some additional feedback from others before I jump in head first!

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 10/31/2012 9:59:37 AM
   
RE:Mobile Layouts and Responsive Design
Hi,

I would recommend you to watch a video by Thomas Robbins:
Responsive Design with Kentico CMS 7 – Are you ready?

I hope this one will help you.

Best regards,
Martin Danko

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 10/31/2012 10:23:12 AM
   
RE:Mobile Layouts and Responsive Design
Was part of the webcast and visit the slide deck on a regular basis. Still doesn't go into any great detail on how it all works together. In fact, its geared more toward responsive then a mobile layout or hybrid approach. And unfortunately the example they give in the slide of a Kentico 7 mobile site with responsive design doesn't work. Even if it did I wouldn't be able to see anything "under the hood".

Is there an installed template with v7 that demonstrates this as a whole? From what I see the mobile layouts will work perfect, if EVERYTHING is in a webpart. Most master pages don't fall into this category.

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 11/4/2012 6:16:50 AM
   
RE:Mobile Layouts and Responsive Design
Hi,

I think, that mobile website is mainly about different style. From v7 Kentico CMS recognizes a mobile device itself and it can automatically redirect the visitor to the optimized mobile site.

1. There is also one more presentation from Thomas.

2. A whole section in our Developers guide - Mobile development features.

3. + you can download a FREE book about Mobile development with Kentico written by Thomas and Karol.

I hope these sources will help you more.

Best regards,
Martin Danko

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 11/4/2012 1:59:26 PM
   
RE:Mobile Layouts and Responsive Design
So I've also looked at and downloaded everyone of those. The first one is from 2010 and has nothing to do with the new features in v7. #2 is only referring to creating a separate section within my site and redirecting specific devices to that section. Defeats the purpose of using Mobile Layouts or the features in v7. And the last one (book), again, does not reflect the new features in v7 that I want to take advantage of.

Thank you for the help and pointing out additional references. Although what I ultimately would like to know is how to setup the master pages to work with the mobile layouts in v7. The documentation in v7 shows how to modify the content to work with mobile layouts but not the actual templates.

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 11/5/2012 1:21:53 AM
   
RE:Mobile Layouts and Responsive Design
Hi,

I'm sorry if you haven't find necessary information. But you are looking for something very specific. However, I will discuss this with our technical writers.

In the meantime I've found these 2 articles:
1. How To: Add Mobile Pages to Your ASP.NET Web Forms
2. Mobile Website using Asp.NET Master Pages

Best regards,
Martin Danko

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 11/6/2012 9:49:32 AM
   
RE:Mobile Layouts and Responsive Design
Thanks Martin for the additional info. Again, these aren't specific to Kentico and the mobile features in v7. All I've been able to find on the mobile layouts for v7 are related only to content and nothing about master pages. I'd like to see a working template or documentation on how to setup your site from scratch AND utilize the mobile layout features in v7. There is nothing that I've found that documents this and with it being such a large and powerful feature it would be nice to see more documentation before one implements it. The info in your latest reply talks about standard asp.net programming and nothing to do with Kentico and mobile layouts.

Yes, it may sound specific although I don't believe it is. The documentation and webcasts show how the mobile layouts work but nothing on how they are implemented from beginning to end. Seems like the only part covered is the middle, which is very important, but so is the beginning.

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 11/7/2012 3:35:41 AM
   
RE:Mobile Layouts and Responsive Design
Hi,

I'm not pretty sure what is the beginning... mobile layouts are created in the same way as the other layouts.

1. Enable mobile development features
and
2. Create page layouts for devices
then simply
3. Switch device views

... or create a completely Separated mobile section

I'm very sorry if this is not enough for you but I'm afraid I can't help you more with this.

Best regards,
Martin Danko

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 11/15/2012 8:24:13 AM
   
RE:Mobile Layouts and Responsive Design
Hi,

A new blog post from Jeroen Fürst with a lot of sources about mobile layouts is out!

Best regards,
Martin Danko

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 11/15/2012 9:12:33 AM
   
RE:Mobile Layouts and Responsive Design
Thanks Martin. I'll post here what I posted there, maybe give a better understanding of what I'm not finding or am confused on.

When creating master pages, how would one setup the webparts for the main items (header, footer,navigation)? Conditional Layouts? Macros? Something else?

Here's a scenario:
Say I have 3 width ranges (or devices) I'm dealing with:
> 1028px wide (desktop)
750px - 1028px (tablet)
< 750px (phone)

This site has is fixed with at 940px, centered and has left vertical navigation. When I view on a tablet, I want to change the navigation to horizontal with smaller font, just under the header. When phone, I want the navigation to have a button with 3 lines and expand to vertical in-line (push content down) when clicked.

User avatar
Kentico Customer Success
Kentico Customer Success
kentico_martind2 - 11/19/2012 5:19:24 AM
   
RE:Mobile Layouts and Responsive Design
Hi,

As you can see, all is just about conditional/device layouts. You will be able to render different layouts with different CSS styles.

As you can see on this for example very nice page: http://www.northtec.ac.nz/ ... everything is just about general responsive web design.

Feel free to take inspiration in the process of learning from other websites like www.bridgespan.org/, take a look also at our blogs: Top 10 Kentico Websites for October 2012

Best regards,
Martin Danko