foneFrame is a mobile web template built with HTML5 + CSS3. foneFrame can be used with other mobile dev tools like jQuery, XUI, and Phonegap.
Begin by reading this HTML file & foneFrame.css. There are comments in both files to help you. foneFrame.css is easy to read but foneFrame-min.css has been compressed so it will load faster. Develop and deploy respectively.
The content is in the HTML, the formatting is in the CSS. Edit the CSS file to change your site’s look & feel. For example, the gradient boxes are defined in the i style. Remove the style & the page has a more open look. Below are examples of how the base styles can be used to create specific layouts.
This is the free open source version of foneFrame (CC BY 3.0). The paid version has a number of expanded style sheets that display HTML5, XML, RSS, & Server Side Includes (SSI) files as mobile web pages. These CSS files include additional formatting options and provide a way to display machine-generated files on smartphones. The full version also has instructions for embedding a Google Map and displaying images using thumbnails.
This free version of foneFrame by Azalea Software, Inc. is licensed under a Creative Commons Attribution 3.0 Unported License (CC BY 3.0) This means you are encouraged to share, distribute, modify, mashup, and remix this template if you agree to include the following text, foneFrame, on your main page linked to www.QRdvark.com/foneFrame We want you to use and change this template. We’d just like a touch of credit. Thanks!
misc.
Using a pre-built HTML5 + CSS3 framework will shorten your learning curve. There’s no faster way to jumpstart your mobile web efforts than to borrow someone else’s code. Please share your experiences using foneFrame and help us make it better for all of us.
Keep your mobile page elements small & fast. Bandwidth is a primary consideration when building pages for smartphones. Optimize, compress, & test, test, test.
Many mobile sites have their own URL: http://m.example.com/. Set up an “m” subdomain with your web host. This may involve editing the CNAME table. Upload all of your mobile files to your “m” subdomain’s directory.
The full paid version of foneFrame is an easy way to publish dashboards, alerts, and updates to mobile phones using XML & RSS files. The style sheet turns them into mobile pages when viewed on smartphones.
FAQ
How do I format an FAQ?
Like this...
How do I link to the foneFrame style sheet?
Put this line in the <head> of your file:
Is my browser HTML compliant?
Check to see if your browser is HTML5 compliant.
Where do I validate my HTML5 code?
Use the W3 HTML5 validator to insure that your files are correct. Certain sections of this template aren’t strict HTML5, no surprise given that HTML5 is new and subject to change.
How can I support non-HTML5 browsers?
You can display a mobile page that doesn’t require HTML5 by replacing the first two lines of this template with:
How can I host my mobile site on Dropbox (for free)?
Upload your HTML5 and CSS files, etc. to your Dropbox public folder. The Dropbox public URL of your main index.html file is the URL for your mobile web site. Encode this URL in a QR barcode to help spread the word about your new mobile site.
What about buttons? I need transparent PNGs. Like these?
Now I need a chunk’o’lorem ipsum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Where can I learn more about building mobile websites?
Here are some additional thoughts about how to build mobile web sites. Be sure to test your pages on a variety of phones, operating systems, and browsers.
I made a really cool site using this template!
Great! Please tell us about it: foneFrameazalea.com
How can I embed a Google Calendar:
• go to Calendar Settings & click on a calendar's name
• Customize the color, size, & other options
• Show Navigation buttons & Date, Default View, Agenda
• Width 300, Height 400
• copy and paste the HTML into this template
default style
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
smTxt style
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
foneFrame is a mobile web template built with HTML5 + CSS3. foneFrame can be used with other mobile dev tools like jQuery, XUI, and Phonegap.
Using a pre-built HTML5 + CSS3 framework will shorten your learning curve. There’s no faster way to jumpstart your mobile web efforts than to borrow someone else’s code. Please share your experiences using foneFrame and help us make it better for all of us.
