Before i start must explain that I'm relatively a noob with less experience in web development. A certain site that I'm developing requires and swipeleft and swiperight functionalities for touch based devices namely iphone, ipad, android phones and tablets. To implement this i was suggested to use jQuery mobile and it sounded good as I'm a fan of jQuery.
However despite all google could give me, I'd request clarification on the following
Does the doctype compulsorily need to be html 5 as it uses
attributes like data-role
My site uses jQuery and jQueryUI heavily and will jQuery mobile
distort the actual design layout implemented.
I can't seperate view layer for mobile and regular traffic.
If jQuery mobile is good for mobile based usage without
affecting normal design and functionality what will be the best
ways
of testing the site for multiple touch based devices (simulators
maybe).
Some details in simple english from this great place would be wonderful...
Thanks in advance!
EDIT
To further dig into my problem will a jQuery plugin for swipe functionality like touchSwipe or wipeTouch help me here.
Also what would best methods to test the functionality from an iPad or an android phone provided I've implemented the plugin with my code. Say some plugin just like IE simulator for firefox that could recognize swipe gesture through mouse drags (Just greedy and desperate)
Thanks again...
If you really want to separate views for desktop/mobile, I've seen recommendations here for http://detectmobilebrowser.com/ but I haven't used it. That provides code for doing it server-side in various languages or in JavaScript.
One of the main purposes of jQuery Mobile is to provide mobile-specific UI; so the styles will definitely conflict in all sorts of ways with your current templates if you try to just throw both stylesheets in there. If you just want to add swipe support on top of your current site then there are probably lots of jQuery plugins that could help with that.
Re: HTML5, From the jQM docs,
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
JQuery mobile is OK for web apps, but after doing more then on application in JQuery Mobile I would recommend against it for now. There are a lot of phones that do not fully support JQuery Mobile and you will run into issues with many of the methods, and the page layout in general. Most Blackberries, and many HTC phones do not support JQuery Mobile, as well as many other phones.
Detecting if you are on a desktop/mobile is pretty easy. Just look for a user agent on page load, and redirect accordingly. If you want I can give you a few ways to redirect based on user agents.
JQuery Mobile may distort the design that you currently have, if you do not format your page correctly. JQuery Mobile will add a lot of extra css, and working around this may prove to be challenging, especially with other JQuery elements. Dialogs are one example of something that JQuery Mobile will do differently from JQuery
The best way would be to test through emulators. Google Chorme has a Ripple add on that I tend to use, though it is not the most reliable. Because there are so many different phones, sometimes it is just easier to try to test on as many live ones as you can (different versions, platforms, ect may behave drastically different from each other with JQuery Mobile)
Related
I have an old ASP.NET web application (Web Forms, no MVC) and I would like to make it "look nice" in mobile browsers, while keeping the current design for desktop browsers.
One of my options is CSS media queries , but then - is there a list of standard screen sizes I should adapt it for?
I also read about Modernizr - but it seems to just detect browser capabilities, and I wouldn't know how to use it for my purposes.
What would be my best bet? Appreciate it.
You should take a close look at jquery-mobile which has a lot of built in functions to deal with both changing the display based on device as well as a variety of layouts pre-optimized for mobile views.
Take a look at this link for way more information : http://jquerymobile.com/
However this would not necessarily be easy, depending on the complexity and overall layout of the "normal" web page. However it could easily be implemented to judge what device is being used and then switch to an already defined layout.
I recurred to CSS media queries. Here's a nice introduction. Much appreciated.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I am wondering if there is a framework to develop mobile web applications which does not use javascript or jquery. Our client do not want to use any javascript or jquery in the projects. But when i look around for mobile web solutions, i see lots of jquery.
A "mobile" website does not require any special frameworks. You just have to design the site (HTML+CSS) so that it looks great on the smaller screens. Other than that it is the same old HTML forms as was 10 years ago (with the exception that you can use the new fancy HTML5 input types like calendar out of the box).
But you should dig deeper for the reasoning of "no JavaScript" since without it you will have to resort to whole page refreshes even for very small things (like 'hide field X when you choose USA in the address') and that will very negatively impact performance, especially on mobile devices where the network is slower.
If you use mobile MVC views, why use a framework? Why not create your own minimalist design that doesn't incorporate a lot of those features, but has the basic core HTML to define your user interface, and just allow the application to postback to the server? That would work well, and be efficient in mobile.
Yesterday i got a requirement from my senior saying that they want to view pages which are in asp that should be properly rendered on BlackBerry device. I know it will work but it will ugly... but after googling i have found about asp.net mobile pages that will work for my requirement..... but are there any more options available which will reduce my development effort.
regards,
Rick Jackson
There shouldn't be any difference in what language the site is programmed in. How the client (in this case a phone) interprets it is entirely based on what it is sent: html, css, and javascript. One popular client-side framework for mobile development is http://jquerymobile.com/. Its goal is to:
unify user interface system across all popular mobile device
platforms, built on the rock-solid jQuery and jQuery UI foundation.
To see a great example of mobile/responsive design: go to http://jquerymobile.com/demos/1.0b3/, and change your browser width in and out. Notice how page elements move around based on your screen size? There are different css rules that apply based on the max-width of the browser window. So the solution is baked right into the site.
Other than a framework, the foundation of mobile development is creating semantically correct (and not too verbose) markup that a mobile browser can parse. This means good classic html, small optimized images, percentage based sizes, etc..
Smashing magazine has a great round-up of intro -> advanced articles on modern mobile development : http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
In case that you havn't found the material, this is asp.net mvc 4 mobile features tutorial.
You can also watch the video tutorial from Phil
I have an existing website for schools and colleges management which is developed in ASP.NET,C# and SQL Server.
Now I am planning to support for the mobile applications (like basic models from Nokia/Samsung and for opera mobiles). I know the normal site we can access through some of the devices without any change, but needs to be optimized.
I am preparing another version which will be only few required fields and easy navigation for mobile. For that which method I need to use.
Normal ASPX files with optimized HTML code.
Or using WAP controls
Should I use HTML 5
Please help me to decide.
I recommend using the HTML5 templates(includes Modernizer) that come with ASP.NET MVC 3 and the jQuery Mobile framework. Let the jQuery Mobile framework do all the multi-device heavy lifting for you.
jQuery Mobile Supported Devices
you can use normal aspx pages without any issue. only thing you need to optimize the file size.
you can develop better solution using HTML5 but only problem is, it is not supporting all the devices.this is used html5
or just use any from List of mobile frameworks
You can use normal ASP.NET Web Forms in conjunction with HTML5. Take a look at HTML5Boilerplate which includes Modernizr.
Use a combination of feature detection and CSS Media Queries to serve up the appropriate files, layout and images for a particular mobile device.
Do not fall for "Responsive Web Design" techniques that cost too much in terms of performance and esthetics (basically re-skinning desktop browser version of site and calling it "mobile-ready"); disclosure: this links to blog post from me.
Use ASP.NET Mobile Controls: ASP.NET Mobile Controls
.. (i.e. How to add mobile pages to your asp.net site)
You will build a few UI controls, in a short amount of time, specifically for all mobile devices and it will be a much faster and much better user experience on mobile devices.
The UI renders minimal HTML and you control what gets rendered, meaning much less bandwidth required. Even though I have a 4G phone, so many times we are in a building that does not give a 4G signal and I much prefer sites that have mobile-specific output.
The UI is mobile-specific, users will not have to zoom around the page left/right up/down and zoom in to be able to click buttons or elements that were made for viewing in 1024x768 or higher.
Users with the latest 4G and dual core phones, and that happen to have 4G connection at the moment can always switch their phones into 'full HTML version' if they want more functionality than what you build using the ASP.NET mobile controls. However, if you go the other route and adopt JQuery-based or HTML5 code, you are excluding all previous generation phones from accessing your web site at all in many cases (besides it being slower and not as good a user experience as mobile-specific rendering). Even if you decide to focus only on the latest phones, you will also have to deal with html rendering issues, cross browser compatibility, besides the slow and UI complexity issues.
Good luck.
Using .NET Mobile Framework is always a good option as well as Web Forms which will appear on all mobile devices regardless of carrier/phone model, plus lots of phones support ajax, and other client side scripting that'll work. HTML5 is a growing standard though, and when more phones start supporting it, you'll reap tons of the new benefits.
Model View Controller is always good to follow. Allows for scalability and for components to be abstracted.
I'm looking for a set of CSS or scripts which mimic the UI (only the UI) of default applications on the iPhone/iPad, Blackberry and base Android apps?
I have a client who needs the ability to preview content and form pages on the various OS', but in their desktop browser (Chrome, FF, IE(ugh)). Ofcourse, there are dozens and dozens of standalone emulators, but I cannot find any one who may have created CSS or scripts to mimic how these would look, in the browser - e.g. default button stylings, colours, etc. not the logic of the app, but just the way it could look - with the best example I can find being : http://groupaware.mobi/iphone/#_Windows
Anyone with ideas?
thanks!
For iOS:
http://code.google.com/p/iphone-universal/
and
http://www.peterhintondesign.co.uk/journal/index.php/iphone-css-template/
which is based on the first one.
I'm sorry but until now I have only been able to find templates regarding the Iphone and not the BlackBerry nor Android UI. (I've tried to find them myself before too.)
A great template for CSS (Photoshop CS4 or higher needed) based on the Iphone is:
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Also the links by tomwadley, especially the prior link, are also quite useful regarding coding and framework.
There's some answers in this book: http://oreilly.com/catalog/9780596805791/ about creating CSS styles to mimic iOS stuff. Also covers phonegap etc, might be useful.
jQuery Mobile (JQM): http://jquerymobile.com is a framework which does just that. At its simplest, it renders "standard" html elements as native OS elements for platforms like iOS and Android.
You don't have to use the JQM framework, of course; you could simple take what you need from the CSS that JQM employs. Either inspect the css directly or write a simple test page which loads JQM and inspect the CSS in Firebug or Chrome developer console.
Checkout iUI..probably what you are looking for.
http://www.iui-js.org/index.html
For the android, try this implementation of Holo Light and Dark: http://vezquex.com/projects/holo-css/