I am developing a page that needs to be able to view on a mobile platform. What resolution should be the standard for this? I live in Norway, and there are mostly iPhones and HTC-phones on the market here.
Any ideas?
If you want to accommodate more than just iPhone and HTC resolutions, I would consider incorporating responsive design into your site. Google also recommends it.
Related
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I got a requirement! I would like to convert Normal Web Sites for Mobile Web Sites.
Actually I want a on premise software recommendation that has the capability to do the same as www.dudamobile.com for example.
Kind regards.
(Sorry for my English)
one of the things you could do is implent the Bootstrap CSS Framework (or any other CSS Framework), to style the website more mobile freindly.
Alot of CSS Frameworks are made to auto-adjust more freindly to native mobile browsers and other mobile browsers, and work for various screen sizes.
see: http://getbootstrap.com/css/#overview-mobile
Let's say I want to build a web application for Phonegap.
I can design it as much as I can on my pc screen, but since there are a lot of different screen densities on mobile devices and we use mostly px units on HTML/CSS, the elements' sizes may vary a lot from one device to another...
Since I don't have all those physical devices, is there another way I can test it? Using somekind of browser addon, app or online tool?
Thank you
Use mobile phone emulator
http://www.mobilephoneemulator.com/
select device where you test and then open your site link,
here is another good simulator
http://transmog.net/iphone-simulator/
i use 2nd one to test my site and app....
I have created one HTML5 mobile web app and tested in different devices like iphone,ipad,android phones and tablets.How I can optimize the size and resolution for this app in all these different devices?
You could use CSS media queries to optimize your web app for different screen sizes rather than optimizing it for different devices.
Responsive Web Design is what you want. The Responsive Web Design article on MDN is good introduction and includes links to many other helpful articles.
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.