I'm trying to make a version of my website optimize to Blackberry devices, however I lack of information regarding this devices and google seems not to be helping.
Have anyone create website optimize for blackberry before? or know any kind of post or information that could help?
I don't know if media queries could help since those devices seems to open screen standard resolutions.
From Optimizing A Web Site For BlackBerry Devices:
If you thought targeting Web sites to
work with several different browsers
was difficult enough, try throwing
BlackBerry support in the mix.
Designing a Web site to work with
BlackBerry handheld devices can be
frustrating because the BlackBerry Web
browser has fewer capabilities than a
standard Web browser. This lack of
features greatly affects design
strategy because slower download
speeds and limited screen size must
now be factored in.
The first thing you should do when
optimizing a site to support
BlackBerry devices is download and
install the official BlackBerry
Device Simulator and BlackBerry
Email and MDS Services Simulator
Package. The device simulator and
simulator package emulate the
functionality of actual BlackBerry
products and allow you to access and
test a Web site in a virtual
environment.
When you first open a site in
emulation, you'll probably notice the
BlackBerry's CSS support is limited
and your site may not look so great.
Since most front-end developers are
trained to be reactive, your initial
solution maybe to attach another
stylesheet, target the handheld medium
and adjust the classes and ids in that
stylesheet accordingly. Unfortunately,
the BlackBerry disregards both screen
and handheld media style declarations.
In fact, many of the useful style
declarations that could create a
loophole for the lack of media
support—including display:none and
visiblility:hidden—won't work on a
BlackBerry. For a complete list of
supported CSS declarations, refer to
the BlackBerry Content Developer
Guide.
So what's the solution? The real trick
to optimizing a Web site for
BlackBerry devices (without any hacks
or work-arounds) is using well-formed
XHTML in conjunction with CSS and
omitting unnecessary layout elements
using the screen medium. This focus on
semantically correct XHTML to drive
your layout may not look pretty on the
BlackBerry, but it's advantageous for
several reasons. For starters, since
you're dealing with a limited amount
of screen space and relying on what
equates to dial-up connection speeds
you want to keep the majority of your
display content for the BlackBerry as
text-based. Secondly, the well-formed
code will result in better overall
search engine optimization because
you're using code standards that are
friendlier to the search engine
indexing process. Finally, the focus
on semantics will make the site
scalable and rid you of any worries
associated with the consequences of
adding text, modifying links or
changing the appearance of an element
in your stylesheet.
With full-featured browsers integrated
into the latest generation of
handhelds (Safari on the iPhone, IE in
Windows Mobile devices) aesthetics
support on mobile devices is vastly
improving. Either way, good coding
standards promote graceful degradation
and a provide a certain level of
future proofing that ensures users can
view a Web site no matter how outdated
or cutting-edge their device is.
Related
I am wondering if its a good idea (if I want consistency across a multiplatform build) to include a css reset, or perhaps a css normalize library?
My concerns are of course, application speed, load time and memory usage, and the goal is of course UI consistency across platforms...
Overview
CSS reset is a must, Cordova / Phonegap all use the phones native browser so Windows Phone this is an Internet Explorer wrapper, android it's now a Chrome wrapper (old version use their own browsers wrapper), iOS uses what ever version of safari mobile for that version of iOS all of witch have more support for HTML5 so there could be differences. this means you need to reset so you have a base that is the same for all devices / browser the same as a Desktop website. but performance entirely relies on what your doing if you just use a small basic reset it will be less but then even a big one it's would you notice it anymore then not having it.
CSS Reset
So we know browsers have slight differences in CSS Engines Default Font's and stuff so we use a reset to prevent that this is the same for Mobile browsers (thats what cordova/phonegap use) so a reset is always recommended however, even if your building a cordova/phonegap mobile application for both iOS and Android is a royal pain in the arse Android support loads of Device Sizes iOS only has a few. but these sizes can cause massive problems not to mention the DDPI you have to use as the DPI varies so much.
Performance
There is a slight performance drop, not that you would see under any messurement it unless you include a massive CSS Reset system like http://getbootstrap.com/css/ that would add a bit of a performance hit but would you notice it if its 0.5 seconds your javascript takes longer from phonegap to init(), however look at bootstrap first if there is stuff in there that you would be using it would be worth it just to save development times i'm constantly using the alerts from http://getbootstrap.com/components/. there are small ones like http://html5doctor.com/html-5-reset-stylesheet/ if thats all your wanting.
Sources
The Internet it's full of tutorials telling you to implement a reset! https://www.google.co.uk/search?q=Phonegap+use+CSS+Reset&oq=Phonegap+use+CSS+Reset&aqs=chrome..69i57j69i60l3.3494j0j7&sourceid=chrome&es_sm=0&ie=UTF-8
You want facts ok stop using Phonegap/Cordova most of what it does is implements or utilizes HTML5! HTML5 is a work in progress so should not be used! http://www.w3.org/TR/html5/
ME: 5 Years of Mobile Development including developing parts of the Windows Phone 7 Phonegap. while being a developer for one of the Platform Preview applications. so i was building parts of phonegap for WP7 before most users new that WP7 was coming out.
Absolutely. If you're developing the app for multiple platforms then it sounds like a great idea. Though I have no doubt you'll still encounter differences across platforms.
I can't see how it would affect application speed/load times/memory usage.
While developing the app for cross platforms there are lots of issue regarding the css . It will be better to reset the css . But there are still issues regarding the performance .
This article might be helpful to you http://www.informit.com/articles/article.aspx?p=1915792&seqNum=6
Yes, you should!!
I've developed cross platform apps.
and each time I've used CSS reset.
I'm not sure about the exact context of a Phonegap app as I've never actually worked on one, but generally from a performance point of view any CSS reset shouldn't have an impact at all.
However, my opinion is that more often than not you shouldn't even bother with a full-fledged CSS reset targeting a bunch of specific elements and properties - you often end up overwriting them further down the stylesheet anyway.
A simple universal selector margin/padding reset is all I use today, which I supplement with my favourite box model tweak.
* {
margin:0;
padding:0;
box-sizing:border-box;
}
Maybe 10 years ago someone would tell you that the universal selector is slow, and it could've been true then, but using it on its own has been proven to be absolutely harmless today.
The rendering/layout engines of pretty much every recent browser are so quick anyway, not to mention the fact that even low end mobile devices nowadays are equipped with multi-core CPUs.
I wouldn't even call it micro optimisation, that's how negligent the impact is.
Now if you were to use div.header * - that's much more expensive, but probably still not something to lose sleep over if you don't have a few thousand elements on the page.
Have a read and test it for yourself.
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/
I have an existing website for schools and colleges management which is developed in ASP.NET,C# and SQL Server.
Now I am planning to support for the mobile applications (like basic models from Nokia/Samsung and for opera mobiles). I know the normal site we can access through some of the devices without any change, but needs to be optimized.
I am preparing another version which will be only few required fields and easy navigation for mobile. For that which method I need to use.
Normal ASPX files with optimized HTML code.
Or using WAP controls
Should I use HTML 5
Please help me to decide.
I recommend using the HTML5 templates(includes Modernizer) that come with ASP.NET MVC 3 and the jQuery Mobile framework. Let the jQuery Mobile framework do all the multi-device heavy lifting for you.
jQuery Mobile Supported Devices
you can use normal aspx pages without any issue. only thing you need to optimize the file size.
you can develop better solution using HTML5 but only problem is, it is not supporting all the devices.this is used html5
or just use any from List of mobile frameworks
You can use normal ASP.NET Web Forms in conjunction with HTML5. Take a look at HTML5Boilerplate which includes Modernizr.
Use a combination of feature detection and CSS Media Queries to serve up the appropriate files, layout and images for a particular mobile device.
Do not fall for "Responsive Web Design" techniques that cost too much in terms of performance and esthetics (basically re-skinning desktop browser version of site and calling it "mobile-ready"); disclosure: this links to blog post from me.
Use ASP.NET Mobile Controls: ASP.NET Mobile Controls
.. (i.e. How to add mobile pages to your asp.net site)
You will build a few UI controls, in a short amount of time, specifically for all mobile devices and it will be a much faster and much better user experience on mobile devices.
The UI renders minimal HTML and you control what gets rendered, meaning much less bandwidth required. Even though I have a 4G phone, so many times we are in a building that does not give a 4G signal and I much prefer sites that have mobile-specific output.
The UI is mobile-specific, users will not have to zoom around the page left/right up/down and zoom in to be able to click buttons or elements that were made for viewing in 1024x768 or higher.
Users with the latest 4G and dual core phones, and that happen to have 4G connection at the moment can always switch their phones into 'full HTML version' if they want more functionality than what you build using the ASP.NET mobile controls. However, if you go the other route and adopt JQuery-based or HTML5 code, you are excluding all previous generation phones from accessing your web site at all in many cases (besides it being slower and not as good a user experience as mobile-specific rendering). Even if you decide to focus only on the latest phones, you will also have to deal with html rendering issues, cross browser compatibility, besides the slow and UI complexity issues.
Good luck.
Using .NET Mobile Framework is always a good option as well as Web Forms which will appear on all mobile devices regardless of carrier/phone model, plus lots of phones support ajax, and other client side scripting that'll work. HTML5 is a growing standard though, and when more phones start supporting it, you'll reap tons of the new benefits.
Model View Controller is always good to follow. Allows for scalability and for components to be abstracted.
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.