New to WAP, are there any good resources out there for WAP on Smart phones IE: Android/iPhone/WebOS/Etc...
Looking to do some dev work but don't know where to get started
Modern smartphones don't use WAP... just standard HTML/Javascript. There are many tutorials on the web for this... just to give a couple of examples:
http://www.boutell.com/newfaq/creating/iphone.html
http://building-iphone-apps.labs.oreilly.com/
Related
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.
As a developer of a traditional ASP.NET web application (non-MVC) who is getting requests for a mobile-friendly version, I'm wondering where I might find some wisdom about the best way to approach the problem. We currently mask most of our database access through web service calls.
It seems like many shops would find themselves in this situation: We have limited resources and don't wish to create a maintenance headache by having versions of an application diverge greatly.
Is there a set of best practices for taking an existing System.Web application and reorganizing code in order to accommodate adding mobile-friendliness. The general approach I'm thinking of is:
Make small stylistic changes on the
client using CSS or even JavaScript.
Make any necessary changes in data,
workflow, or markup in server-side
code.
Keep as much code as possible common
to the two versions by organizing
non-UI logic into separate
assemblies. Conditional compilation
would be used in code-behind where
UIs must diverge.
What are the gotchas that I'll run into with this approach?
Short and sweet:
Read the W3C Mobile Web Application Best Practices
Separate your business/application logic and presentation logic as much as possible
Do server-side detection of mobile devices; serve an extremely simplified UI to mobile devices
Use client-side techniques like CSS media queries and feature detection (such as that done with Modernizr) to do progressive enhancement
The long version:
The most important thing to remember is that as similar as they appear, the mobile web and desktop web ARE different. The analogy I use the difference between a street and a sidewalk. Both of them are made for generally the same purpose - to get people from one location to another. However, they were designed separately and are intended for use by different modes of transport. You can drive a car on the sidewalk, and you can walk in the middle of the street, but neither experience will be optimal.
Long story short, for a good mobile site, you must design specifically for a mobile device. This doesn't mean you can't reuse logic - you definitely should. I'm just saying that using JavaScript/CSS to hide a few elements does not turn a regular site into a mobile site.
For what it's worth, I recently gave a presentation with one of my colleagues on mobile web development strategies. It is mostly targeted towards mobile web in higher education (college campuses) and my campus (UCSB), but many of the strategies and techniques are widely applicable. Interested parties can find the presentation and related resources here: https://it.ucsb.edu/groups/wsg/mobile-web-brown-bag
Resources
Server-Side Device Detection:
DeviceAtlas
WURFL
51Degrees.mobi
Client-Side Feature Support Detection / Progressive Enhancement:
Modernizr
EnhanceJS
Random Resources
Mobile Web Resources (My colleague's reading list)
W3C Mobile Web Application Best Practices
First, these days mobile doesn't necessarily mean doing the things that System.Web.Mobile come, but rather supporting the mobile use case and the limitations of mobile devices. Or, you want to strip down your app to be relevent to mobile users, and you want to do things like limit bandwidth required, browser plugins, heavy scripting and screen size required. But you actually don't need to go back to the bad old days of WAP and such.
From my reading the way forward seems to be to design for mobile first and then customise the layout using #media CSS to introduce more design/functionality concepts in more capable devices.
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.slideshare.net/arborwebsolutions/practical-beyond-responsive-web-design
I have a mobile website. I need to detect mobile web browsers by screen size or resolution and display the website accordingly.
Can anyone help with detecting web browser and screen size?
Also, how can I open my website according to the screen size?
I suspect that you don't mean a WAP browser but rather a mobile browser. (As you've tagged your question with iPhone & Android.)
You need to use a device capability database to do this on the server side.
There are lots of options (see other answers and link below), but as you're using ASP.NET, I'd recommend looking at http://51degrees.codeplex.com/. This uses WURFL data and is the defacto replacement for MDBF (which used to be the best asp.net solution).
More information on using the 51degrees solution can also be found in blog post by Scott Hanselman and Steve Sanderson.
There are lots of other similar questions about this here on SO: https://stackoverflow.com/search?q=detect+mobile+browser+capabilities
For the detection part, I recommend to use WURFL. There is also a similar question/answer on SO.
For the resize part, I recently did something similar for a web application of us. I tried to keep it really simple and make the elements floating/dynamic resizing.
To test it, there are several emulators available, I used those for BlackBerry, Android, and Windows 7 Phone.
You can use DeviceAtlas for this: http://deviceatlas.com/
I use Mobile Device Detection and Redirection from 51 degrees.
Here are the properties that you can use:
Request.Browser.IsMobileDevice
Request.Browser.ScreenPixelsHeight
Request.Browser.ScreenPixelsWidth
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.
I'm working on an ASP.NET website which targets desktop browsers. We want to enable an optional mobile view (e.g. http://m.sample.com) which will offer a few simple pages which will be mostly text. There will be not need for AJAX or even Javascript, and there's no user input - it's really just tables of text with a few links to navigate between the pages.
What's the best way to set this up so it will work on Blackberry, Windows Mobile, and iPhone?
Should I be looking at ASP.NET Mobile support, or just rolling my own pages?
UPDATE: This was for m.microsoftpdc.com. We went with the /Mobile subfolder approach, and used Scott Hanselman's iPhone tips for viewport and other stuff.
I have done this in the past and the way I did it is by separating the pages by creating a directory for Desktop and creating a directory for Mobile. This gives you better separation of the views, since in reality they are a lot different. In ASP.NET Forms I used the Model View Presenter pattern a lot since it went with the way ASP.NET Forms functioned the best. That way I could reuse some code between the two views. Then in your index.aspx page for the site, you just parse the user-agent string of the request to figure out the browser and redirect accordingly. So, for example a person with an iphone comes to your site, you parse the user-agent string and figure out it is an iphone. Then you redirect to m.sample.com which is pointing to Mobile/Index.aspx page. Otherwise you redirect to Desktop/Index.aspx.
I did the parsing of the user-agent string at the page level, but of course you could do this kind of logic in the HttpModule or HttpHandler level also.
Edit
I just rolled my own pages since we weren't targeting phones that have WML support. That would be the only reason in my opinion to use the ASP.NET Mobile support, is if you want to support WML enabled phones also.
You have only identified 3 handset 'platforms' as your target. One thing to consider is that there are a LOT more non-Blackberry / Windows Mobile / iPhone handsets out there and perhaps they will be the majority of your audience. (?)
From how you describe your application (JUST text), you should be able to hit pretty much any Internet-enabled cell phone out there, which is pretty much every phone sold in the last eight years.
Rolling your own will likely give you more control over how the content is displayed and navigated, which your users will appreciate, but you will lose much of the automatic formatting and advanced interaction capability that something like ASP.NET Mobile may give you. It is a trade-off that you might want to consider in light of where you anticipate your user community will go with this in the next 2 years.
Is it possible that they may ask for more of the desktop capability on the mobile side? If it is a likely 'yes' (even more so when I think of the 3 platforms you are targeting) then I'd recommend some automated formatting / enablement tool like ASP.NET mobile. If not, just roll your own and leave it simple and easy for your visitors to use.
I know from personal experience there really isn't much you need to do for the iPhone. I usually rather just browse your regular site with my iPhone.
Just my two cents though.
Different style sheets based on user agent will handle the "pretty". Are you using master pages? You could also set up different masters based on the device using device filters.
At Mix this year (2009) mdbf was announced. See this video or this blog post by Scott Hanselman for examples on using it to identify and redirect mobile browsers as needed.