I am working on a mobile website (m.website.com) and I am wondering if there is a need to differentiate between different operating systems or mobile browsers?
For example, I am using a mobile detecting PHP class from https://github.com/serbanghita/Mobile-Detect and there are functions like isIOS() and isAndroid() or isChrome() and isSafari() as well as a general isMobile().
So the question is do I have to have different sets of webpages to accommodate different OS/browsers? Or all I have to do is to have a single set which falls under from the isMobile() function that all mobile OS/browsers will understand?
You do not need different pages to target different OS/Browsers per se ... but that is only half the answer. Because the OS/Browsers have their own quirks, you have to code your pages in such a way that you code is compatible with "most" browsers/OS. An exercise known as cross browser compatible coding. If you do not do such coding, e.g. by picking up some specific features/bugs/non standard implementation of one particular OS/browser then your page might break in some other browsers.
Most 'modern' browsers are HTML standard compatible. The cross browser compat guidelines are mostly about sticking with HTML standard; that is if you are NOT targeting something like IE6.
Web has many articles on cross browser dev guidelines. e.g. see http://www.htmlbasictutor.ca/cross-browser-compatible.htm
Normally it's enough to use isMobile and create one template for all mobile devices.
You need isIOS, etc only, if you want to create different user experiences or use os dependent javascript functions/libraries. An example would be creating an mobile app, which looks like an native app and is available for iOS/Android/etc..
Related
They are some questions already about this on stackoverflow, but none is really clear about the 'best practice'.
For the content design, what are the options and what is the better option?
Some options I know are using folders: site.com/en/ and site.com/fr/ or redirects site.com/index.php?language=en
An even easier practice is using a new url: en.site.com and fr.site.com
But what if I want to keep site.com/index.php and nothing more ? What are my options for that?
For example, if you change the language on LinkedIn, there's nothing changing in the URL. How do they work there ?
update: in my case the website is a platform, using LAMP stack. Technical advice is also welcome (like how to store/link all the different language files)
You have some options, and each has its own advantages.
If you have a web app, which should not be indexed by search engines, then you are free to do whatever you want. You can keep a language setting in your Session and show strings in the chosen language. This will simplify URLs and management.
However, if you have a standard website which should go into Google, then your options are restricted. If you use the former approach, google will be confused and will index only one language, or, worse, make an ugly mix of the languages. Google does not keep sessions when indexing your page, so if you have two versions of the same page in two different languages, they need to have different URLs. And passing a language as a GET parameter each time is ugly, error prone, and not user friendly.
So you should either have languages as folders (eg. site.com/en/), which is the best options, or use subdomains. This can be a problem, however, because each subdomain is indexed as if it were a separate website, so things like pagerank and site reputation are split among the two.
Here are my recommendations based on multi-languages web sites experience
You can determine the language of the browser in Javascript (see this), which is a good start in having a language that likely fits the user demand
Use utf8 for encoding, everywhere (browser headers, programming, database). The only drawback I know of utf8 is that in some cases, the number of bytes it takes is bigger than another encoding matching more closely a given language (utf8 is opened to any). Big advantage, it covers any language, the ASCII part (bytes < 128) is the same as a western encoding (takes only one byte) ...
Store the user preferences (not in URL).
either in a cookie (+ : user does not have to be logged it on his computer to keep her prefs ; - : when user accesses the page from another computer, the cookie is not present and he/she has to reselect the pref).
or in a session (requires user login to deterime which user is currently using the site)
Regarding the site structure, if you don't store the user preferences, the common /us /fr /jp... solution has advantages: search engines robots will find all languages from root (the page display doesn't depend on user choice). Or you could load only a language dependent Javascript that displays the page immediately (after JS download) in the language of choice, without the need of a page reload / redirect.
You can tell Google what the parameters in the URL mean through Google's Webmaster Tools. So if you use a standard convention like index.php for the main page and a parameter like ?lang=fr for let's say French content in regard to SEO as long as it's a real translation. Likewise when Google.fr crawls the site you would present their users with the French version of the page based on their default setting in their browser. This will increase stickiness on the site and then increase the rank for the selected search terms in French. You can check their default language with this in PHP to make it less heavy on the user's end:
<?php
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo $lang;
?>
Then you would simply concatenate the language selected (as an overlay) to the end of the query string (if it's not the default), bypassing the need for storing a cookie. This should also help from a user experience standpoint. It's not as "pretty" but if people aren't typing it in, it's much more user friendly in that:
People can switch languages by changing the variable
People can provide a link to a user in another country and they can be presented with the page in their native language intuitively when PHP checks their language. "Do you want to see this content in French?"
The native language could in theory be translated on the fly with something like the Google Translate Widget or Google Chrome's built-in functionality.
Content is only served on one URI per page meaning you would not have to rewrite several redirects between versions in the event of stale content. As you're not likely translating into both languages at the same time.
From Wikipedia on Chrome:
As of February 2013, according to StatCounter, Google Chrome has a 37%
worldwide usage share of web browsers making it the most widely used
web browser in the world.
As for storing the files, you can make separate tables in the database for each language, enter in the content in the native language, then duplicate that content to the other language's table. Then you could translate that content live on screen if so desired, or allow someone access to your CMS who could translate the content. Both records would have the same ID in the database so the page would be served appropriately when the language was looked up.
Large corporate sites do the handling of the URLs in a couple of ways, they would show french content at http://www.some_website.fr/ and English content at http://www.some_website.com/. Sites like wikipedia use a subdns so http://fr.wikipedia.org/ and http://en.wikipedia.org.
HTML5 supports the lang='fr' approach to declaring content on screen.
I don't know what's your situation but, imho, you shouldn't use new urls.. it would only be a useless waste of resources (all kinds of resources).. If your website's client-side is javascript-based, you could use libraries like i18next, which gives you great support in localizations.. That's a valid alternative if you agree leaving the localization at you application's client-side.
For server-side localization in php, i wouldn't be of any help..
I have never understood why some people say making custom css for each browser is a bad thing. To keep my page size down and download times fast it makes perfect sense to me to make a custom css for the major browsers (especially IE in its many different forms), and a general catch all css for everything else.
If you want to send out a bloated, huge, Swiss army knife of the css world, for all situations then go right ahead I'm not going to stop you.
Fast detection of the browser is important when doing this. Loading a JavaScript file to detect the browser seems slow. So I would prefer to use php to detect the browser, and send out the specified css. Or at least a general browser specific css then use the JavaScript to load a more detailed version of the css.
But I've read article after article about why this is a bad thing. The main reason behind each of these articles is because the user agent can be faked. Or there using Firefox but the server thinks they're using IE7 so it sends out the wrong css file.
As a developer/designer of web apps why is this my problem? If you want to use Firefox, but tell my server your using safari or IE*, and get a crappy looking page, why is it my problem?
And don't throw that whole if the user can't see your site right they'll never come back, or some kind of similar argument at me. a normal user isn't going to be doing this. its only going to be the people who know how to do this, and will know whats wrong when my site looks crappy.
This is similar to looking at my site on a old Apple II (I have no clue how), and yelling at me because everything looks green.
So is there a good reason, not a personal preference, why I shouldn't use php to detect the browser and send out customized css files?
I do this mostly for the different versions of IE. It just seems like for some sites, adding the if IE6 and if IE7 parts just double or triple the size of the css file.
Typically when a user intentionally fakes the user agent string, it is because something is not viewable in the user's browser that should be. For example, some sites may restrict users to IE or Firefox, but the user is using Iceweasel on Debian. Iceweasel is just a Firefox renamed for trademarked reasons (there are a few other changes also), so there is no reason that the site should not work.
Realize that this happens because of (bad) browser detection, not despite it. I would say you don't need to be terribly concerned about this issue. Further, if you can just make your site reasonably cross-browser compatible, it won't matter at all. If you really want to use browser-specific CSS, and you don't want to do so all in one CSS file, don't let a fake user agent stop you.
As long as the only thing you're doing is changing style sheets, there is no valid reason as far as I can tell. If you're attempting to deliver custom security measures by browser, then you'll have issues.
Not sure about php but in Rails it is normal and dead simple practice to provide css files and different layouts based on the user agent particularly when considering that your site is just as likely to be accessed by any of the myriad of available mobile devices, never mind writing for the most popular (Currently Firefox) browsers and even writing custom MIME types if need be is also dead simple.
IMO not doing so is pure laziness on the coders part but then not all sites are developed by professional teams of developers with styling gurus at hand. Also in languages other than Rails it might not be so simple. Sorry, I haven't a clue about PHP so this may not be an appropriate reply
In my opinion, starting with normalize.css, and having a base style sheet to start, overriding the base styles as needed usually works along with making sure you set appropriate fallbacks. If you really need it a few media queries, and feature detection can go a long way.
One reason you shouldn't base things off of the browser is because major search engines like Google and Yahoo prohibit displaying different content for different browsers. GoogleBot can detect different CSS and HTML and you may get bad search positioning. Additionally, if you use any advertising services you may be in breach of their contract by displaying varying content.
Let's say I have a plain HTML website. More than 80% of my visitors are usually from search engines like Google, Yahoo, etc. What I want to do is to make my whole website in Flash.
However, search engines can't read information from Flash or JavaScript. That means my web page would lose more than half of the visitors.
So how do I show show HTML pages instead of Flash to the search engines?
Note: you could reach a specific page/category/etc in Flash by using PHP GET function, for example: you can surf trough all the web pages from the homepage and link to a specific web page by typing page?id=1234.
Short answer: don't make your whole site in Flash.
Longer answer: If you show humans one view and the googlebot another, you are potentially guilty of "cloaking". If the Google Gods find you guilty, you will be banned to the Supplemental Index, never to be heard from again.
Also, doing an entire site in Flash breaks the basic contract of the web, namely that you can link to specific content from other sites or in emails. If your site has just one URL and everything else is handled inside of Flash ... well, I don't know what you have, but it isn't a website anymore. Adobe may like you, but many people will not. Oh, and Flash is very unfriendly to people with handicaps.
I recommend using Flash where it is needed (videos, animations, etc.), but make it part of an honest-to-God website.
What I want to do is to make my whole
website in Flash
So how to accomplish this: show HTML
pages instead of Flash?
These two seem a bit contradictory.
Important is to understand the reasoning behind choosing Flash to build your entire website.
More than 80 percent of my visitors
are usually from search engines
You did some analysis but did you look at how many visitors access your website via a mobile device? Because apart from SEO, Flash won't serve on the majority of these devices.
Have you considered HTML5 as an alternative for anything you want to do with Flash?
Facebook requires you to build applications in Flash among others but html, why? I do not know, but that is their policy and there has got to be a reason.
I have been recently developing simple social applications in Flash (*.swf) and my latest app is a website in flash that will display in tab of my company webpage in Facebook; at the same time, I also want to use that website as a regular webpage on the internet for my company. So, the only way I could find out to display html text within a flash file is by changing the properties for the text wherever I can in CHARACTER to "Render text as HTML", look for the symbol "<>". I think that way the search engines will be able to read your content and process your website accordingly. Good luck.
As you say that you can reach the Flash page by get variable using page ID or any other variables. So its good. I hope you will add Flash in each HTML page. Beside this, you can add all other HTML contents in hidden format. So the crawlers could reach the content and your site will look-up in Flash. Isn't it?
Since no-one actually gave you an straight answer (probably because your question is absolute face-palm-esque), i'll try:
Consider using the web-development approach called progressive enhancement. Now, it's fair to say that it probably wasn't intended for Flashification of a website, but you can make use of it's principles.
Start with your standard HTML version of your website
Introduce swfobject to dynamically (important bit) swap out the HTML content for it's Flash equivalent
Introduce swfaddress to allow for deep linking into your Flash movies (pseudo-URLs)
Granted, steps 2 and 3 are a little more advanced that how i've described them and your site size/structure/design may not suit this approach, but at least it's an answer.
All that being said, I agree with the other answers/comments about the need for using Flash to display your entire site - there's very very very few reasons anyone would do that, and there's more reasons than already added as to why not to (iOS devices etc)...
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 5 years ago.
Improve this question
I would like to know how I can make a webpage that will look good in most mobile phones.
For making normal webpages, I use dreamweaver cs3.
I don´t really want to use emulators unless I have too.
Can I not just center everything in the middle, with auto margins on both sides.
When I am looking at the pages that I have made sofar, they look ok,
but in a mobile phone some things get cluthered.
I am planning to strip out all the non essential information and markup for use on the mobile phone.
Then there is the question, basicly the most important one for me now
How to present a different page if the mobile phone go´s to the same address?
edit
I diddn´t get an answer om the last one, but I found a browser detection script that I could use.
thanks, Richard
In order to get the greatest amount of compatibility, you have to trade it off with ditching most of the bells and whistles browsers running on desktop computers consider run of the mill.
Declare the mobile doctype with your XHTML documents, and make sure your markup and styleheets are valid.
Keep you CSS real simple. No :hover, don't use images as part of the design, limit your usage of fixed sizes/margins.
Emulators aren't as effective for testing as the actual devices themselves. Phones that do Wifi/Bluetooth PAN can make life cheaper, but testing over carrier's network will also help you get a better understanding of the speed and latency.
There is no "typical device", but if you can get your website looking really good under webkit without using webkit's CSS addons, you've covered a huge chunk of devices (Nokia S60, iPhone, Android etc). Work with Opera Mini, and you'll expand that chunk even more.
Compact your output as much as possible. Not only are your end users going to be screen and CPU processing limited, they are most likely going to be limited by network. The faster you can push out your data to them, the less-sluggish your website will feel.
A List Apart has a great article about conditionally using different style sheets for mobile devices:
http://www.alistapart.com/articles/putyourcontentinmypocket/
You can also check out Apples Documentation on designing web content for the iPhone, although it's iPhone specific, it pertains to mobile devices in general:
http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1
Just my two cents:
Personally, I would make the layout fluid, so that it auto adjusts itself according to the length and breadth of the display.
Remember many phones have accelerometers which can change the direction of the page, when tiled sideways. In this case, horizontal scrolling is a big no-no.
Just keep all useless things aside and present only the basic information, advanced or details information should be places under More button.
Don't use Images, or I say - Use it as minimum as possible. This would take the most of the user's bandwidth. If you are targeting this for people under GPRS/EDGE , then better avoid Images even more. People on 3G have a better chance.
You can have a look at Facebook or Gmail mobile interface to have an idea. Google Reader's mobile interface is also good, but still not upto the mark.
I don't know how much people would agree with me - Keep AJAX low. Most phones can't handle so much load if your page is highly ajaxified. Remember, it is a mobile and not a computer. It does have some limitation. Probably very high end phones can render it, but to keep your userbase strong, minimise the use.
Content Load: If the page takes just to much time to load, then probably the user won't bother using it. They would prefer to use any other alternative/service which can get his/her work accomplished.
CSS: Make less use of CSS as much as possible. Use colours more than Images as I said many times above. You should make use of float to make the page fit properly on the screen. If you desire you can use smaller font - but beware, don't go below a certain level.
Suppose I have developed one web portal in PHP/MySQL. I want to make it work in mobile also. What is the easiest way to do this?
Can we use PHP with any mobile based mark up languages like WML or XHTML i.e. as we can use PHP with HTML in web applications used to view in normal web browsers?
PHP has nothing to do directly with the platform you want to display your app on. PHP is just the tool to deliver the kind of markup you need for your page to be displayed on whatever platform you want. It's up to your own knowledge and creativity to render markup which suits your needs. So in other words, yes of course you can send WML, XML, XHTML, you name it to the client!
The client doesn't know anything about PHP anyways (PHP 'exists' only on the server side), the client doesn't understand PHP and doesn't need to. It understands XHTML or any other markup and that's what you have to deliver! What tool you use to do that is completely up to you. PHP is one option.
So all you need to know is for what platform/client you want to render your content and what kind of markup this platform understands and then deliver the right markup to the right platform/client including the respective CSS, js, etc.
What your app does:
detect what client is requesting your site
see if you're able to send the appropriate markup
send this markup or if not available some default or similar markup
Pseudo-code for each page, (or just the template page, if you have that)
<?php if(mobile()): ?>
Mobile HTML and PHP
<?php else: ?>
Desktop HTML and PHP
<?php endif; ?>
I use this.
Depends on what you understand under the term "mobile". Basically it would just mean to adapt your portal displayed data and css to the smaller display sizes and make as ZOMFG said an if statement to output your source accordingly. If you want to enable WAP browsing you have to output your data in the Wireless markup language.
PHP is just a tool which generates some markup language (or anything else, actually, which might not be markup-oriented at all) that is understood by the client -- the browser.
Your PHP code will have to be able to generate two kind of different outputs :
a "full ouput" (likely HTML), which you already have, for computer web browsers
a "light ouput" (maye VML, maybe HTML too but without some heavy stuff), for mobile-based browsers.
The task you'll have to deal with is to differenciate between mobile and non-mobile users ; this might be done by user-agent sniffing, for instance, or detecting what the client requested.
A nice thing to do could be to use a special domain-name for users of mobile platforms ; something like mobile.example.com ; for instance, so they can bookmark it and directly access the "mobile-version" of your site -- can be useful if your detection doesn't work well ^^
If you are targetting advanced-mobile-machines (like iPhone) which have a not too bad browser, you might want to send them "rich" HTML pages ; just test your pages to verify they fit on the small screen of theses machines ; and, maybe you'll want to send less data (like not display some sidebars, or have a smaller menu, ... )
BTW, what kind of platform do you mean by "mobile" ? Those old phones with small screens, or more power-users-oriented phones, like iPhone / Android / stuff like that ?
This could make quite a difference, actually, as the more recent ones have nice functionnalities that the oldest didn't have ^^
In any case, one important thing to remember :
you will spend some time making the site work on these devices
you will have to spend more time maintaining it !
Which means : do something simple, and, as much as possible, use the same PHP code for both mobile and non-mobile version of the site : the less code you duplicate, the less code you'll have to maintain !
Hope these few ideas (not really well sorted, I admit) will help...
Have fun !
Already the mobile browsers support almost full XTHML, Javascript, Flash.
My recommandations are:
have a light css for the mobile
version
restrict some heavy functionalities
validate your code
optimize, optimize, optimize, although this works even for the full version.