開發 iPhone Mobile Web App 一些小技巧
Jul 17th, 2012 by appleboy 推薦本文到Facebook去！ 推薦本文到Twitter推特去！ 推薦本文到Plurk噗浪去！ 開發 Mobile Web App 有好一陣子，底下來紀錄過去開發的一些經驗以及 iPhone 上面一些 meta 的設定小技巧，適用於 Mobile Web 開發，如果有任何錯誤，請大家可以留言給我，也或者有不錯的建議都可以一起討論。 良好的設計模式 底下是 Web 程式設計師應該注意的事項 html 檔案必須宣告 DOCTYPE 型態以目前 HTML5 就必須寫成 <! 優化 Web Content 為了區分手機跟桌面版本不同的 content，我們可以使用 Media Queries 來區分，在加上 max-device-width 和 min-device-width 去偵測整個頁面大小 (screen size)。 另外如果是 Desktop 版本可以加入底下 另外或者是直接在 CSS 裡面判斷: 另外針對 screen 或 print 可以直接在 head 裡面寫入 或者在 CSS 裡面寫入 Viewport Meta Tag 設定 開發 iPhone 手機版 Web，為了符合 device 真正寬度，必須設定 viewport 的 width 等於 device-width。 另外可以針對使用者可否放大或縮小螢幕，以及是否可以縮放 initial-scale: 畫面初始化倍率 maximum-scale: 畫面最大倍率 minimum-scale: 畫面最小倍率 user-scalable: 用戶是否可以縮放畫面 設定 Web Applications 設定將網頁儲存為 home screen icon 的圖片路徑，預設值為 57×57 定義其他裝置 size 圖片 設定載入頁面時 loading 圖片 隱藏底部 iPhone button bar，看起來更像 iPhone App 更改 status bar 樣式 另外一個重點，當網頁載入完成後，可以隱藏 URL bar 如果旋轉裝置，則必須在加上 resize event 如果不想讓使用者滑動網頁，可以加入底下 Reference: Configuring an iPhone Web App With Meta TagsiOS Developer Library
Mobile Web
The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network. Traditionally, access to the Web has been via fixed-line services on laptops and desktop computers. However, the Web is becoming more accessible by portable and wireless devices. An early 2010 ITU (International Telecommunication Union) report said that with the current growth rates, web access by people on the go — via laptops and smart mobile devices – is likely to exceed web access from desktop computers within the next five years.[1] The shift to mobile Web access has been accelerating with the rise since 2007 of larger multitouch smartphones, and of multitouch tablet computers since 2010. The Mobile Web has also been called Web 3.0, drawing parallels to the changes users were experiencing as Web 2.0 websites proliferated.[2][3][4] Mobile access[edit]
Bring Basecamp with you
Highly recommended. Primarily through word-of-mouth alone, Basecamp has become the world’s #1 project management tool. For the last 10 years, companies have been switching to Basecamp because it’s famously easy-to-use, reliable, and It Just Works™. Combine that with our best-in-the-biz customer service, and you’ve got a unique and delightful package. A track record you can trust. We’ve been in business for 15 years, so you can depend on us to be here when you need us. On the Mac, PC, iPhone/iPad, Android and via email. Basecamp’s at home on Safari (Mac, iPhone/iPad), Chrome (Mac, PC, iPhone/iPad, Android), Firefox (Mac, PC), and IE 9+ (PC, Surface). No “IT Guy” required. Basecamp runs in the cloud on our secure servers, so you don’t have to mess with anything technical. Can I see how other people use Basecamp? Absolutely. Free weekly classes + live Q&A. We also offer weekly “Be a Basecamp Pro in 30 minutes” online classes with live Q&A. Who else uses Basecamp? A few quick reads and links.
設計行動裝置網頁(Mobile-Web)的10個要素
［image credit:Basecamp mobile］ Mashable的Brian Casel(@CasJam)是一個網頁設計師， 他觀察到網路行動化的趨勢越來越值得被重視，因為使用手機上網的人比以前多了很多，這對網頁設計者以及網頁擁有人來說意味著甚麼呢？ Casel告訴我們以後除了電腦版的網頁，也要做出一個對應手機或行動裝置的網頁。 我們整理編譯了Casel給網頁設計者的十個重要提醒，包括了設計過程，設計策略及實際操作，希望大家在設計及推出網頁的時候先認真地研究一番手機網頁及電腦網頁的不同。 1 確立網頁設計的內容，方向及類型 執行一個網頁設計的計劃前先要確定的一些方向： 全新網頁設計－是為某產品/品牌做一個新的網頁，包括電腦頁面及行動裝置頁面嗎？ 以上3個不同的情況都有不同的設計策略，是網頁設計者開始做網頁設計前必須要釐清的。 2 確定公司/品牌所要表達的形象 很多時候，網頁設計者/開發者需要為公司設計一個網頁，因此首要注意的是公司的形象及產品的特色，Casel舉了hyundai汽車網頁來做例子： 當我們進入hyundai(hyundai.com)汽車的網站，立刻看到的是他們汽車的大圖，目的就是要給消費者一個鮮明的汽車形象，讓大家知道他們的汽車外型有多吸引人: 接著我們看到行動版本的網頁，表達的內容跟電腦版網頁一樣，汽車的形象依然清楚的呈現在消費者面前，沒有太多複雜的界面，因為Hyundai公司對網頁的訴求就是要用鮮明的汽車圖片抓住消費者的目光。 以上是Hyundai.com的網頁，如果我們用手機及電腦上Hyundai.com，會出現的畫面不會是上面的示範，而會Hyundai.com/TW/en， 而台灣版的網頁在我們實際研究下，似乎就跟上面Hyundai.com的版本有點落差。 3 在設計行動裝置版網頁前務必預測網站流量 如果是要用舊有的電腦版網站為藍本，重新設計行動裝置版的網頁（目前這種案例居多），建議先用Google Analytics或其他測量網頁流量的工具來作一些訪客背景調查，能夠掌握越多關於網站訪客的資料越好， 例如：大部分訪客是用甚麼樣的裝置或瀏覽器來看網站的？ 4 學習如何設計可自動調整版面的網頁設計（Responsive Web Design） 5 簡單，但不能簡陋 6 網頁模板建議採用單欄式設計（Single－Column Layouts） 7 善用摺疊式目錄
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. 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. In short, our flexible design works well enough in the desktop-centric context for which it was designed, but isn’t optimized to extend far beyond that. Becoming responsive#section2 media types
32 Examples of Usable Mobile Website Layouts
The mobile web is clearly changing the way we think about layout design. Even back just 5 or 10 years ago there were barely any developers working on a solution for mobile. Now it seems everybody is doing their Internet surfing on some type of smartphone device. This process can be difficult without a bit of inspiration. United Pixelworkers Oliver Russell Charmin Cerahati Bodhum Love & Luxe Culinary Institute of America Orange Breaking News North Carolina Wine Atommica Orbital Devs South Dakota Sioux Falls The Land of Nod Bluegg Digital Agency Solid Shops Beth Israel Medical Center J Taylor Design Retail-Me-Not Heathlife Poet Freak The Backlog The Intro Workshops One Little Dream Tim Hortons Lifetime Pears WordPress Theme Orestis Web Development Team Treehouse Mobilism Conf 2012 Webshocker Humana
