Mobile Web & HTML5 Performance Optimization » CSS Media Query for Mobile is Fool’s Gold Cloud Four Blog Read the follow up article written August 21, 2013 Ethan Marcotte’s article Responsive Web Design has caught the imagination of web developers. Several subsequent articles have touted the CSS media query feature as a way to build mobile-optimized web sites. Even I’m guilty of contributing to this meme with my article on CSS orientation. Unfortunately, CSS media query is fool’s gold for mobile devices. The Short Version Ferreting out the problems with CSS media queries for mobile devices is easy if you look at what media queries purportedly promise: All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code. The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution. Core Assumption: Speed Matters More on Mobile I’m going to point out several technical flaws with media queries. Wait?
How to Build a Native Mobile Application in Dreamweaver CS5.5 In earlier articles we covered HTML5 Semantics and multiscreen authoring in Dreamweaver. In this article we're going to look at the process of building a native phone application in Dreamweaver CS5.5. The PhoneGap framework has become popular with web designers who want to write native moble applications using HTML, JavaScript and CSS. Adobe decided to team up with these people and integrate their framework for Android and iOS directly into Dreamweaver. Having said that, it's necessary to install the Android and iOS SDK's into Dreamweaver in order to be able to use them. Note that for the PC, you can only install the Android SDK, on the Mac platform, you can install both. The Android SDK is meant to install seamlessly with a one-touch button. Not wanting to give up, I conducted another search and found this document: Error "Android SDK failed to install" with Easy Install | Dreamweaver CS5.5. Note: This problem appears to be with the Android emulator and doesn't appear to be with Adobe.
Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. Becoming responsive#section2 Recently, an emergent discipline called “ responsive architecture .
Creare un sito per iPhone con jQTouch e PHP | Beat Fly Blog | tutorial photoshop jquery css php Ultimamente mi stò avvicinando molto al mondo del mobile con molto entusiasmo sia per la semplicità con cui possiamo sviluppare le nostre applicazioni, sia per la minore difficoltà che si può incontrare nell’utilizzo di TAG e scripts. Nel mio caso, possedendo da tempo un iPhone, ho scoperto come sia davvero divertente sperimentare mini siti o proporre applicazioni da vendere ai miei Clienti utilizzando ottimi strumenti open source disponibili in rete e continuando a mettere in pratica le normali nozioni CSS, JavaScript e PHP di sempre. Non molto tempo fa, citai l’ottimo Framework jQTouch specifico per la creare applicazioni specifiche per iPhone i iPad e dunque proprio utilizzando lo stesso, vedremo oggi come creare da zero un sito ottimizzato per il device di casa Apple. Questo tutorial cercherà di spiegarvi come: Il sito che andrò a realizzare è composto di: Come si evince dal nome, jQTouch si appoggia al Framework jQuery, dunque iniziamo ad importare nella nostra pagina i file JS:
Free iPad CSS layout with landscape/portrait orientation modes by Matthew James Taylor on 27 May 2010 The iPad has finally launched in Australia today, hooray! I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. To celebrate the launch of the iPad I have built a special iPad optimised website layout that uses pure CSS to change layouts in the portrait and landscape orientation modes. In Landscape mode the layout is in two columns. In both orientations there is a header at the top and a footer at the bottom. How does it work? The first thing I do is lock the layout's resolution to a 1:1 ratio so that each pixel exactly lines up with the pixels in the iPad's screen. Locking the layout to a 1:1 ratio will prevent the zooming-in and out that normally occurs when the iPad is rotated (normally, landscape mode is more zoomed-in because the width of the webpage is displayed across 1024 pixels, as opposed to portrait mode when there are only 768 pixels available). I hope you enjoyed this post.
Create Your Own Fullscreen Web Apps With Fullscreen.me Fullscreen.me is an interesting service that allows you to create iOS web apps that run in fullscreen mode. You can create little web apps through mobile Safari using Fullscreen.me’s website interface. This is nice if you have a lot of websites that you visit on your iPhone, and you don’t want to have to navigate through Safari tabs to try to view them all. You can instead create little icons on your home screen of all your favorite sites… If you visit Fullscreen.me on your iPhone, you are given the option to enter a URL to create a fullscreen web app. There is also a nice list of popular iOS compatible websites to choose from (all Google apps). If there’s another site that you want to create a fullscreen app of, you simply have to enter the desired URL to Fullscreen.me. I tried the process with apple.com. You can change the title, set the color of the Status Bar, and change the icon of the web app. Fullscreen.me is great for creating customized web app experiences on your iPhone.
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development Get off(line) Taking your web sites and apps offline with the HTML5 appcache There’s a general (and understandable) belief by even many developers that web sites and web applications can only be used when the browser has a web connection. Indeed, this is routinely cited as one of the real advantages of “native” apps over web apps. But as unintuitive as it sounds, in almost every modern browser and device (except even for now IE10 developer previews, but here’s hoping that changes), that’s not the case, provided the developer does a little extra work to make their app or site persist when a browser is offline. In this article, I hope to clear this whole areas up once and for all, show you how to do it, and point to some great resources out there for learning more about creating offline versions of your web sites and apps. Making a cache As I’m sure you know, browsers cache HTML, CSS, JavaScript files, images and other resources of the sites you visit, to speed up the subsequent loading of pages. Tools
4 Tools for Building a Business Mobile App In a world where there’s always “an app for that,” more small businesses see the value in creating their own mobile apps. The technical know-how necessary to develop an impressive app and the cost of hiring a professional developer, however, have discouraged the production of many would-be branded applications. Affordable do-it-yourself alternatives give all companies — even those with minimal tech expertise — a way to create their own apps. Even the code-illiterate can build passable apps using these four new platforms. 1. Bizness Apps Bizness Apps focuses on industry-specific features. It's a difficult platform on which to customize beyond color choices, but it's a tool that's incredibly easy to use. Platforms: iPhone, iPad, Android, HTML5 Price: $39 per month for the iPhone app plus $10 per month for an iPad, Android or HTML5 app. 2. There's a better chance of creating and releasing a useful app with these features, but users also have a steeper learning curve than some of its competitors.
Full Screen Web Apps One of the first problems encountered when building a mobile web app from scratch is the amount of space consumed by the browser's address bar. This tutorial will demonstrate how to reclaim the screen real estate otherwise lost to the address bar while accounting for orientation changes, content height problems, and internal document links. Subsequent Changes to Techniques & Software Certain aspects of applications or techniques used in this tutorial have changed since it was originally published. Mobiletuts+ Web Apps Category Defining the Problem One of the most difficult aspects of designing for mobile devices is the limited amount of screen space available. For example, consider the following mobile web site screen shot: The above screenshot was taken on an iPhone 4 with both the Mobile Safari address bar and toolbar displayed. Now take a look at the same screenshot without the browser UI: The Meta Tag Approach This is obviously less than ideal. The JavaScript Approach Event listener: Great!
Appcache Facts