My apologies for a more "theoretical" question, though I suppose this is more of a "state-of-the-industry" question: I'm curious about the options available for building a website meant to target multiple platforms (desktop browsers + touchscreen devices, like tablets and smartphones).
Technologies like CSS3 Media Queries give us the ability to format our content based on screen size (among other things), which is great - but what about other functionality? For instance, touch events - these can still get very sticky depending on what device you're targeting, etc. So is it possible to build one site to target all of these platforms? Or is it still necessary/better to use device detection scripts to redirect to versions of the site meant for touchscreens (Apple-devices or otherwise)? Or perhaps, does it depend on what you want to do? Is there a line drawn that, once crossed, would require a separate version of a site to be made? Anyone care to share their experiences?
It all depends on how complex your website features will and and how they differentiate from the offline or online version.
Sometimes it's better to make a totally different version of your website and redirect to it, sometimes, a few touchevents calls on the page will not make any different for desktop users, while mobile will see something different.
One good case to look at is the WP-Touch plugin for Wordpress. While you have a version of wordpress for regular browsers, it tweaks PHP into delivering a totally different and mobile experience for the mobile user.
If you have the patience, resources and time to make a proper mobile website from your regular one, do it! If you don't, a different stylesheet and some touch events properly coded can seal the deal
Related
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've got a html5 website/webapp. I only want people to view this website/webapp from their mobile phone i.e. iphone, android, blackberry.
If they try to visit the website/webapp from their desktop browser, It should display an error message as the website/webapp is only meant for the mobile phone.
Is this possbile? any tips?
Thanks
There's no way to check for sure wether a site is on mobile or desktop. HTML is made to be device agnostic.
you can do browsersniffing BUT
user_agents are easily changed in several browsers
you need to make sure to keep your user agent->mobile/desktop mapping up to date
you could do mediaqueries and conditionally display a query that way, but with the large array of formfactors available today there's no clear line to draw that way either.
Both methods will be prone to misidentification.
Quite Frankly, I'm kinda puzzled why you would want to prevent people from accessing your site. Why do you care if someone accesses your site from a desktop instead of a mobile device?
A site designed for mobile will work on a desktop just fine (it's the other way around that might be problematic)
Grab the script for the language you prefer from here:
http://detectmobilebrowsers.com/
Works for me.
You could use media queries, on the page and check the device width on which the page is width. Say if the page is viewed on Desktop, You can show a Message that this App is compatible with Mobiles Devices only and Not Desktops. similarly this should apply for tablets as well and this message can be customized.
Are you using any serer side technologies (ASP.NET, PHP) to generate the page? If so, you can perform your logic on the server side and return different content (like your message) on the desktop requests.
This is usually done by reading the user-agent. Are you ok with a desktop user over-riding their user agent to simulate a mobile browser and viewing the mobile content?
Im currently working on a mobile web app and am wondering if I should use individual images or continue with using image sprites like I would for my desktop site? Im just worried about the increased file size from combining all the images and how this could have an effect on the load time of my pages?
Kyle
I don't see anything wrong with using a sprite set, just bear in mind that if you target the app for iPhones, they will only cache files under 25kB in size. So, if your image grows too much, it would, paradoxically, be a better idea to split it into separate images. This will account for more HTTP requests on the first run of the app - but will not generate the additional HTTP request continuously with each subsequent page load, saving both your and the iPhone user's bandwidth :). Oh, same applies for JavaScript and CSS files :).
Sprites work just fine on the vast majority of phones (barring older Nokia Series 40, BlackBerry pre v. 6.0 and any legacy devices (anything without a full HTML 4.01 browser).
What you should be aware of is that if you are using a flexible/responsive layout with primarily flexible units, it can be very hard to properly position the sprites while retaining the flexibility in the layout.
What HTML APIs are available for touch screen devices (e.g. tablet PCs)? I notice that GMail's iPad interface (and other mobile interfaces) doesn't scroll down in a normal web browser (pretending to be an iPad via a user-agent hack). How can one access this API on a PC?
I have a school full of tablet PCs that aren't wonderful in tablet mode due to lack of application support, but there looks to be an increasing number of web-based apps that will fill this gap.
In most cases, the webapps are using touch-based javascript events (touch, touchstart, touchend) which (for obvious reasons) are not implemented on Desktop browsers.
Check out PPK's compatibility table for details: http://quirksmode.org/mobile/tableTouch.html.
He also has a demo which shows the touch events in use: http://quirksmode.org/m/tests/scrollayer.html. There's a link on that page for a "variant" that works on desktop browsers. That's the one you need.
You can use, as you've already stated, UserAgent, to present content laid out specifically for certain devices.
For each, device, you'll have to read its documentation on how to write HTML in order to make the device behave as you want.
For example, here's how you would do it for an iPhone/iPodTouch. Here's for iPad. Similarly, depending on the device you have, you will be able to find proper documentation.
There is an awesome open database that can help you get device information based on user agent. It's called WURFL.
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.