Welcome Guest, Not a member yet? Register   Sign In
PC and Mobile based browser application development using CI.
#1

[eluser]UdayD[/eluser]
Hi,

I am about to start an web application which is to be developed using CI and is intended for the PC and mobile users. So for starting the project I needed help and had following doubts.

1) How can I go about detecting the devices/browsers through which the requests comes?

2) How can be the html and css changed according to the user(mobile/ipad/pc)?

3) Is there anything which i need to take care from server stand point?

4) Does CI provide some library to handle these kind of application or any library which will be useful for this application?

5) Do I have to use jQuery Mobile as well and can it be used with CI?

6) As there are n number of devices in the world, which devices can be targeted the most, i.e. for which devices(smartphones/tablets)? I understand that will depend on application and the user pool which will use it. But still we intend to do it for devices which are largely used.

7) Can anyone provide any links/tutorial/examples/sample codes which will help to start the work?

8) Any other suggestions/comments/ideas which you might have are welcome.

This is my first mobile based project, so please forgive me if there is any lame question asked.

Thanks,
Uday
#2

[eluser]TheFuzzy0ne[/eluser]
[quote author="UdayD" date="1365576915"]Hi,[/quote]

Howdy! Smile

[quote author="UdayD" date="1365576915"]1) How can I go about detecting the devices/browsers through which the requests comes?[/quote]

http://ellislab.com/codeigniter/user-gui...agent.html

[quote author="UdayD" date="1365576915"]2) How can be the html and css changed according to the user(mobile/ipad/pc)?[/quote]

There are quite a few ways you can do this. You can add the logic to your view to include the right CSS, or you can use themes. There are a lot of good template libraries out there, such as https://github.com/philsturgeon/codeigniter-template

You may want to write one yourself if you require specific functionality.

[quote author="UdayD" date="1365576915"]3) Is there anything which i need to take care from server stand point?[/quote]

I don't think so. This can probably be taken care of through the logic in your app.

[quote author="UdayD" date="1365576915"]4) Does CI provide some library to handle these kind of application or any library which will be useful for this application?[/quote]

Not natively, no.

[quote author="UdayD" date="1365576915"]5) Do I have to use jQuery Mobile as well and can it be used with CI?[/quote]

[quote author="UdayD" date="1365576915"]6) As there are n number of devices in the world, which devices can be targeted the most, i.e. for which devices(smartphones/tablets)? I understand that will depend on application and the user pool which will use it. But still we intend to do it for devices which are largely used.[/quote]

I have little trouble viewing most Web sites that aren't designed for mobiles, on my Smart Phone. I would assume that most tablets will display normal Web sites just find, so you might be better of simply designing a theme for mobile users and one for non-mobile users. That would certainly be a lot easier than having to design themes for many types of device.

[quote author="UdayD" date="1365576915"]7) Can anyone provide any links/tutorial/examples/sample codes which will help to start the work?[/quote]

Unfortunately not. I've never actually designed a Web site to work with other devices.

[quote author="UdayD" date="1365576915"]8) Any other suggestions/comments/ideas which you might have are welcome.[/quote]

Browse the Internet. There a lots of sites around that cater for different devices. See how they do things.

[quote author="UdayD" date="1365576915"]This is my first mobile based project, so please forgive me if there is any lame question asked.[/quote]

I don't think there's anything wrong with your questions. It's better to get it right to first time than it is to spend a month developing a site, only to realise you've gone about it the wrong way.
#3

[eluser]boltsabre[/eluser]
>> 1) How can I go about detecting the devices/browsers through which the requests comes?
CI has built in user agent detection, but it's pretty basic. It's in a class, called... wait for it... User Agent.
But if you want something more robust just google it, it's heaps of options out there.

>> 2) How can be the html and css changed according to the user(mobile/ipad/pc)?
Well, that all depends on what you are trying to do...
Designing a responsive website means that the html does not change at all, but the css is altered by using media queries. However, this may not suit your needs... I find responsive (despite that fact everyone raves about it) design rather limiting... do your users use the mobile site exactly the same as the pc version? I doubt it... if you look at most large/successful websites, the vast majority don't use responsive design on the mobile site, they have a dedicated mobile. You'll have to decide for yourself what you want to do, again, research on google if you are wondering what I'm talking about, it's a massive area and you could have an entire forum (not just this thread) dedicated to mobile design.
As for the technical part, it would be something like this:
In your controller, hook, MY_Controller, helper, library, wherever, you do your user agent detection. Then if you wanted to load one view for mobile, a different for tablet, and another for pc, it would be something like this in your controller:
Code:
$user_agent = ....(user agent detection goes here...)
if ($user_agent == 'mobile'){
   $this->load->view('someview_mob');
}elseif($user_agent == 'tablet'){
   $this->load->view('someview_tab');
}else{
   $this->load->view('someview');
}
But if you have 100 controllers, it gets tedious doing this in every controller, so you'd want to make a helper or something to keep your code DRY.

You can also use the above "if/elseif/else" statement directly inside your view files to load different things...

There are many different ways you can do all this. I suggest doing a little test site first, have a play around with it, find some of the pitfalls... get your hands dirty in a little test site and you'll save a lot of time later in your live site!!!

>> 3) Is there anything which i need to take care from server stand point?
Nothing that I can imagine... user agent detection is done inside your php scripts, I can't see anything that would affect servers... but I could be wrong ;-)

4) Does CI provide some library to handle these kind of application or any library which will be useful for this application?
Not off the top of my head... google around, there may be a custom library on git or something, make use of google, it's your best friend!!!

5) Do I have to use jQuery Mobile as well and can it be used with CI?
You don't have to use anything that you don't want to! I haven't used it ever, but I cannot see it being a problem with CI, just include/call/load from a CDN the jQuery mobile JS file and you're good to go... call the jquery mobile functions and they should work.
CI is server based PHP, JS is client based and shouldn't affect it in the slightest (but we all know what troubles people can have with ajax/jquery... so who knows)...

>> 6) As there are n number of devices in the world, which devices can be target....
Yeah, that's a bit of a loaded/silly question. You've already answered it with this comment "I understand that will depend on application and the user pool which will use it."
Without knowing anything about your app/your target market demographics, or anything else, what more can we say?
What I do recommend is getting onto... google!!! Have a look around, plenty of people publish their user browser details (ie, 35.4 iOS 4, 20.2% android 3.1, etc).
Also, if you are building a mobile site for an existing pc site, have a look at your analytics code (you have google analytics running right? If not, install it today so you can start to get this information). It will give you a good idea of the existing mobile traffic you already have.
Also talk to people in your industry/location/demographics, see what they have to say about their mobile traffic sources.

>> 7) Can anyone provide any links/tutorial/examples/sample codes which will help to start the work?
GOOGLE GOOGLE GOOGLE!!!

>> 8) Any other suggestions/comments/ideas which you might have are welcome.
Research a lot first, this is a complex subject.
Build a samll test site first, learn the tips/tricks. Build into this test site all the mobile functionality you think you'll want on your real site. For example, my above code about loading different views, you might have it in your test site in a helper, but then towards the end, because of something unexpected, need to completely change this set up. This can be very time consuming on your real site if you've 100's of controllers calling your helper, etc.
Iron out the bugs/design patterns in the test site, then develop the real site.

Oh yes... you'll have to do some user testing/research. Find out what they want on the mobile site. User Interface isn't about making things pretty, it's about solving a User Problem in the quickest AND easiest method. Learn your users and you'll reap the benefits!

Good luck.
#4

[eluser]boltsabre[/eluser]
Oh, another thing you'll have to consider it page load times, it's VERY VERY important for mobile site.

While they are getting better, typical mobile cache sizes are TINY... Also getting better are the number of parallel http requests they can handle. I believe the first generation touch screen phones could only handle 1 (maybe 2)... so first it had to download the html file, then the css file/s, then the js file/s, and any other assets, then finally it would start to render the page.

You want to design in a minimalistic fashion... only use jQuery mobile if you really need it! It's another asset that has to be down loaded. Make sure you only use images where you really have to, and then make sure they are scaled down to suitable mobile sizes AND have been optimised using photoshop or something like smushit.com or tinypng.com.
Cache what you can. Minify what you can. Make sure gzip is enabled.

If you're not familiar with page load speed optimisation I'd learn it, it's essential to a good mobile site. This is especially true if your target markets include countries such as china and india where wireless speeds are horrible in the vast majority of locations.

Ah... and one last thing... really make sure your html/css is up to scratch and test on as many devices and browsers as you can. On andriod there is the native inbuilt browser, opera mobile and opera mini, firefox and firebox beta, dolphin, chrome, and I'm sure there are others out there!

Good luck... I hope I haven't scared you off the idea ;-)
#5

[eluser]boltsabre[/eluser]
This looks good, haven't delved too deeply into it, I'll leave that up to you.

http://www.smashingmagazine.com/responsi...tutorials/
#6

[eluser]UdayD[/eluser]
Thanks @ LOLLERSKATES and @boltsabre....

With all these lessons taught in above comments, I think I am good to get it started...

I really appreciate the efforts you guys took to put your thoughts on this...

@boltsabre: As you suggested about a small test site, that's a great idea... Time to get my hands dirty Smile

Thanks again.




Theme © iAndrew 2016 - Forum software by © MyBB