This is a migrated thread and some comments may be shown as answers.

Phone vs. Tablet

27 Answers 709 Views
SplitView
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 11 Jul 2012, 04:54 PM
This might be a higher level question than just the SplitView but since it is the primary situation I will discuss I thought to put the question here.

With the 2012 Kendo Summer release, new tablet level widgets were introduced.

Does this mean that kendo is strategically divided into the following?

Web vs. Mobile (Phone/Tablet)

i.e. do I build mobile applications with kendo mobile like normal and just "spice" the tablet level widgets on the screen when appropriate and let kendo handle the rendering of these tablet level widgets on mobile devices?

Or is it reccommended to built a tablet specific view of your mobile application?

In addition, if I use the splitview widget, how will it react on the mobile device? Just not display and treat the panes like normal mobile panes?

27 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 16 Jul 2012, 02:06 PM
Hello Josh,

The tablet widgets would work on mobile phone devices as well. They are just not that appropriate considering the smaller display size. 

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Josh
Top achievements
Rank 1
answered on 17 Jul 2012, 12:11 PM
What is the recommended workflow when developing web(desktop) vs. tablet vs. mobile given these new widgets?

I understand it is up to the clients (us) to use the widgets as I deem appropriate but I was hoping for guidelines that follow the both the current and future roadmap of kendo development.

To look at it another way, if you guys were to display an full example of a kendo application(s) for the web/tablet/mobile for all the clients to see, would you break it down into 3 separate designs? 
0
Atanas Korchev
Telerik team
answered on 17 Jul 2012, 12:15 PM
Hello,

 If you want to provide the best user experience then yes we would recommend breaking the application to three separate designs. If you want to have mobile and desktop views - have two designs. If you want to develop only one application with one design - use Kendo UI Web widgets only.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Todd Anglin
Top achievements
Rank 2
answered on 17 Jul 2012, 07:54 PM
Hello Josh-

Building on Atanas'  input, Kendo UI does not endorse a "one-size-fits" or "write once, run everywhere" philosophy. We think this approach to HTML/JS apps tends to produce results that are average everywhere and great nowhere.

Instead, we want to help facilitate "tailored" experiences that look great on each form factor and device where they are run. Kendo UI Mobile now provides the essential building blocks you need to build experiences targeted at phones and tablets, allowing you to build tailored views while we automatically handle the differences between different platforms (iOS, Android, Blackberry, etc.) at the framework level.

At an architectural level, yes, we would promote separate views for Web, Phone, and Tablet, with a common (shared) JavaScript application and data layer. This will produce the best results and facilitate better long-term flexibility.

Hope this extra info helps. We'll get a full cross-plat application demo posted soon.

-Todd
0
Josh
Top achievements
Rank 1
answered on 18 Jul 2012, 05:09 PM
Atanas/The Infamous Todd Anglin,

Thanks for your responses!

Just wanted to make sure I was on the same page as I enjoy the kendo suite and will continue to leverage and in order for me to get the most out of these tools it is important for myself and other users to know how these architectural decisions are interrupted from the telerik point of view....

Keep up the good work, btw the new Documentation is vastly superior than the old!
0
Jason
Top achievements
Rank 1
answered on 18 Jul 2012, 06:39 PM
I have a follow up question. I have a separate view for phone and tablet (the tablet view has a SplitView, the phone view does not.) And both views provide the same functionality. How I determine if the code is currently running on a tablet or phone, so I know which view to display to the user?

Thank you,
Jason
0
Todd Anglin
Top achievements
Rank 2
answered on 18 Jul 2012, 06:53 PM
As always, it depends.

It sounds like you are serving your Kendo UI Mobile app from a server, and in that case it probably makes the most sense to let the server do the device detection (via UserAgent) and then return the proper HTML view to the browser. That HTML view will contain the necessary Kendo UI Mobile markup for either a Phone app or Tablet app.

In my own projects, I end-up with a structure that looks something like:

--Scripts
--Content
--Mobile
----css
----img
----script
--Tablet
----css
----img
----script

Where common or shared CSS and JavaScript live in the top-level Scripts/Content folders, and platform-specific CSS/JS live in their respective directories.

If you're trying to deploy one code base that will detect and adapt on the client, I think the solution would be a bit trickier. Let me know if that's what you're after and we can share some ideas.

-Todd
0
Jason
Top achievements
Rank 1
answered on 18 Jul 2012, 07:45 PM
Hi Todd,

I am building a Cordova/PhoneGap app and hoping to create a universal app which will install on both iPhone and iPad as well as Android phones and tablets. I had hoped the layout would have an attribute like "data-platform" but to detect the device type. Then I could specify the same "data-id" and Kendo would send tablets to the correct view. But I can do it manually if I can use javascript to determine if its a tablet of phone. I'm just not sure how to determine if its a tablet - some of the larger screen phones have higher screen resolutions than some of the older tablets and user agents aren't clear if its a tablet or phone. But I see Sencha Touch has an isTablet property which determines the device somehow. Any advice is greatly appreciated. 

<div data-role="layout" data-id="foo" data-platform="ios" data-device="tablet">

Thanks,
Jason
0
Todd Anglin
Top achievements
Rank 2
answered on 18 Jul 2012, 08:21 PM
Actually, Kendo UI does provide similar framework level properties for detecting the capabilities and type of device you're using:
http://docs.kendoui.com/api/framework/kendo#properties 

If you navigate to the support.mobileOS section, you'll see the property "tablet," which returns the string identifier for the tablet using your app (or false if the device is not a tablet). So, in your app, you could do something like:

if (!kendo.support.mobileOS.tablet) {
   // Initialize tablet app views
} else {
   //Initialize smartphone app views
}

I'll try to work on a more complete example to share. Hopefully this gives you a starting point. We'll also consider your suggestion for simplifying initialization of a universal at the framework level so extra code isn't required.

-Todd
0
Todd Anglin
Top achievements
Rank 2
answered on 18 Jul 2012, 10:18 PM
Here is a quick demo that shows a "Universal" app approach:

http://jsfiddle.net/toddanglin/YGUeJ/5/embedded/result/ 

Try using Chrome and the DevTools to change the browsers UserAgent (refreshing the page after making the change). You should see that when set to iPhone, a Phone app loads. When set to iPad, a SplitView Tablet app loads. 

The key is simply including both the phone and tablet starting views in the HTML, and then, based on the type of device, choosing one or the other to initialize the app:

$(function() {
    var app,
    //Must be mobile and tablet
    isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
    appElement = null,
    appLayout = null;
 
    //Get the correct app HTML container
    appElement = (isTablet) ? $("#tabletApp") : $("#phoneApp");
    appLayout = (isTablet) ? null : "phoneDefault";
 
    //Initialize the app with the selected container
    app = new kendo.mobile.Application(appElement, {
        layout: appLayout,
        transition: 'slide'
    });
     
    //Adjust visibility of proper app container (used to prevent FOUJUI)
    appElement.show();
});​

You can see more using the jsFiddle. Hope this example helps!

-Todd
0
Jason
Top achievements
Rank 1
answered on 18 Jul 2012, 10:45 PM
Thank you Todd. That example is exactly what I need. It will work perfectly for me.
0
Josh
Top achievements
Rank 1
answered on 24 Jul 2012, 09:05 PM
Todd, Thank you for your responses! I am increasingly leveraging kendo wherever I can but a recurring theme of late is integration. I am building an application that will span web/tablet/mobile as I have said in previous post and I am finding it painful to incorporate all of the kendo suites when taken into the context of tablet/mobile. Those 2 suites will display the native applications but when using dataviz inconjunction with it is it up to the user to display the dataviz theme black for the android template as it is the only 1 that displays well. It would be nice if telerik.. 1. post a full blown example spanning web/tablet/mobile to see best practices 2. Put some forethought into integration across all suites and add some automatic things that will make the experience more streamlined. Being a developer myself I understand the struggles it is to deliver projects in a timely fashion sometimes but if you were to take the full blown experience into account I think the users that are on the fence about using all of the kendo suites are more likely to convert and use them all IF and only IF using all 3 provides a "ready to go" streamlined/integrated experience. After all, 1 of the core competencies of the kendo framework is seamless integration so integration between the libraries should be a a use case that is considered early on. Hope all of that makes sense, at the end of a coding session and tired. Despite the tone kendo is looking better everyday..keep it up!
0
Todd Anglin
Top achievements
Rank 2
answered on 24 Jul 2012, 09:42 PM
Thanks for the additional feedback, Josh. Let me try to address your points in order:

  • DataViz Themes on Mobile: This is an interesting idea! We primarily focus on auto-adapting the Kendo UI Mobile widgets across platforms, so we haven't applied that technique to DataViz. Definitely something we can investigate. In the meantime, hopefully you're taking advantage of the kendo.support.mobileOS object to detect and change data viz themes as you prefer.
  • Integration Example: We've heard the feedback on this loud and clear. We're working hard to produce more large/medium size demos and complete integration demos across all platforms, as you suggest. That's high on our TODO list, and hopefully we'll have a few ready for our next release. 
Other than theme adapting and DataViz, if you have specific trouble using pieces of Kendo UI together, definitely let us know. In general, the pieces of Kendo UI are designed to work seamlessly together, so we like to hear where users are having trouble.

Thanks again for taking the time to share. Happy to you are enjoying Kendo UI overall!

-Todd
0
Dan Cornish
Top achievements
Rank 1
answered on 25 Jul 2012, 02:06 PM

Todd,

I've always wondered what Telerik's stance was on how best to integrate web, tablet, and phone in one web application.  Your responses and code samples have been fanstastic.  It's good to know what Telerik deems as best practice on the matter.  This has been one of the most informative/valuable forum posts I've come across.  If there's even more to unpack, you might consider a blog post.  That way it'd reach more folks. 

Also, +1 on having a working integration example.  For me, I learn the most from seeing how you guys (the experts) do things. 

0
Todd Anglin
Top achievements
Rank 2
answered on 30 Jul 2012, 09:22 PM
Thanks, Dan! Happy that this conversation and thread helped. We'll definitely do more in the coming months to further address the need for examples and best practice. I'll also elevate the content in this thread to our new and improve docs site shortly where we'll probably expand on the ideas even more.

-Todd
0
Brian
Top achievements
Rank 1
answered on 29 Sep 2012, 05:31 PM
Todd,

Thanks for the nice example on how to diplay a tablet versus phone view.  My only problem is that if I use your solution below, i get element id conflicts because i'm re-using views from my tablet view down in the phone root div.  I want to use the same javascript code base for both leveraging datasources, jquery selectors etc... but this breaks my app when both root divs are loaded in the dom. 

<div id="tabletApp" style="display:none;">
<!--Initial tablet mobile app views/splitview go here-->
</div>
<div id="phoneApp" style="display:none;">
<!--Initial phone mobile app views/layouts go here-->
</div>​

which leads me to my question:

is there a recommended way to remotely load the tablet or phone root div during app initialization, so both views are NOT in the browser's dom at the same time?

something like this:
//Initialize the app with the selected container
    app = new kendo.mobile.Application(appElement, {
        layout: http://myapp/phone  or http://myapp/tablet,
        transition: 'slide'
    });

Thanks in advance.
0
Josh
Top achievements
Rank 1
answered on 29 Sep 2012, 09:48 PM
In one my newer projects I am using ASP.NET MVC 4+ so I have the luxury of automatic different pages/layouts as I deem fit (IE mobile vs tablet views).

If you are doing this using only css + javascript I would probably think your best shot is to enable the necessary elements before application initiation using hide/display:none and then initialize the mobile/tablet based on the chosen div elements.
0
Brian
Top achievements
Rank 1
answered on 29 Sep 2012, 11:40 PM
Hi Josh,  yes...i too am using MVC 4 and Web Api.  I see where you can define display mode conditions in MVC 4 and it will automatically route you to the correct page based on extenion, but i wasn't sure of which user agent filters to set in the condition for all kendo mobile supported phones and tablets.  I'd love to use that aproach if i knew the filters to set.

Again, i would like to filter based on device type. for example:

Index.tablet.cshtml (kendo mobile supported tablets)
Index.phone.cshtml (kendo mobile supported phones)

Below is an example filter set in Global.asax Application_Start().  It would be great if someone would provide a complete sample filter for phones and tablets.  Telerik?  Can you help?
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("phone")
            {
                ContextCondition = (
                    context =>  context.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0 ||
                                context.GetOverriddenUserAgent().IndexOf("iPod", StringComparison.OrdinalIgnoreCase) >= 0
                    )
                    
            });

0
Josh
Top achievements
Rank 1
answered on 30 Sep 2012, 01:41 PM
I ran into the same issue, my project is mainly concerned with IPHONE/IPAD and the android is just icing on the cake.  I will tell you up front I am not concerned with Blackberry at all as I think that company is on the way out in their marketplace.

In my globa.ascx.cs class I have a few methods that I use:

private static bool IsMobile(HttpContextBase context)
        {
            //return (context.GetOverriddenBrowser().IsMobileDevice || context.Request.Browser.IsMobileDevice);
            return context.Request.Browser.IsMobileDevice;
        }
        //ensure blackberry, iphone, android
        public static bool Mobile_ContextCheck(HttpContextBase objHttpContextBase)
        {
            string strUserAgent = objHttpContextBase.Request.UserAgent;
            Regex strBrowser = new System.Text.RegularExpressions.Regex(@"android.+mobile|blackberry|ip(hone|od)"RegexOptions.IgnoreCase | RegexOptions.Multiline);
            
            if (IsMobile(objHttpContextBase) && strBrowser.IsMatch(strUserAgent))
            {
                return true;
            }
 
            return false;
        }
 
        //ensure TABLETS
        public static bool Tablet_ContextCheck(HttpContextBase objHttpContextBase)
        {
            string strUserAgent = objHttpContextBase.Request.UserAgent;
            Regex strBrowser = new System.Text.RegularExpressions.Regex(@"ipad|blackberry|android"RegexOptions.IgnoreCase | RegexOptions.Multiline);
            int iTabletQualifyingSize = 1000;
 
            //Determine if dimensions are 640x480 (generic size that is put in there for desktop and some tablets)
            bool isGenericTabletDesktopScreenSize = (
                (objHttpContextBase.Request.Browser.ScreenPixelsWidth == 640 || objHttpContextBase.Request.Browser.ScreenPixelsWidth == 480) &&
                (objHttpContextBase.Request.Browser.ScreenPixelsHeight == 640 || objHttpContextBase.Request.Browser.ScreenPixelsHeight == 480));
 
            /*LOGIC
             * 1. Determine if IPAD
             * 2. Next determine if Blackberry | Android
             * 3. If 2 == true, judge tablet based on screen size/width
             *      a. If 640x480 OR 480x640 (generic size reported), must be tablet
             *      b. Otherwise judge if width OR height > threshold qualifying size
             */
            if (strUserAgent.ToUpper().Contains("IPAD") ||
                (strBrowser.IsMatch(strUserAgent) &&
                (isGenericTabletDesktopScreenSize ||
                (objHttpContextBase.Request.Browser.ScreenPixelsWidth >= iTabletQualifyingSize || objHttpContextBase.Request.Browser.ScreenPixelsHeight >= iTabletQualifyingSize))))  //if vendor AND size is big enough
            { 
                return true;
            }
 
            ////For tablets, must be mobile AND meet a min size requirement
            //if (strBrowser.IsMatch(strUserAgent) && //is particular tablet vendor
            //    (objHttpContextBase.Request.Browser.ScreenPixelsWidth >= iTabletQualifyingSize || objHttpContextBase.Request.Browser.ScreenPixelsHeight >= iTabletQualifyingSize))
            //{
            //    return true;
            //}
 
            return false;
        }


Then in my App_Start Method I have:

 // Enable the mobile detection provider.
            //HttpCapabilitiesBase.BrowserCapabilitiesProvider = new FiftyOne.Foundation.Mobile.Detection.MobileCapabilitiesProvider();
 
            /*********CUSTOM VIEW MODES
             * 1. Normal View
             * 2. Tablet
             * 3. Mobile
             * ***/
 
            /*MOBILE*/
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Mobile")
            {
                ContextCondition = context => Mobile_ContextCheck(context)
            });
 
            /*TABLET*/
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet")
            {
                ContextCondition = context => Tablet_ContextCheck(context)
            });



Now the only library that I integrated with was 51.Mobie.Foundtation's free library.   It can give you the device screen/width and some other properties to help you detect devices.  They DO have a IsTablet method but it is in the paid version of their library so you can buy that you like.  I have tested for awhile and the above code is working well and I do a screen size/measurement test to decide vs android phone vs. android tablet (basically if either the screen width or height exceeds a size, i am looking at a tablet).

Detecting the iphone/ipad is easy as they use thier keywords.  Let me know if that helps you out.
0
Brian
Top achievements
Rank 1
answered on 30 Sep 2012, 02:56 PM
Josh, this is exactly what i need!  Thanks so much for sharing!  I'll also check out the mobi service.  I sure appreciate it!
0
Richard
Top achievements
Rank 1
answered on 05 Nov 2012, 08:02 PM
Hi all,

I am a relative newbee to x-platform apps so please excuse any ignorance.

I am having trouble detecting the difference between an android cell phone and an android table using kendo.support.mobileOS.tablet property.  This returns true in the ICENIUM (a nifty hybrid mobile app IDE from Telerick http://www.icenium.com/) for both the Android and Android Tablet emulators.  Is this just a bug in ICENIUM or in the property itself.
It seems to work fine for iPad.

I am trying to get my management sold on Kendo, and ICENIUM and am developing a quick POC.  Would be great to take it all the way.

Thanks
Richard
0
Daniel
Top achievements
Rank 1
answered on 07 Feb 2013, 04:23 PM
Thank you for this jsfiddle

I tried to integrate this solution inside a phonegap web app. My plan was to try this solution together with remote templates and views defined in external files. But i'm, already stuck with implementing this inside an html app. I just copied the js and the html inside a fresh kendo ui mobile project. It is working in Firefox but not in Chrome, Safari, IE nor on the iphone or android device.

Could you tell me what I'm doing wrong?

Here is the project:
https://github.com/Devthias/kendoPhoneTablet.git

Thanks a lot!
0
Josh
Top achievements
Rank 1
answered on 26 Feb 2013, 02:27 PM
UPDATE:

Just wanted to update that because I see such inconsistent sizing numbers reported I am judging the tablet vs. phone view within ASP.NET MVC based on isMobile.  For Android they have said that for tablets that future anrdoid devices will not have the mobile keyword in their userstring.

Judging based on the userstring only will be the better solution in the long term.

Of course if you want to pay someone like mobi for their detection that is an even better solution but for those that do not wish to pay I suggest using the userstring and not screensize xy report to the server.
0
Michael
Top achievements
Rank 1
answered on 18 Mar 2014, 07:02 PM
Hi Todd,

I've been looking for good web/tablet/mobile adaptive examples and ran across this thread. Could you post a link? I've been through the recent documentation but having a hard time finding a full example.

Thanks,
0
Sebastian
Telerik team
answered on 19 Mar 2014, 08:56 AM
Hello guys,

I think you will find the information summarized in this documentation topic helpful.

Regards,
Sebastian
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ben
Top achievements
Rank 1
answered on 02 Sep 2014, 10:48 PM
Hi Todd,

When I tried this, the content of the views did not display, as display value remained as display:none;.

I then tried this to rectify that:

function showLogin() {
    //clearLogin();
console.log("showing");
if (!kendo.support.mobileOS.tablet) {
   // Initialize tablet app views
$("#tabletApp").css('display','block');

else {
   //Initialize smartphone app views
$("#phoneApp").css('display','block');
}
}

But it didn't work because it did change the view to display:block, but then inside the view there was a container div that had display:none;

How to I make the display:none change to display:block for the correct view depending on if a tablet or phone is being used?

Thanks!
0
Ben
Top achievements
Rank 1
answered on 02 Sep 2014, 10:50 PM
Sorry, what I tried, was incorporating Todd's JSFiddle demo into my own app. 
Tags
SplitView
Asked by
Josh
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Josh
Top achievements
Rank 1
Todd Anglin
Top achievements
Rank 2
Jason
Top achievements
Rank 1
Dan Cornish
Top achievements
Rank 1
Brian
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Sebastian
Telerik team
Ben
Top achievements
Rank 1
Share this question
or