I will be spending the next several weeks transitioning content for my webpage into a mobile version AND a tablet version. I have a few questions to this affect:
What is the accepted way to send users to their correct site, depending on the device/browser they are using? (i.e. do we check in PHP for some kind of browser type or something)? I've looked into nice CSS grids that display great on all devices/resolutions - but at this time I'm not ready to make that full switch - so I'm looking to just have a reduced-version of my current site (whether it's via redirection or something else).
How do we account for hover/mouseover effects in the mobile and tablet space?
Thanks all.
Update:
I did find this for #1: http://code.google.com/p/php-mobile-detect - looks like it's perfect actually.
You should redirect the user based on the user agent, in PHP you can use $_SERVER['HTTP_USER_AGENT']. Using server side detection is by far the most reliable way to redirect someone. In the future you may consider using a responsive style sheet to change the way your layout is displayed (based on screen size, in a sense is more reliable for future devices)
Touch devices do not have a hover state, that doesn't mean you can't do it with some Javascript onTouch events but it's either on or off when you touch something like an anchor
Related
Is there a way to alert a user if he accesses my webpage on his mobile device ?
The reason for this is because this particular webpage is not coded in a way to be looked at on a mobile device (at least not yet)
So, if any would access the webpage on his mobile a pop-up will appear saying something like: "This webpage is currently not supported by mobile devices".
Would this be hard to do ?
Yes it is possible, you need mobile detection script, have a look at following project on github. I have used it myself for similar requirements. This solution is for PHP (you haven't mention which technologies you been using).
https://github.com/serbanghita/Mobile-Detect
You can easily do this with Javascript as well, just google for Javascript Device Detection and you'll find enough. Another possibility is using CSS Media Queries; create a pop up, set it to display: none, and in your query make it visible again.
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?
I'm looking for a way to distinguish which browser is used and then change properties of the DIV's background.
Right now I'm using a picture as a DIV's background and it has to have a fixed width and height. However, when the site is viewed from a mobile browser ( iOS, Android, etc..) I would like to use a simple color as a background and make it flexible in terms of the width and the height.
So.. I guess my question is if there is any good approach for distinguishing which browser is used and then changing DIV's propertied depending on the browser.
Thanks.
Michal
There's two ways to do it, one as Terrik said using Javascript and do it on the client-side, you could use this jQuery plugin to add a class into the body to do it: https://github.com/leopic/Simple-jQuery-UA-Spoofing
The other is actually doing on the server side, check the headers of the page in the request and change your content before the page even loads, for instance in PHP http://php.net/manual/en/function.get-browser.php
My recommendation is, don't do either, develop your page to be responsive and accomodate to different widths/resolutions and not browsers: http://www.alistapart.com/articles/responsive-web-design/
You could use CSS media queries
This needs to be done using client side, not server side. (i.e. JavaScript not PHP)
If you want to know more about it than just how to do it, go through this site: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support
If you just want some sample code and a quick explanation, I've used this before:
http://www.quirksmode.org/js/detect.html
Once you detect that, you can set up an if statement to determine which divs to display.
Well, there are several approach to do that.
AS Terrik said, you can use client side code to dynamic change the page but this is not necessary the best approach.
A mobile page is not only a background color change. It also can be a layout change. I suggest you to use the MVC pattern : same model, same controller but one view by "browser" (device seems to be a better term in your case). When the user thirst visit your site, send the device used to your server and display the good view (via a redirection). Don't forget to save the user agent in the user session to avoid this redirection process for next pages.
I suggest you to look at GWT, which is a powerful framework when you need multi device capabilities.
I read somewhere that once you log in here (http://skweezer.com/) and put the website url, we can get the way the site will appear on mobile browsers. I tried getting this url (http://sachindra149.wordpress.com/) and was baffled to see he way it looked.
1) Can anyone please let me know why is that so ??
2) Why such a major difference???
3) And also what needs to be done ...
keeping one thing in mind that I dont have the control over the web codes for the page as it is a blog....
Hope I am clear enough !!!!!!!!
It looks like it just dumps pages to text. That isn't a realistic view of what mobile browsers do these days. Unless you are explicitly developing websites for low end and old mobile devices, don't worry about it.
If you are developing websites for such devices, then:
Don't use generic blog hosting which doesn't give you lots of control
Avoid tabular data
Avoid chrome (large navigation, anything that isn't the primary content)
Keep content short and to the point
Test of real mobile devices instead of third party emulators
First of all, it's not as bad as it looks. Mobile device have only very limited resources but they are much better today.
What you see on skweezer.com is just the raw text without CSS styling, tables and other complicated HTML. This way, the site loads much (!) faster and you only transfer a fraction of the data. Your original site needs 320KB, the skweezer version needs 50KB - less than 1/6th. Mobile browsing got much faster and cheaper but it's still many times slower and more expensive than on the desktop.
As for what you can do about it: Not much. You could select a design which is optimized for mobile devices but to know how good it looks, you would need all mobile devices that access your site. I suggest to rely on the experience of the designers at Wordpress. Your site does look much better on most mobile devices.
I prefer checking them on real devices.
Chrome extension like this will help you vew your website on different screen sizes if there is a limit on devices.