Hi I am developing a site for desktop.The site renders the contents for desktop size.But when I see it in mobile the content is not properly rendered.
How can I make a site that fits all mobile screen sizes say Blackberry,Android,iPhone, etc. Can anybody mention any articles. I know only HTML. Thanks in advance.
I remember looking into myself a while ago and finding this video tutorial on net-tuts+ to be a good starting point
It is hard to make a single site that looks good on both mobile and desktop. Resolution is not the only problem, the very way the user interacts with you site changes on a mobile device. That said, the typical thing to do is to have a mobile style sheet which is loaded for mobile, and a desktop sheet for desktop. You might even go so far as to limit some of your content on mobile to make the page lighter.
I found http://mobiforge.com to be a good source of info.
Related
I'm working on the mobile version of my company's web site. I redesigned everything using CSS mediaqueries and serverside PHP to perfectly fit in the mobile viewport.
One big problem is facebook's like button.
It is unbelievable small and nearly impossible to click without zooming in. Is there someone with a similar problem? How did you solve this task?
Thanks in advance!
I am building a website for a friend and it's just about done, apart from a bit more content, but now he tells me that it doesn't look right on his iphone. I have checked it on Safari, Opera, IE, Chrome and Firefox on laptop, and on my Android phone and on web-based iphone emulators and everything looks fine. I had him check on someone else's iphone and 1 of the problems goes but the other remains. My site is pretty basic, html and css only, but I am the first to admit that as I am new to this my code could probably be better.
The first issue is that above the header his iphone shows there are what's best described as 5 red bricks evenly spaced along the top. This doesn't show on his mates iphone.
The second issue is that on the "products" page, the right column text under the pictures isn't lined up properly, which is the case on his mates iphone. I don't know what to do here because if I alter the padding I used to line things up, it won't be right on every other browser/device.
I'm not sure what I'm best posting on here, the whole code for the site seems too much, but whatever needed to help answer just let me know. The site address for the products page is http://www.doortodoordrinksyork.com/products.html
Like I say I'm new to this so please keep answers simple.
Thanks in advance.
David.
PS Would appreciate anyone with an iphone telling me how the site displays on it.
If you use a Mac, you can use the iOS Simulator tool that comes with XCode to test out your site in a virtual iPhone/iPod. You can even compare different versions of the built-in browser, which I think is what's causing the difference between your mate's devices.
In general, well-built sites will 'work' without modification on mobile devices, but you may want to look into media queries, a CSS feature that lets you target specific screen sizes with different rules.
I am HTML/CSS/jQuery coder. And I need to develop the website, which will be "zoomed-out" or "fitted" to 320x480 (frequently used resolution) Android mobile device screen.
Or even this solutions should check my screen resolution and connect the right CSS for that.
Somewhere I met that there is android.js file, which connects to HTML and recognizes if the website was open on PC or on android device. But I am not sure at all. I didn't do anything for mobiles before.
Found this article: http://blog.mgpwr.co.uk/2010/09/make-your-website-iphone-compatible/
Don't think it's a right solution to use PHP for that.
Better would be HTML or JS.
A very simple answer would be don't hardcode width on the elements and don't specify font size in pixels. The mobile browser will adjust the rendered page itself.
If however you want more iPhone-like look of form controls like radio buttons, buttons, drop downs, then you need to use the mobile javascript libraries outlined in the other answer.
A simple answer would be a mobile javascript library such as one of the following:
http://www.sencha.com/products/touch/
http://www.phonegap.com/home/
http://jquerymobile.com/
http://jqtouch.com/
I have developed a website in asp.net for iPhone.
Now I am stuck in how to deploy that site on the iphone?
Never done it before.
How to make it iphone ready so the device can access the site ?
Any ideas...
Thank you All.
Social Circus, as Mehrdad says you don't need to change anything to allow users with iPhones to access your site; iPhones use a mobile version of Safari that renders pretty much everything like a normal desktop browser. There are a few things worth noting however if you want iPhone users to have a good experience browsing your site:
No Flash. If you've used Flash at all in your site it won't work on iPhones (or most other mobile platforms).
The resolution of the iPhone is 320x480. The top and bottom bars will take off a minimum of 20+44 = 66 pixels. You could implement a CSS template that re-formated everything into 320 pixel width but this is a lot of work. See something like Google Mail in an iPhone browser for an example.
iPhone users will be able to add a shortcut to your webapp on their desktop, with a name they want, so the actual URL matters less from this perspective.
Finally, it's worth noting that many iPhone users think of webapps as a bit "passe" - a bit old (man that's sooo 2008!). This isn't really fair but it's mostly true. With 65,000+ apps on the app store no-one's going around looking for webapps any more. For a better chance of adoption, especially if it's something like a game, perhaps look at using the SDK to write an iPhone-specific version? (quite a lot of work usually!!)
Hope that helps
Copy the stuff to the Web server, setup the databases if necessary, just as you'd do for a Web app designed for desktop browsers. Is this a real question?
Is it possible to make my own website as iPhone friendly format when user launches my website in an iPhone browser?
Currently if i launch my website in iPhone, it doesn't look more readable and i need to zoom it to see clearly. If i want to provide my website link will be more clear and readable with bold fonts and buttons ( moreover it is like iPhone friendly format) in the first launch itself in iPhone browser, how to make it success? I could able to see some third party websites like http://tringapps.com and all provide the same logic. How to achieve this and what should i do for that? Where to code?
Clave/
You'll need to make a separate version, or at the very least an extreme re-CSSing of your existing site.
Apple has some good tips on getting started here.
There are several toolkits to assist in developing the web apps as well, like this and even this.
There is a good book to get started. Building Applications for Mobile Safari
There are many PDFs available from Apple.