HTML for Mobile

Hey Gang,
I've seen a few retialers adding links to their HTML email
promotions saying
"To view this on your PDA click here"
Which basically takes them to an HTML page designed and
developed to fit in
a PDS screen.
Using device central (great tool in CS3), I can get a sense
of some of the
common mobile screen resolutions and differnces between PDA's
and flip
phones ect.
My question is, (I looked but couldn't find), are there any
good online
resources for mobile HTML best practices for development?
From what I understand, most devices use a version of Opera.
BUt are there
restrictions such as "Can't use certian CSS tags", "or can't
use background
images", "can't nest tables".
Thanks
-Dave

.oO(Dave Bar)
>My question is, (I looked but couldn't find), are there
any good online
>resources for mobile HTML best practices for development?
>From what I understand, most devices use a version of
Opera. BUt are there
>restrictions such as "Can't use certian CSS tags", "or
can't use background
>images", "can't nest tables".
You could start with a simple test. Get Opera, open a website
and press
shift+F11 to switch to small screen rendering mode ...
Micha

Similar Messages

PDF or HTML for mobile Technical Documentation and Newsletters

Hi,
I've been reviewing the pros and cons for PDF and HTML for mobile technical documentation and newsletters and wanted to get your honest thoughts on this.
Here's the scenario:
I need to create mobile technical documenation and newsletters that are interactive, i.e. video, commenting/annotating, links, forms, etc.
Given how the mobile publishing market is rapidly evolving, what is the most practical format, (with minimum format issues) to use for both short term and long term? PDF or HTML? Why?
Based on your choice, which format would you use for non-interactive documents that offers the most creative options and usability? Why?
Paul

Hyper Text Markup Language ( HTML ) is going to work better. Mainly because the way mobile is setup, the interface has to conform to the device and with the other elements coded into the interface, HTML is far better. You keep referring to usability, so even in non-interactive scenarios in mobile documentation, you're better off using HTML.

How do I export bookmarks from Firefox for Mobile (android) to an html file?

I have bookmarks on my Firefox for Mobile v 33.1 that I would like to copy/back up to an html file. Even if I access the desktop version on my tablet I don't see the Show all Bookmarks - Import/Export option. This Android profile used to be linked through the old Firefox Sync to my PC but the issue is that I can't access it from my PC anymore as I just had to replace the hard disk. I have now installed the new Firefox on my PC but it won't sync with the old Android version as the new Firefox Sync is not compatible with the old one. Also when I go under Sync on the Android, it says the email account is deprecated.
Going forward I understand I need to remove account on the Android, update to the new Firefox Sync and newly link PC and Android device. However I have read that If I remove the account on my Android Firefox and set up the new Firefox Sync on it, I will lose my old bookmarks and it will only start saving and syncing bookmarks from then on even if I use the same email address to set it up. If this is the case and before taking this step, is there a way I can copy my old Android bookmarks to an html file?
All suggestions very much appreciated! I'm completely lost.
Thanks

Tangram that is an answer for desktop Firefox. It does not apply to Firefox for Android.
There is no way to export bookmarks/history in Firefox for Android.
However your Firefox sync account is unrelated to the Firefox for Android profile. You can safely remove the account without loss of data. Then set up a new Sync Account.

Good resource for HTML + JS mobile development

Hello,
It seems that while Adobe AIR is focusing strongly on mobile now, the resources for delveloping for it almost only limited to Flex. I've already spent a lot of time coding in HTML, CSS3 and I'm not intended to switch to Flash, Flex. My question is, that anybody aware of any good tutorial on HTML based mobile development with AIR?
It should be the same as a desktop app, because AIR's philosophy is write once, use anywhere, but there must be some issues that we sould be aware of.
Thanks,
Tibor

I don't work for Adobe, so I don't know their reasons. This is just what they have public communicated about the AIR for mobile solution. I think some of the choices about AIR were about time to market, and the number of users. Heck, there are people upset that it doesn't support ActionScript 2.
Actually, Adobe seems quite committed to the web standard solution tools as well. They are hiring jQuery experts and are committing improvements back into the jQuery framework. I expect to see some real mobile based enhancements in Dreamweaver to support developers who want to build mobile web apps. To that end I think PhoneGap and jQuery are going to be your best friends for your development tool chest.
AIR does have a StageWebView, you could just create an instance of that and attempt to build you app in it, but I personally would recommend PhoneGap
Hope this clears up any questions,
Chris

Embedded video HTML won't work for mobile

Hi,
I have a video successfully embessed on my desktop site but I can't get it to work for mobile:
You can see it here on the desktop: MTV ART HOUSE MOSCOW
I put the same code in for the mobile version, all I did was change the width and height, can someone please help me fix this?
<video controls="controls" preload="auto" width="1010" height="581" autoplay="autoplay">
<source src="assets/trailer.mp4" type="video/mp4">
</video>
For mobile I changed it to:
<video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
<source src="assets/trailer.mp4" type="video/mp4">
</video>

Hello,
Please try to enter the code below in phone layout. (I have marked the change in bold)
<video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
<source src="../assets/trailer.mp4" type="video/mp4">
</video>
Muse create phone layout content in a new folder named as "Phone" as there is no asset folder there we need to correct the directory path in phone layout. I have corrected that in your code.
Regards
Vivek

Creating a site for mobile devices

Good morning,
I have a number of questions relating to the creation of a
site for mobile devices. My client has given me the assignment to
re-design his current website, and to also create a sub-site
suitable for mobiles. I have spent a number of hours looking around
on the Internet and trying to gain a better understanding of these
issues. Still, a number of questions remain. if you can give me any
additional understanding, that would be great.
Question 1:
Is my understanding correct: I basically need to create two
sites, one for the wide-screen browser, and one for the mobile
browser? I can direct visitors to the mobile site using a CSS or
javascript link - if their browser identifies them as a mobile
browser?
Question 2
Mobile devices come in all sorts of shapes and sizes and
versions. PDA\s and iPhone's have different screensizes and
resolutions that smart--phones, which in turn are different again
from older and simpler phones. Should I design a site for a number
of different types of phones? That would a huge amount of work...
Question 3
I also own Device Central, an App which I should think is
very useful in this situation. But I fail to understand it! OK, so
I can see what my photo or website or flash file looks like on my
Nokia N73 - but I am not designing specifically for that phone. I
also want my design to look good on all the other phones! My client
needs a website that is not tailored to one phone, but to all
phones.
Question 4
And why does Device Central not have profiles for the iPhone?
I would think it is popular enough to warrant its own profile... (I
post this from the Netherlands, where the iPhone is not carried
yet, and so I have only ever held one in my hand). Is this because
the iphone can see regular sites just fine?
Question 5
How does Dreamweaver help me build a mobile site?
Question 6
My client wants to show video on his website. In fact, that's
what this website is all about: showing sports-videos from high
profile sporting events. Which video-formats are most suitable?
Question 7
Do all mobile phones support flash? Or only a few? Or none?
It seems to me that a flash website would allow for more creativity
in the design.
Thanks for any help you can give. Any resources you could
point me to are also very welcome...
Sincerely,
Rogier Bos
Rotterdam, The Netherlands

Macnimation wrote:
> Hi,
>
> I'm experimenting with creating a small site off a
standard site, for mobile
> phone/devices.
>
> Basically, I want to load a basic list page, which has
links to pages that
> will display and run flash movies.
>
> The flash movies, in FLV format are already at 640 x 480
which run fine in the
> main site.
>
> Is it simply to resize the movies to fit the mobile
content size , or will
> they "auto" resize?
>
> Do I have to chnage the webserver configuration in
anyway, its a standard IIS
> site at the moment, but MySQL with apache is also an
option.
>
> Would standard html do or would the pages have to be
done using xhtml or wml?
>
> I would like if possible to get this infomration first
before starting it, so
> I can possibly reduce delays.
>
> Any help or pointers to tutorials would be grateful
>
I'd like to check out the PDA scene some day soon, too. In
the meantime,
there's a recent discussion of this topic here:
http://www.sitepoint.com/forums/showthread.php?p=3288343#post3288343
www.geobop.org - Family Websites
www.invisible-republic.org - Adult political websites (Mature
adults only)

Text-input component with auto-complete functionality for mobile

Hey guys,
I wonder if there is a text-input component with auto-complete functionality optimized for mobile development with AIR like the one that Android provides natively as you can see here http://developer.android.com/reference/android/widget/AutoCompleteTextView.html and here http://developer.android.com/resources/tutorials/views/hello-autocomplete.html.
At least I didn't find it in the latest SDK and I think such a component is pretty standard nowadays. Or did I simply overlook it?
Thank you guys for any advice.
Regards,
Thilo

Hi relaxtraja,
thanks for your reply!
I knew that there are a lot of auto-complete scripts on the web. What I was hoping was, that Adobe provides an officially supported auto-complete component optimized for mobile as part of the SDK (like in the Android SDK as I pointed out), but that doesn't seem to be the case. It's sad, because it's an essential part of modern UIs in mobile applications.
I've already created an auto-complete component by myself based on Spark components and I will end up using it. But I will have to optimize it for mobile applications beforehands. I just think something this essential should be provided by the SDK.
However, thanks for posting!
Regards,
Thilo

How can I specify a different css file for mobile browsers?

I'm experimenting with updating our website to be "mobile friendly". I could use some help.
We use a lot of static HTML landing pages for things like links from email ads, etc. What I'm trying to do is have 1 landing page so the content/html page is always the same, but the page will detect what browser/device you are using and then load a different css file depending on what it is. But, we don't want to have to load the style info from the PC version if you're not on a PC.
What I'm doing now is specifying the media type in the css link, like this..
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css">
What's happening is it's loading the main stylesheet first, and then the 2nd one changes some styles if you're on a device with a max width of 480 pixels (like an iPhone). But since it's loading the PC styles first, it's making some things look screwy.
So, is there a way to say "If you're on a PC, load this stylesheet. If you're on an iPhone, load this one instead." .. without javascript? I don't trust javascript too much on mobile devices. I feel like this some simple little thing that I'm missing that will make it all automagically work.
We don't want to have different content depending on the browser, just different stylesheets. Can anyone help?

Hi
Would it be better to do 2 different stylesheets, or just one big one and add a section at the bottom like:
@media only screen and (max-device-width: 480px) { .styles {whatever: styles;} }
2 separate style sheets are recommended. The reason for this is that the Safari mobile browser, (as used in iPhone etc) will download any/all images specified in a style sheet even if they are not used or specified in a media-query rule, this is a know bug with that browser.
I'm also having a new issue where the style "clear: both;" doesn't seem
to be working right. I set up my top horizontal menu using float: left,
and there's a lot of links so on the smaller screen it wraps, which is
fine but now the wrapped links are floating over the page content...
This is one of the reasons that floats should not be used in style sheets for mobile devices, the only exception I know of is for small typographical feature such as 'pull-quotes', (and never use float: right;). It is also recommended to include a menu at the bottom of the page, (or at least a link back to the top).
It works, if I have the iPhone as portrait it looks great, but if I turn
it to landscape, everything is zoomed in. But if I switch back to
portrait, everything is the right size. Is there any kind of way to get
the landscape to have the normal zoom level? I know I can do
"initial-scale=1.0", but that is just for when the page loads, not if
you change it afterwards...
I have heard of only one recommendation to fix this and that is a page refresh on resize, but due to bandwidth limits now being implemented by many providers it is probably not a good idea, you could try setting -
maximum-scale = 1.0
as well.
PZ

One Folio for mobile and web

A client wants to use one publication (a magazine) for mobile devices (iOS, Android, Windows Store) and the web. The latter should also be usable on non-touch devices. The current solution for viewing the publication in the browser (desktop) is based on a pdf and flash.
Is using Adobe DPS/Folio a viable solution to this problem? What is your experience with embedding Adobe Folio publications within websites? Is this possible with the Professional Edition? As the magazine is free: Do the downloads/views deduct from my 5,000 included downloads?

You can enable social sharing to display content in the "web viewer" so that it can be viewed on non-touch computers.
http://helpx.adobe.com/digital-publishing-suite/help/using-social-sharing.html
You can embed this web viewer content within your website by specifying a Hosting URL. It's possible with a Professional or Enterprise DPS subscription.
Whether this is a viable solution depends on your content and your needs. Look at different web viewer examples or build a test app if you already have a Pro account.
Yes, the downloads/views of web viewer content counts against your fulfillment download bundles.

Digital Signatures for Mobile Devices

We currently use smart cards that have our digital signatures and would like to have this transferred or be able to use on a mobile device. Our forms currently require digital signatures, however, the person can't view the form (created in Livecycle designer ES2) from the mobile phone, therefore we need to upgrade to ES4. Will we be able to use our current signatures using mobile, without having to use a signature created from Adobe?

LiveCycle ES4 has Mobile Forms module which actually capable of rendering your existing XFA based forms as HTML5 based form which could be opened on Mobile devices as well.
Mobile Form has Scribble signature for Mobile devices, the digital signature is not supported on Mobile devices.Check this : http://helpx.adobe.com/livecycle/topics/mobile-forms-dev.html
Thanks,
Wasil

Adjusting for mobile

hi guys,
the problem i am having is when i scale down my site to about 330X460 the page looks a bit untidy and I want to change this but I don't know how.
As you can see the logo needs to be scaled down and the text on the nav bar needs to change. I want the 2 words 'Casa Nerja' to go to the next line, also the nav bar has to be bigger to allow for 2 lines.
I have setup a 'mobile' media design but a s I said I am not sure what code to change here.
all my code below is divided into 3 sections, source code, css stylesheet.css and mobile.css. the mobile.css is set to be used when it hits 800
source code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Untitled Document</title>
<style type="text/css">
@import url("CSS/stylesheet.css");
</style>

<link href="CSS/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)">
</head>
<body>
<div id="logo"><strong><img src="images/logo.png" width="300" height="212" alt="Casa Nerja"></strong></div>
<nav>home search about us contact us links</nav>
<section>
<p><strong>Casa Nerja was created in created in 2005 under our former name Easy Casa, in 2014 we changed out name to Casa Nerja.</strong></p>
<p><strong><br>
    We are devoted to finding the right property for the right person in and around the Nerja area. This includes Torrox, Velez-Malaga, La Herradura and Almuñéca.</strong></p>
<p><strong><br>
    Due to or long and successful reign as an real estate buisness we boast one of Nerjas bigest databases of properties for up for sale including, Re-sales, New Builds, Off Plan, Reformations and Plots of land. We also specialize in short and long-term rentals and holday lets based on a weekly rental.</strong></p>
<p><strong><br>
    Searching for a property can be a laborious affair trudging from one estate agent to another, repeating the same answers to the same questions every time. Casa Nerja can take the pain out of searching for your new home whether a Villa, Townhouse, Apartment or Cortjo.</strong></p>
</section>
<header>
<h1>about <span class="casa">Casa Nerja</span></h1>
</header>
<p><strong><br>
</strong></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1> </h1>
<p> </p>
</body>
</html>
stylesheet.css:
@font-face {
    font-family: 'CaviarDreams';
    src: url('CaviarDreams-webfont.eot');
    src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
        url('CaviarDreams-webfont.woff') format('woff'),
        url('CaviarDreams-webfont.ttf') format('truetype'),
        url('CaviarDreams-webfont.svg') format('svg');
body,td,th {
    color: #f7941d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
body {
    background-color: rgba(214,214,214,1);
    background-image: url(../images/about-background.jpg);
    background-attachment: fixed;
    background-size: cover;
a:link {
    color: #f7941d;
    text-decoration: none;
a:visited {
    text-decoration: none;
    color: #f7941d;
a:hover {
    text-decoration: underline;
    color: rgba(255,255,255,1);
a:active {
    text-decoration: none;
    color: #f7941d;
h1 {
    font-size: 36px;
    color: rgba(255,255,255,1);
    text-shadow: 5px 5px 10px rgba(0,0,0,.5);
.casa {
    font-family: CaviarDreams;
h2 {
    font-size: 24px;
    color: rgba(255,255,255,1);
#logo {
    position: absolute;
    left: 5%;
    top: 0px;
    width: 382px;
    height: 197px;
    z-index: 200;
nav {
    position: absolute;
    left: 5%;
    top: 190px;
    width: 90%;
    height: 31px;
    z-index: 01;
    background-color: #000000;
    text-align: right;
section {
    position: relative;
    top: 380px;
    width: 60%;
    z-index: 201;
    background-color: rgba(0,0,0,.8);
    padding: 5px;
    border-radius: 0px 30px 0px 30px;
    float: right;
    right: 5%;
header {
    position: absolute;
    left: 5%;
    top: 275px;
    width: 85%;
    height: 101px;
    z-index: 202;
    border-radius: 30px;
    background-color: rgba(0,0,0,.8);
    padding-left: 5%;
    padding-right: 0%;
mobile.css:
@charset "utf-8";
section {
    position: relative;
    top: 380px;
    width: 90%;
    z-index: 201;
    background-color: rgba(0,0,0,1);
    padding: 5px;
    border-radius: 0px 30px 0px 30px;
    float: none;
    right: 5%;
    left: 5%;
header {
    position: absolute;
    left: 5%;
    top: 275px;
    width: 85%;
    height: 101px;
    z-index: 202;
    border-radius: 30px;
    background-color: rgba(0,0,0,1);
    padding-left: 5%;
    padding-right: 0%;
Can you explain to me what needs changing and not just change it for me, I want to learn.
thanks
James

Instead of creating a separate CSS file for mobile, which I have to admit doing with my first mobile project a few years back, you can just use media queries and modify existing selectors for each of your breakpoints. A quick search on Google produced the following tutorials:
Introduction to media queries – Part 1: What are media queries? | Adobe Developer Connection
Introduction to media queries – Part 2: Building a responsive design | Adobe Developer Connection
I haven't gone through these to see if they contain any outdated methods, but David is an exceptionally reliable source.

[Flex 4.5.1] What is the best way of adopting a flex built website for mobile "as is"?

What is the best way of adopting a flex 4.5.1 built website for mobile "as is"?
I have a website built with flex 4.5.1 which I want to be working on mobile as it should - meaning that touch style of interactions should be working not mouse.
The question is: Do I HAVE TO recode all of my website from Application into Mobile Application in order to be a more lightweight version of the original one, which includes: remove some functionality, pages, animation, build a separate backend and cms to control it etc.?
OR
Can I just define mobile skins, for my existing components to use when in mobile mode, in which I could have done some tweaking by removing some unnecessary parts and changing component interactionMode to Touch ?
Are both options which I see possible and if yes - which one would you recommend?
Thanks in advance!

Thanks for the answer. Yeah I bet you figured out what I want the answer to be, but is it ? That's why I am asking here. I can see my website on my HTC Desire HD and it's working pretty well. If I reskin the parts that need a bigger hit area or the scrollers to work with touch so I don't have to scroll the actual scrollbars with my finger, remove some complex animations - everything will work just fine... The problem is that I am not sure if that is the right way to do it or if it is possible at all.
I do get your point about not designed for mobile stuff, but while with html 5 you get the job done for web and mobile with little differences at the same time, in flash you need double time cause you'll have to build 2 projects. And since the framework is one for both web and mobile.. why not...
I want to see the pros and cons of the both approaches I suggested. In a complex modular architecture I could easily swap one web module with a mobile module for example or change skins or components if I need more lightweight ones, but do I have to copy all that logic in to a MobileApplication, can't I do it with Application and use the MobileComponents (which are simplier and less functional) if the project actually needs them...
I do hope you get why I am asking these questions, and I can't believe I haven't found a guide or something like that "why this and not that" when it comes to mixing web with mobile development and flex... If you have, please share the link, I would be happy to read. Or someone with the experience in what I am talking about shares some knowledge, that would be great!
Thanks.

E-commerce for Mobile Interface

Hi
This is my first attempt at have an existing shopping cart at BC to offer its customers the ability to view and order through their mobile phone. I have been doing regular, non-commerce pages for quite some time now. But when I apply the support for MOBILE and redirect everything to the /mobile folder, I can't find the means to over-ride the click-through to the standard pages of the shop.
Here is the site's store home page with the catalog list on it
http://www.copenhagenpastry.com/our-pastries
Here a page in the mobile folder with the same file name, but nothing happens
http://www.copenhagenpastry.com/mobile/our-pastries
I thought that was all I had to do along with setting a new set of styles for the mobile device. How does one override the Modulestylesheet.css?
Please advise and many thanks in advance!
Teejay

In my opinion the mobile/tablet redirect option isn't the best option for you if you use a lot of built-in modules that have their own URLs like the shop. You have to have every page that is on your regular site have a version in the /mobile/ folder and that's not possible with the eCommerce module. There's no way to setup an alternate layout for your shop. You can create unlimited module templates for {module_catalog} and {module_shop} (http://helpx.adobe.com/business-catalyst/partner/using-custom-templates-modules.html) in which case you'd have to build separate pages for your shop manually and not rely on the default shop view which is controlled by your overall shop layout.
And, even then, you cannot have multiple product detail layouts-- you can only use one.
I think your best bet is to make your site responsive so that you can use the same layouts but they flex based on media queries in CSS if you are going to be using a lot of BC's modules. The mobile/tablet redirection script works great for sites that are just static HTML with maybe some incontext editing, etc. but not advised for eCommerce functionality.

Does Apple provide any certification for Mobile Application testing (iOS)

Does Apple provide any certification for Mobile Application testing (iOS)
Kindly share the details of any Mobile Application testing certification provided by Apple.

I'm not aware of any testing done by Apple except as part of the app approval process:
https://developer.apple.com/appstore/resources/approval/index.html
If you have questions about the review process, though, you can contact Apple via the contact links on that page.
Regards.

Flex for mobile development

Is it possible to use Flex for developing RIAs for mobile
browsers?
From what I've read, Flex doesn't seem to be suitable for
creating applications on mobile phones. But I wanted to be sure
that's why raised this question here.

Adobe Newsbot hopes that the following resources helps you.
NewsBot is experimental and any feedback (reply to this post) on
its utility will be appreciated:
Adobe - Flex 3:
Flex is a highly productive, free open source framework for
building and maintaining expressive web applications that deploy
consistently on all major
Link:
http://www.adobe.com/products/flex/
Adobe Flex 3 Language Reference:
Frame Alert. This document is designed to be viewed using the
frames feature. If you see this message, you are using a
non-frame-capable web client.
Link:
http://livedocs.adobe.com/flex/3/langref/
Flex.org - Rich Internet Application Development:
Welcome to the new Flex.org. This site aggregates Flex news
from a number of sources, and allows community members to
contribute their own content as well.
Link:
http://flex.org/
Flex 3 - Versioning:
You might encounter some versioning issues when working on
Adobe Flex applications. When compiling, you can choose the version
of the SDK to use and you
Link:
http://livedocs.adobe.com/flex/3/html/versioning_1.html
Adobe Flex - Wikipedia, the free encyclopedia:
Adobe Flex is a collection of technologies released by Adobe
Systems for the development and deployment of cross platform rich
Internet applications based
Link:
http://en.wikipedia.org/wiki/Adobe_Flex
Adobe - Flex Developer Center:
Check out the getting started guide on learn.adobe.com, with
special areas for developers using Flex with PHP, .NET, Java, and
ColdFusion.
Link:
http://www.adobe.com/devnet/flex/
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

HTML for Mobile

Similar Messages

Maybe you are looking for