Mobile view for a web site - html

Is it true to say that when we want to write a mobile view of a web page, we will create a static web page? I mean, no updates, ajax, javascript or things like that?

Modern mobile browsers have very ample support for javascript, HTML and CSS features, so no, it doesn't need to be a static web page unless you're targeting outdated/non-smart devices.
Take a look at Quirksmode javascript compatibility tables for mobile and caniuse.com feature tables for HTML/CSS.

I think here you can find the answer.

You could also use jQTouch for iPhones/Androids

I know that if I open a web page and I choose desktop view It will be like a pc and I will see everything but I thought when I choose mobile view it will be more optimized and with no fancy ads with flash or something like this.You know what I mean?

Related

HTML5 on mobile web browsers

I need your advice guys. I am developing a web browser application for mobile phones and it will be pure html5. I want that web browser application (not native application) to run on every mobile phone's web browser and my questions are
How I am going to adjust layout for different screen resolution? How can I achieve cross-platform compatibility make it look ok on every device. Do I need to do have a CSS file and have layouts for different resolutions.
If I need to have layouts, is there any cross platform mobile web browser application developing tool that gets html5 files and generates modified htlm5 files with layouts for different resolutions?
Thanks for your time...
To automatically adapt the screen resolution, you can use 3rd party framwork such as http://jquerymobile.com , http://jqtouch.com , and http://www.sencha.com/products/touch/ . But the widest cross browser compatibility is jQueryMobile, take a look at http://jquerymobile.com/gbs/
I don`t really know about the tools what you want. But so far I developed by using framework, so cross browser compatibilty will be less painful. I write the code by using 'commonly used IDE' such as Aptana, and Eclipse with JSDT.
I dont think you can access phone hardware feature by using pure javascript. For GPS, Ive never tried to use HTML5 geolocation API on mobile web apps. But there is 3rd party bridging tools to make your HTML5 web apps to have access on hardware device and ported as native apps, it is http://phonegap.com .
Hope this help you, Correct me if I`m wrong :D

Is there a website where I can just post my HTML/CSS and see the result?

While developing a mobile Application I tend to see error messages on my console. These are sended from a server and are meant to be seen in a browser.
However it is really hard to inpret these if you see the HTML and CSS. I would love to just find a website where I can just put the Code and see the formatted result. Does there exist a website like that?
http://jsfiddle.net/ does run JS/CSS/HTML, it doesn't emulate mobile devices if that's what you're after?
Though its pasted/typed input, so it won't... read from your App either...
jsFiddle will show the page in whichever browser you view that site in. You could also browsershots.org which allows you to get screenshots in different browsers - although currenlty there are no mobile browsers.

Is it possible to develop a web site for a touch based browser without using HTML5 or CSS3?

I'm developing the CSS file for the mobile version of the website my group are working on for our web design coursework, and I was wondering if it was possible to design a site for touch based browsers using the currently ratified specification of HTML and CSS, as the other member are doing for the desktop variant, or am I going to have to use the draft specification of the new language. I'm not intending to use anything too elaborate, I'm only attempting to allow the user to navigate the site with their finger, and the current implementation allows me to activate a dropdown menu on the desktop, but when I try to navigate on my Android handset, nothing happens.
The menu button gets illuminated in the way that all links in my browser do when they get pressed, but nothing happens. The research I've done since this revelation has led me to the conclusion that I'm going to have to experiment with the new spec, though since this is coursework, I'd rather stick with current standards than experimental drafts of new ones.
P.S. I'm only developing an informative site, not an application.
Yes, you can use older versions of HTML. iPhone, Palm OS, Android, and recent versions of the Blackberry OS all use Webkit, which is the same rendering engine that Chrome and Safari use.
In fact, the very first page on the World Wide Web will work just fine.
We'd need to see your code for your navigation bar to troubleshoot, but it's probably something along the lines of using a hover event to display the navigation (touchscreens can't have a hover event).
I can browse to any site on my iphone using the touchscreen. The language is not the problem. Most mobile browsers on smartphones can handle html(4)/css(2) fine. You should be more worried how to show the content so it will be easy to navigate on the site using a (small) touchscreen. Usability testing is your friend here. Browsing a website made for desktop can be very frustrating (not impossible) on a small touch screen.
Also the size of images and stuff shouldn't be to big. Since loading those can be a pain. At least the t-mobile(Netherlands) g3 network is slow, if available at all.
Note that the 'currently ratified' version of CSS is CSS1 (from 1996), CSS2.1 isn't yet a W3C Recommendation. So from that point of view the standards your other members are using for the desktop variants are not much more ratified than HTML5 and CSS3.
For sure do it! just ensure links are larger for fingers. Also allow the site to resize.
Most mobile sites are HTML1.0.
You would be silly using html5 + css3 unless you knew that it was only going to be used on an iphone eg. webapps.
And don't forget you can still use JavaScript!
Go For It!

tabbed html application

I am writing a complex tab based web application where each tab is unrelated to each other in the sense that there is no interaction. So for ease of development i want I want each tab to be a separate html page viewable on its own and at later stage I can assemble them via tabs or may be menus or trees
so question or questions are:
I am planning to use iframes, does all major browser support them?
Are iframes going to be deprecated, so what are alternatives e.g. is object tag supported by all major browsers?
May be i can use some better strategy instead of iframe/object?
But what I love about iframes is that it can be totally modular, so each page doesn't know about other.
Note: i selected the answer which explain well but still i am not sure why not iframes
question iframes vs ajax may answer that.
Yes, all major desktop browsers support iframes. So do many mobile browsers, including IEMobile, Opera Mobile, and Safari on the iPhone. The only major browser I know of that doesn't support iframes is the BlackBerry Browser.
The object tag is supported by most browsers, but the implementation is extremely inconsistent across the various browsers.
What's wrong with just having a flat page with an ordinary navigation menu? If you are only displaying one page at a time, and the only interface element being placed outside of the iframe is a tab menu, then why not just integrate the tabs into the page layout and do away with the frames?
Frames of any sort tend to break the familiar browser behaviors that people are used--like the forward and back navigation buttons. And they completely disable the use of bookmarks. When building a website, you should try not to restrict or dictate to visitors how they're allowed to browse your site. If the user wants to open a link a new tab, they should not be left without a navigation menu. If they make their browser window a particular size, the page content should fill that area, not a predetermined area specified by the dimensions of the iframe.
Frames are inherently user-unfriendly, which, unsurprisingly, makes them search-engine-unfriendly; which is why so few professional websites use frames/iframes. Cheap broadband is widespread enough these days that reloading a few extra kilobytes of navigational data makes no difference to the overall user experience.
If I were you, I would use jQuery UI Tabs instead of my own solution.
it looks like your website is not static, so i don't see why you're doing it with bare HTML.
I'd use ASP.NET and CustomUserControl as each of your tabs, that they all the tab would be truly independent and you can reuse them anywhere in your application
For the separate pages in each tab, you can as well use server includes.
To answer your first 2 questions:
iframe is supported across all the latest web browsers however i am not sure about mobile browsers. Opera mobile yes, dont now about iPhone.
the next major iteration of html is being led by WHATWG and the iFrame will be supported. It is also supported in xhtml
As far as different approaches, that very much depends on what you are going to be doing with the tabs. if each tab is going to have a lot of information on it or take a while to load then separate iFrames is probably best. Also, if you are going to reuse the code as independent pages else where then iFrames are also a good option.

Generating browser side web page thumbnails

I want to generate a thumbnail of a web page in the browser, so I can have multiple scaled down iFrames within a single page.
IE can do this using filters. Mozilla can do this inside a <canvas> with drawWindow() if you have Chrome privileges (like an installed plug-in).
Is there any way to do this in WebKit? Is there any generic cross browser way to do it?
I know you're looking for a client-side way to do this, but considering the spotty support across the board you may want to look into generating the thumbnails on the server.
khtml2png allows you to generate webpage images from the command line. It's not the prettiest solution, but with a little scripting it would allow you to generate thumbnails on the fly, and you wouldn't have to worry about browser compatibility.
WebKit's nightly build (41944 from March 24 2009) has support for transforming elements (including scaling) as well as other goodies like CSS gradients.
There is more information on the WebKit blog and here.
I'm guessing this features are also available in Safari 4 but I haven't checked.
edit: It looks like this is also making its way into Mozilla as -moz-transform.