I have an existing website running. I want this site to be able to be viewed on mobiles smart phones as well. I am ready to shave off some stuff, but would like to know how can I test this and are there any tools/guidelines on how to repurpose the site to be best viewed on mobile phones ? How to detect on the web site whether a mobile phone or a PC is hitting the site and accordingly serve the appropriate content.
There are few factors to consider such as:
- screen size
- touch vs non-touch
To detect whether the mobile phone hitting your site, you can simply verify the user agent.
There is a good article on this at A List Apart which will answer your implementation questions: Put Your Content in My Pocket
You can test by setting the user agent of your browser to that of mobile device. This can be done in safari under the develop settings, or firefox has various plugins.
And a tip, don't use anything that requires hover functionality. Touch screens don't hover.
You will find out it's a strange new world at http://mtld.mobi/
First decision you should make is which mobile platforms you want to support, then start coding...
As some one mentioned http://mtld.mobi/ is the best place to start for resources but for testing I would use http://ready.mobi that will test and debug your site and provide interface to viewing your website in mobile platforms.
First you need to decide what platforms/browsers you are going to support. If it is only smart phones like Android/Iphone/Blackberry it would be a pretty safe bet that as long as the website works in crome and isn't VERY javascript intensive and the site is catered for smaller screens it would be fine.
That is the theory in practise mobile is mobile and real world testing is the only way to go for 100% coverage.
Related
So, I worked on responsive sites before but I'm on my way to build my first responsive site now. I opened some articles on the subject, and boom: Mobile First.. I have no idea how I skipped that concept till now. From the beginning I cant seem to understand whole thing (except that number of mobile devices will take out soon desktop computers) and here is why.
How I'm supposed to know how my site will look for desktop version, if I design it for mobile first? I mean, on the smallest device I will have to eventually hide some content etc, how I'm supposed to know what to hide and move things, when I don't know how the site will look on bigger screen? Isn't stripping the things easier?!?!
For me (right now), the Mobile First concept looks to me like building pyramid upside down.
Most implementations actually have two sites: one for browsers and one for mobiles. The webserver redirects the client to m.your-domain.com (or mobile.your-domain.com) if it recognizes it as mobile accotding to the user-agent.
Still, there's room for responsiveness since you might decide to consider different screen sizes, both for mobiles as well as browsers - for example: iPad browser might display things differently than chrome on desktop.
Remark:
Even though we already reached the point where major portion of the internet traffic is done by mobile devices, your site/service might be such that most of its clients will be laptops/desktops. Take Stackoverflow for example :)
You should use google analytics and see what's the split and decide according to that if it's really worth putting energy into it (and if so - how much).
In my opinion. mobile first applies more to apps than to websites. It is relatively easy to make a responsive website, or two versions of a website, to accommodate different screen sizes. It is much more difficult to create an app that works equally well on both small, mostly touch-driven screens, and large desktop screens. In applications the difference is more than just what information you can fit into an available screen real estate. Mobile applications often have a different UI flow and use a different set of components (widgets).
Once you have analyzed your requirements, you have to answer a key question: can a single application/website offer a great user experience on both desktop and mobile devices? If it can, go for it. If it cannot, then you arrive at the mobile first concept: these days it is often better to start with a mobile experience. It will work on large screens too, even though it may look a little strange and it will not take full advantage of a desktop environment. If you app is successful, you can always create a desktop-optimized version.
Note that I said "often", not "always". There are many applications that users still prefer to access from their desktops. If you build one of those applications, there is nothing wrong with going desktop first.
stripping away stuff scaling down your website to a mobile website is not a best practice. nor is mainting two separate websites. starting from mobile lets you focus on what you really need and on the content of your site. don't think "graphics" but think "content"
I'm beginning to build my first mobile web app and I'll be using a combination of html5, css3, javascript, and at the end I'll be wrapping it up with Phone Gap (Cordova) then deploying it out to both the Android and iPhone marketplaces. I won't be using anything else like java, php, or c#.. This is strictly front-end based, so the questions below are in retrospect to the this and will play a big role in creating my mobile workflow.
As I'm fairly seasoned in the above front-end technologies, mobile apps are a different world, which leaves me with some questions...
Mobile App Questions (Workflow)
1.) Should I build it with 1 page (single page app) or multiple pages? I know I could us an AJAX solution here to give the "1 page" look/feel, but what's the smartest solution?
2.) Ad placement, in retrospect to 1 page/multi-page apps, I assume multiple pages would be a smarter choice? The more refreshes the better for CPM or is this considered bad practice? ...or can I achieve ad refreshes with smart AJAX placement inside a 1 page app?
3.) Gestures vs. buttons and css - I've been building responsive websites for the last year and have noticed that I can achieve a lot of effects with css alone (i.e. hover, focus, active, overflow... to name a few). When is it necessary to use gestures? Hammer.js seems to be doing a pretty good job of these effects and I'll definitely be taking a closer look at that plugin.
4.) CSS3 Animations vs. Jquery Animations vs. WebGL Animations - What's best? According to this link, CSS 3 wins... But I've heard about css3 REALLY slowing things down (i.e. using border-radius). What's safe to use for a mobile app?
5.) The "back" button on android phone, I assume it's used just like a web browsers back button.. So if I build a "1 page app" that could be a bad choice if a user clicks "back" then immediately exits your application. I'm sure I could use an alert box to question the user first, just curious on if their is any recommended solutions?
6.) The "settings/options" button on an Android phone, I assume it will do nothing if I don't tell it to... But, if I wanted to tell it to do something how could I?
7.) File System - What's the best way to access the file system (opening media, saving media, saving media to "custom app folder name", sharing media to facebooks/twitter/instagram, accessing contacts, texting, email, etc...), Since I'm only using front-end technologies, what's the best ways to handle this? It seems like I've read somewhere that Sencha and/or Phone Gap have JS solutions for this.., what's your preferred way and how does it actually work?
8.) Testing - When I start implementing all of these "File System" commands, how on earth do I test this? I'm of course coding on a computer, Will Android and IOS emulators really do the trick or will I have to manually load my mobile app to a server and check? Is their a way to test locally with my phone? (that'd be cool :)
9.) Performance - I know performance is key with any application but ESPECIALLY mobile apps. I use jQuery (hey, I'm a UI guy :), and I know I'll be using a few other smart scripts so mobile phones will play nicely (SouthStreet Progressive Enhancement Workflow)... but how much is TO MUCH?? In the future if I wanted to use more powerful js libraries such as knowckout.js or angular.js, how would this effect the performance of a REAL html 5 mobile app?
These are the questions that are running through my mind right now. If anyone has some good knowledge of a tutorial that explains these things or if anyone can point me in a good direction I'd really appreciate it! I also hope that these questions will help other poor lost souls like myself ;)
I already have a website with huge database which is good for Desktop browser my site is on Joomla base. Now i want to develop for Smartphone (like iphone, android, nokia) and mobile browsers. So how can i achieve this goal what is the best way of doing this.
Mobile Sites like Yahoo, Youtube i want to developed something like this because i'm new to developing mobile sites so any one can suggest me the right way for developing the mobile version for my current Desktop Site.
Thanks in advance
There are extensions for Joomla that style your site for mobile usage here: http://extensions.joomla.org/extensions/mobile.
It makes sense to test your site using the emulators for iPhone, Android and Symbian at some stage before you release. Each software development kit includes the ability to use the mobile browser.
Note that this is not the whole story. You'll want to consider:
Mobile users have much smaller displays. You'll need to rework your UI to take account of this.
Mobile users have large fingers. You'll need to rework your buttons and links to take account of this.
Mobile users tend to consume content rather than create it. Optimise accordingly.
Searching for data with e.g. traditional search boxes is tricky; you may need to rework to use scrolling through lists.
Above all: test, test, test!
Have a look at http://www.mobilejoomla.com/
With all the different mobile phone browsers and the mobile market being so diverse I'm having a hard time deciding on a way to create a text based online game for mobile phones.
I was thinking about using HTML / CSS / Javascript for front-end and Python CGI for server-side (with a DB).
Now this seems like a very obvious choice... BUT I'm having a hard time finding the "limits" to each one... by that I mean at what point will a popular web browser stop 'supporting' a technology. Like when it comes to HTML I assume you cant use HTML5 features in all popular mobile browsers... or maybe some allow JS but not jQuery... or maybe some don't allow some common CGI features or DOM is weird... I do not know.
I have read a few different tutorials on various mobile web browser development but nothing really helps to answer my question.
So what I'm asking is basically:
What languages/technologies do you recommend for a Text based mobile online multiplayer turn based browser game that will need to dynamically load a lot of info?(front front end to back end)
What are some common limitations between popular mobile web browsers I should look out for? I want to be compatible with all popular mobile web browsers.
One of the things to keep in mind is that there is a plethora of mobile browsers out there (Look here for details). So you are probably better off starting with iphone, android and blackberry and maaaybe opera mini browser support. These browsers have sophisticated java script support and you would be able to provide a good user experience. Later on you can work on supporting other mobile browsers.
Regarding your questions, if you look at these browser specs (and they are readily available on Internet) you will see that you will be able to use quite a bit of web technologies (HTML, CSS, Javascript, etc). That wont be a showstopper for you. Designing for a small screen, and a great user experience on small screens, that will make or break your game.
I have a website that I want to make look good from a non-mobile browser, but make very usable from a mobile device.
I'm thinking I'm going to detect if the user is likely using a mobile device, and if they are, redirect the first hit to a page that says something like: "It looks like you're viewing this page on a mobile device. Would you like to view the mobile version?" Based on the user selection, I'll set a cookie. (Would this be annoying, or helpful?)
But I'd also like to make sure that if I miss someone who is mobile browsing (if I think they're non-mobile, but it turns out they aren't), I provide some way to switch to the mobile version. Also, if I detect someone is mobile, but they'd prefer to browse the full non-mobile site, I need to allow that, too.
I'm leaning toward having a mobile and non-mobile version of every page on the site, just presenting the data differently (and with a lot less images, etc) for the non-mobile version.
Anyone who's been through this, have advice? Any links to sites that do this right?
I'd suggest using WURFL for the detection part.
Also, lots of good reading material about such practices on Mobiforge