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.
Related
I have an old ASP.NET web application (Web Forms, no MVC) and I would like to make it "look nice" in mobile browsers, while keeping the current design for desktop browsers.
One of my options is CSS media queries , but then - is there a list of standard screen sizes I should adapt it for?
I also read about Modernizr - but it seems to just detect browser capabilities, and I wouldn't know how to use it for my purposes.
What would be my best bet? Appreciate it.
You should take a close look at jquery-mobile which has a lot of built in functions to deal with both changing the display based on device as well as a variety of layouts pre-optimized for mobile views.
Take a look at this link for way more information : http://jquerymobile.com/
However this would not necessarily be easy, depending on the complexity and overall layout of the "normal" web page. However it could easily be implemented to judge what device is being used and then switch to an already defined layout.
I recurred to CSS media queries. Here's a nice introduction. Much appreciated.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I am building a website both mobile and pc version.But I am in a fix what should be used to do it.I have some question for which I am confused :
1. make a website with separate mobile version and pc version and render page depending on the device users use ?
2. Another is a single version website that would be all device compatible.this can adapt the layout according to the device resolution ?
3. if I do the thing I mentioned at point 1 , Can I built a site with wordpress and mobile version with jquery mobile ?
4. If I use a mobile compatible wordpress template I mentioned in point 2, can I use all other plugin form outside?
Please Help me.Thanks in advance.
So what should I do? building two different version ?? if yes, Can I
use the wordpress for both? do you know any plugin or way to make both
pc and mobile version in wordpress ?
This is what I did to achieve what you are aiming for:
Install WordPress as normal.
Add the Mobile Smart plugin - or possibly mobile smart pro.
Create a theme for regular desktop browsers and activate it in WordPress
Create a completely separate theme for mobile browsers. You may wish to use the sample code supplied with the plugin; I created my own from scratch.
Change the settings of Mobile Smart so that it knows which is your mobile theme
Add content and enjoy!
Please read the documentation with Mobile Smart. It is important to understand what it is doing.
Also, remember that your two themes are completely separate, in completely separate directories, so you can use completely different functions.php, headers, footers, scripts, etc. as necessary.
Quote from https://github.com/ChristianPeters/crispy-mobile that I agree with:
CSS media queries are nice. But not for mobile.
They just add up code you send to your clients instead of reducing it for mobile devices.
Imagine you want to make a responsive product page.
Do you really want to deliver a big 90KB product photo, if a 15KB photo would already fill the mobile screen?
Do you really want to compute personalized product recommendations if they are just hidden afterwards?
Do you really want mobile devices to download and interpret your whole stylesheet if half of the interface elements are going to be hidden anyway?
You don't.
If you start mobile-first, don't let your mobile performance be affected by additional desktop features.
Be kind, serve the clients exactly what they need.
If the mobile internet was fast enough and limits weren't as low as they are, I would probably think the other way. But we have to wait few years for that. For now in my opinion it is better to build seperate mobile website. But it is also very useful to have responsive design - that can't hurt even with separate mobile design.
I'm going to avoid too much subjectivity here, as everyone will have a different opinion.
Yes, I have this approach working well on my company website (www.achaleon.com). I was involved in the beta testing for a WordPress plugin called Mobile Smart Pro. It implements elements from a bigger open source project to detect mobile devices and apply a completely different theme to the mobile site. It has the advantage that you can create two completely separate themes and optimise every aspect of them for the device and the context in which it is being used. You can even serve up different content if you wish in the two versions.
This approach requires careful planning and thorough testing. It is also more demanding for the designer. I have friends in the WP community who have built sites this way. My understanding is that this requires stronger programming skills (you need to plan far more carefully than with a standard 'static' css implementation). They used cssgrid.net as a start point
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.
Does anybody know about guide lines, web sites, etc. that describe, what one should keep in mind, if one is programming for a target audience that includes handicapped or older people? Or should one make no difference?
Here's a place to start: http://en.wikipedia.org/wiki/Computer_accessibility
And if you're a .net or other MS developer, msdn has all sorts of links with guidelines:
http://social.msdn.microsoft.com/Search/en-US?query=accessibility%20guidelines&ac=3
And here's my favorit place to start:
http://msdn.microsoft.com/en-us/library/aa350483.aspx
The keyword you are looking for is Accessibility: From the website:
The first and perhaps the most important rule of web accessibility. Not everyone is using the latest version of Internet Explorer, with all the plug-ins and programs that you may require them to have for your website. Different browsing technologies, each with their own accessibility requirements, can include:
Lynx browser - Text-only browser with no support for tables, CSS, images, JavaScript, Flash or audio and video content
WebTV - 560px in width with horizontal scrolling not available
Screen reader - Page content read aloud in the order it appears in the HTML document
Handheld device - Very small screen with limited support for JavaScript and large images
Screen magnifier - As few as three to four words may be able to appear on the screen at any one time
Slow connection (below 56kb) - Users may turn off images to enable a faster download time
1600px screen width - Very wide screen
This basically means that to ensure your website is accessible to everyone you must provide alternatives to:
Images - in the form of ALT text
JavaScript - through the tag
Flash - with HTML equivalents
Audio & video - by using subtitles or written transcripts
Ask some oldies to try out you application as you build it. Encourage them to talk about what they're doing as they use it, and describe any problems. By doing this you'll get a good insight into the types of issues that might crop up, and can address them early.
The Web Accessibility Initiative (WAI) is definitely something to look at if you are developing web sites.