Okay I got some good advice for Mobile Detection but still having an issue with themed tablets as the icons will be larger for a tablet view then a mobile device. I'm using jQueryMobile as the framework and it does detect the iPad (And I'm sure other tablets are on the way), but how can I detect if it's a tablet or mobile device? would I just go with the screen size?
If that's the case than what's the largest screen size for a mobile device or the smallest screen for a tablet?
is there a better way?
jQuery Mobile adds classes to the body tag which allows you to create a single CSS for all the devices.
See here: http://jquerymobile.com/demos/1.0a3/#docs/api/mediahelpers.html
update
As of beta2 helpers will be deprecated and set for removal. You should take a look at media queries which were used to put these classes in there anyway.
I'd suggest using media queries and targeting a different CSS stylesheet.
Have you ever considered a device detection library like wurfl, tera-wurfl or the proprietary deviceAtlas?
Have you considered the benefits of server side detection? OpenDDR offers .NET and Java libraries, licensed under LGPL.
You can have a look at http://www.openddr.org
We are starting to develop using Formfactor detection libraries such as FormfactorJS - note, I created this.
The theory being using the same semantic HTML, you can specialize your CSS and Javascript using for a given class of device (smartphone, tablet, desktop etc) whilst also being cognizant of responsive design to individual device profile using Media Queries.
Related
I got a requirement! I would like to convert Normal Web Sites for Mobile Web Sites.
Actually I want a on premise software recommendation that has the capability to do the same as www.dudamobile.com for example.
Kind regards.
(Sorry for my English)
one of the things you could do is implent the Bootstrap CSS Framework (or any other CSS Framework), to style the website more mobile freindly.
Alot of CSS Frameworks are made to auto-adjust more freindly to native mobile browsers and other mobile browsers, and work for various screen sizes.
see: http://getbootstrap.com/css/#overview-mobile
I am buillding a website which looks great on a desktop however when i view it on a mobile it doesnt really work. I was wondering how I could set up a method/system which would automatically load the mobile site when being viewed on a device. Is there a way to do this? I have no problem with building 2 different sites but I would just like it to be automatic.
If you take a look you will see what I mean -
redchevron.co.uk
Thanks
As a general rule, you shouldn't build two separate sites if you can avoid it. The general best practice is to use responsive design techniques to build a single site that automatically adapts its appearance and behaviour to suit different devices.
To automatically adapt the layout and styling of your site for devices, use CSS Media Queries. That's a big subject - so here's some places to start your research:
Beginners guide to responsive web design
Media queries for standard devices
Mobile first responsive design
In short - Media Queries allow browsers to use styles (and ignore others), depending on properties of the device displaying the site. For mobile, the most common technique is to set up a media query for screens smaller than x pixels wide, and include your mobile styles within it.
To adjust behaviour for different devices, you can use javascript to detect various attributes of the user's device (is it a touch device, for example), and adjust to suit. It's worth noting though, that your site's functionality should work without javascript - it's important to create a solid, HTML only site as the foundation for whatever other work you do.
I want to create a website with responsive design. Now I would not only provide different CSS files for different resolutions. Ideally i will also provide different css files for different input devices. For example: Link should be shown larger for touchscreens, as for devices with mouse.
I can detect resolutions with CSS media querys, is there a way to detect touchscreens or general the type of input device?
You can use a library like modernizr to detect features (like touch) and then apply styles based on that. Check it out here:
http://modernizr.com
I am trying to make a web-application, which I will host on a server. It should be able to be accessed by mobile browsers on all smart phones, and also on desktop web browsers.
I am pretty new to this. Checking this out on Google is confusing me a little more, because I know I can make applications in HTML5, CSS3 and JavaScript and they can be accessed on mobile browsers similarly as desktop browsers, but what I want to know is how to take care of the size and specification for the phone. The UI components should be user-friendly in mobile environment.
Is there any IDE or API that makes this possible?
but what i want to know is how to take care of the size and
specification for the phone,
You should be using CSS media queries for that:
#media (max-width:480px)
{
// styles for devices with width 480px or less, e.g. iPhone
}
MEDIA QUERIES
I'm building a small site for a company, and would like to build a version optimised for smartphones with full internet browsers (iPhone/Android etc).
I'm leaning towards media queries, because this is supported by webkit which most of these seem to use.
Is this the best? If so, what media query would be the best?
I'm leaning towards:
#media (max-device-width: 480px)
If your site can adjust everything you need via CSS you should be good.
Keep in mind the things that differ in the mobile web:
Overall width/height is much smaller
Font-sizes are typically made bigger for readability
Flash isn't supported across many devices (cough iphone)
Strip anything that isn't needed don't waste bandwidth on things mobile users don't care about
add mobile-friendly attributes to phone #'s for easy dialing
That said, once you get into it you may find that you really want/need to provide a different "View" for the mobile users... e.g. redirecting them from example.com to m.example.com and altering the content on the page dramatically. If you are using an MVC-like framework you should be able to make a set of simplified views for your pages that are optimized for mobile devices.
Example sites (Desktop vs. Mobile vs. Touch-optimized)
Digg: Full | Mobile
Yahoo: Full | Mobile
Facebook: Full | Mobile | Touch
For touch phones, create a jQTouch version.
For keyboard phones just make a stylesheet optimized for small screens.
For the iPhone and Android, I wouldn’t bother as they both have fully functioning web broswers. (Unless the site is Flash, iPhone only.)
You should be able to target any device you want with a custom CSS file, for stuff like a Blackberry etc.