I'm starting to develop WAP (websites for mobile devices) websites, however I'm finding there are such a wide range of mobile devices that stretch from the advanced iPhone to older blackberries. Are there any helpful sites that discuss best techniques and good practices so that I'm not ignoring any of the major issues?
Cheers
I suggest looking through the articles here, here, and here. If I was tackling this problem I would try to group the various mobile devices into as few unifying groups as possible. This way you could detect the device server side and provide the user with the best looking site for their device. For instance the iPhone has all that webkit stuff that other mobile phones don't render so obviously it's site would be different from on old Nokia with a browser. I think looking up best practices for each individual group of devices is the way to go.
Related
I currently send out multiple desktop version newsletters that have a "View as Mobile" link with a hosted mobile version, but I am trying to explore options for displaying a mobile version right when the user opens the email.
I've read about responsive designs with variations of the following code using internal stylesheets
#media screen and (max-width : 320px), screen and (max-device-width: 320px)
But according to http://www.campaignmonitor.com/css/ not all ESPs allow or read internal style sheets. In short, is there a good way to have responsive emails using the above code or is it not viable due to lack of support?
In general, email clients are bad at supporting css (for a few reasons) so you may want to stay away from doing too much with CSS. That being said you can find support table here http://www.emailonacid.com/blog/details/C6/media_queries_in_html_emails and just make sure you use CSS to progressively enhance for supporting clients instead of punishing those that dont.
I agree with Andy in 'email clients are bad at supporting css'. This is a general rule and has been for ages.
That said - when we talk about Mobile Email clients, there aren't any phones out there running MS Outlook '95, if you know what I mean!
Look at the market breakdown of email capable smartphone devices out there, and you'll see that support is present in a higher percentage than the desktop world.
At our company, more than 50% of the readership of our weekly emails is on iPhones alone. that includes desktop Gmail, Hotmail, Outlook etc. We're seeing a continuing trend toward mobile usage being our focus, with desktop playing second fiddle.
We're not running out and building mobile websites, but we're tailoring our emails to be mobile friendly. For example: Everguide Weekly Guide Email
So regarding your CSS - it is in fact very difficult at this time to ensure media queries are being read and interpreted correctly.
We have found that Android does not like to play ball as iOS does, but with some good tweaks and code hacks, we're getting there.
Here's an example of one of our transactional email templates - that is capped at 520px wide, but scales to device widths etc when on different devices.
It takes testing and patience to get this right. For our next project, I will be starting from scratch using this new guide from Campaign Monitor: Campaign Monitor's guide to Responsive Email Design
I will be building it up bit by bit, Using adobe shadow (this has been renamed recently I think) and various on-screen emulators to make sure the code is truly responsive every step of the way.
If I were you, id nail down your own 'boilerplate' first, save this off, then make all future email designs off this template.
I specialise in this - and there is no tried and true method as yet.
Good luck!
The problem with creating responsive e-mails is that lot of clients just ignores the style tag, so there is no way to build real responsive e-mails...
But there is a trick... ;)
You can build the e-mail in a mobile-first way, so the basic html is the mobile version.
If you create the media queries in a way, that they "recreate" the original desktop version, then you have a kinda good solution...
So if a client ignores media queries, then it will show the mobile version.
I found a great template what works in a way that I mentioned, you can find it here:
http://internations.github.io/antwort/
My question is about resolutions and user interface of web sites. I am developing a free web site for a non profit organisation for having experience and I have not worked with mobile apps/ web sites. Will thankful if you please can help me.
Can you please guide me as per best practices UI for computer browser and for mobile are same or two different UI are developed ?
I am also confused what is standard resolution for a web site and how to manage resolutions on different screen sizes (of course cannot develop for different screen sizes).
Please guide.
Thanks
A common technique in use right now is responsive design. That is, your design and layout of the page will adapt for the resolution and orientation of the device it is being displayed on, without a need to change anything.
The easiest way to get started with this is CSS media queries. Check out this article for more general information: http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
I'm developing a web page that would work on iPhone, iPad and other mobile devices. I'm curious if there is a resource on best practices for CSS for mobile devices.
I have tried searching but come up with random sites with tidbits of information but no comprehensive overview. I guess I could buy a book about this subject but that is not a sure thing either and I would imagine there are resources on the web out there I'm just not finding them.
I think HTML5boilerplate does a very good job,
"A best practice baseline for your mobile web app."
You might be interested in this answer I gave a while back
Mobile Web - Things to consider?
Also, you should check out
http://caniuse.com/
which outlines mobile support for HTML5 and CSS3.
Should we consider iPad as a hand-held/mobile device , when we make website for smart-phones like iphone, android, Blackberry, Windows Phone?
iPhone and iPad share same Operating system. So along with iPhone i should consider ipad also as a mobile device or I should consider iPad as a desktop/laptop device.
Well, that depends. In general, I would say the iPad belongs in the laptop/desktop category. Most of the time, mobile sites are designed because of the small display-size or browser limitations on mobiles devices. The iPad has both a reasonable screen-size and capable browser.
However, when the site requires a lot of interaction with the user (like a web app or social site), I would prefer an interface that is a bit more kind to touch screens.
Alternatively, you could take a look at responsive design.
It depends on your site, I would say. If the 'desktop' version of your site works OK on the iPad, and is easy to use, there is no reason not to use that one.
I would say not unless you are developing in flash otherwise it falls into the category of netbooks IMHO, simply because of the larger screen real-estate.
Handhelds / mobiles are usually low resolution / small screen 'need to sacrifice' devices.
It depends upon the kind of webapp you're developing. A typical publishing site, for example, might be perfectly legible in the default layout for regular desktop computers. But since users visiting the site on iPad and tablets will be using their fingers to navigate, you may want to have a streamlined presentation that optimizes readability and makes navigation buttons and links a bit larger and easier to target by finger.
Also any touchscreen platform is not going to have use for a :hover state on links. This may have implications on your IxD if that kind of user feedback is important for regular platform users.
My approach currently is to use responsive design in a mobile-targeted front-end theme, that adapts use of screen real-estate depending upon resolution but still optimizes for the touchscreen experience.
iPads tend to be used as a netbook / laptop replacement more than a mobile device, in my experience. Most sites work pretty well on them already. You should certainly check your sites on one, but barring the lack of Flash and smallish issues like the lack of a onmouseover event, there's little reason to develop an entirely separate site for them.
I have an existing website that I need to develop a small portion of for mobile devices. For reasons that are not in the scope of this entry - I am using the Microsoft platform and tools - VS2008, ASP.Net, VB.net, .Net AJAX Framework, jquery.
I have 2 questions:
What is the best page size (Height and Width - mostly width) to make the pages as I do not know what devices will be accessing the mobile portion of the site. I can detect if they are mobile devices and direct them accordingly to the mobile portion but I do not want to write customized content for each mobile device - so I would like to create something that will be sort of a one size fits all mobile app.
Any suggestions or links for Mobile Web development in the .Net 3.5 framework environment?
Thanks
Your average mobile device still has a very small screen resolution.
A quick google found a number of sites listing this sort of thing, or pointing to lists, the best one I saw was:
Cell phone screen resolution by Brand and Model
or for a better idea of average:
Cell phone screen resolution, sorted by size
As for building the mobile version, I'd start with System.Web.Mobile, and work my way on from there - taking in System.Web.Ui.MobileControls, and also their walkthroughs.
And can I say "thank you for thinking of us"? As a user of the "mobile" internet, it's always a pain to come across a heavily javascript enabled site (I'm looking at you SO) that doesn't work on my phone (Windows Mobile 6.1, with Opera Mobile 8.5 installed) because of limited (or percived limitations) in the JS support.
Just had another thought - with everyone talking about DRY - looking into an MVC framework would be a really good thing to do - then your controllers can all be the same, and just return a modified view based on the browser caps - Scott Hanselmann included a bit about this in his MIX talk, all good stuff.
I knew I had more here.
Scott also had a podcast (ASP.Net and the mobile web) on this, and the Mobile Device Browser Files are on codeplex
We are developing a mobile app right now as a separate application. The reason for this design decision is that we won't use our existing pages because they contain too much information. So while Scott has a point about being "DRY" to an extent, it is not an accurate generalization to make.
Mobile apps should be optimized for really small screens and low bandwidth. Reduce images, JS files, etc. as much as possible. This will improve the user's experience. The best thing you can do is to get a mobile device or some simulators and check out how they perform/look on those devices. Here's a cool one for iPhone.
Also, keep in mind that many mobile users only use mobile apps for a few minutes - and only to get to critical information quickly. Your app should make it easy for the user to access only the information they need with the lowest amount of few clicks and page loads.
Ideally you should be developing pages that work regardless of screen size. Creating separate pages for mobile devices means having to update things in two places when they need to change. This goes against the principle of don't repeat yourself. Create a stylesheet using the handheld media type to serve your content to mobile devices. This allows you to reposition the elements into a single-column format quite easily. Just beware that many mobile devices will report to the server that they accept both handheld AND screen media types, because they are trying to offer a consistent user experience with the desktop. You will likely need to override some screen rules in your handheld stylesheet.
There are several distinct display sizes that is worth considering when you build up your XHTML+CSS templates.
They are as follows (width in px):
120 - I suspect there is no need to worry about smaller displays than 120px. Less than that would probably have to be served in WML anyway.
128
176
240
320 - probably the largest width you need to worry about at the moment.
All variations should be suited with these widths. Also consider setting the width with something around 10px less than the view port (e.g. 240 must be 230). Same goes for images. That is necessary because of the scrollbar which is shrinking the viewport even more on many mobile browsers.
There is no need to worry about height, as with normal browsers, that is not a concern - one can always scroll down. However, a good advice might be to keep pages relatively short.
Oh, and I will point you out WURFL, although I haven't used it myself, perhaps you might find it useful.