Combining meta viewport and media queries - QuirksBlog
If you want to make your websites ready form mobile, it’s best to combine <meta name="viewport" content="width=device-width"> with width media queries. That will give your site the optimal width (as determined by the device vendor, who really ought to know), and your site will look the better for it. Lanyrd, Simon and Natalie’s latest brainchild, uses exactly this technique, and it establishes the
jQuery Mobile
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
スマートフォン時代の携帯サイト作成術
This document discusses various web technologies supported on the iPhone including Safari, Webkit, CSS properties like borders, shadows and transforms. It also covers viewport meta tags, touch icons, file inputs, hovers, tooltips, plugins and fixed positioning. Finally, it lists common fonts and includes phone number and format detection meta tags as well as examples of Japanese mobile websites.
The Great WebKit Comparison Table
On this page I compare WebKits in order to prove that there is no “WebKit on Mobile” and to figure out which one is the best. My hope is that eventually I’m going to gain some insight in the “family tree” of all WebKits. This page only contains tests of CSS and JavaScript items that work in some WebKits but not in all. Adding more items, all of which are either supported by all or by none of the W
携帯が故障し、料金体系とか補償が複雑化しすぎて不思議なことになっている事実に閉口した : にぽたん研究所
14 年前からずっと au の携帯を使っています。 あ、当時は au じゃなくて IDO (日本移動通信) でしたね。 去年からは iPhone と二台持ちで、移動時のネット閲覧はほとんど iPhone を使用しています。 MNP で iPhone 一本にして au を解約すれば良かったのかも知れませんが、メールアドレスを残したいのと、Suica や Edy などのモバイル FeliCa が手放せないぐらい生活必需品になっているのと、モバイルコンテンツの実機テストをしたいのとで、とりあえず残してあります。しかし昨今は、通話にはほとんど使ってません。 そんな au 携帯ですが 1 週間ぐらい前から、4、5、6 ボタンが押せなくなりました。 「4、5、6、G、H、I、J、K、L、M、N、O、た、ち、つ、て、と、だ、ぢ、づ、で、ど、な、に、ぬ、ね、の、は、ひ、ふ、へ、ほ、ば、び、ぶ、べ、ぼ、ぱ、
au解約してiPhone or EMONSTER持とうか検討中 | pblog
(2009/9/22追記) 複雑になりすぎたので別エントリにまとめました。 [2010年1月31日まで-iPhone料金まとめ](http://prius.cc/d/20090922_iphone_price.html “2010年1月31日まで-iPhone料金まとめ") au新機種が**あまりにも期待を裏切り続けている**のに他社への乗換えを検討中です。 乗り換えというのはエネルギーが必要です。ケータイを長く使用するほど「保有効果」により本来の価値より高く感じてしまう。初めて携帯を契約するならケータイとiPhoneで迷わずiPhoneを選ぶところが、ケータイに溜まった過去の資産(番号・メアド・使い勝手)のせいで乗り換え辛くなる。 そこでエネルギーを高めてくれるのがiPhone・EMONSTER(以下イモスタ)への期待感と**キャリアのへの怒り**というわけです。マジ最近のauはないわ。
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
携帯サイト（html,table使用可）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
前回のエントリー「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」では、tableを使わずにできるデザインでサンプルページを作成しました。 今回は「tableを使用してよい」という条件のもとで制作した場合、で考えてみます。 ただ、table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します。 デザイン、条件は前のエントリーと同様です。 前提条件は、 ・3キャリア1ソース ・html（CSSは使用不可） ・文字コード：Shift-JIS ・改行コード：CR LF 対応端末は、 ・docomo 901以降 ・au WIN端末 ・sb 3G です。 ※table非対応端末が含まれているがtableは使用してよいこととする。ただし、table非対応機種でもサイトの閲覧に支障がないようにすること。 チェックポイント tableが使えることによって前よりもチェッ
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
絵文字が開いてしまった「パンドラの箱」第5回--絵文字と日本マンガの親密な関係
絵文字の収録をめぐって、国際規格で大論争--「Google提案」を振り返る 皆さんこんにちは、面白くてタメになる（？）文字コード漫談の時間がやってまいりました。2月からとびとびで書いてきた絵文字の報告も、いよいよ今回が最終回。どうかよろしくお付き合いください。 さて、前回はどこまでお話ししたのでしたっけ。日本の絵文字をUnicodeに収録しようとするGoogleとAppleによる提案（以下、主導者の名をとりGoogle提案と略）ですが、去年の12月にパブリックレビューが開始されると、Unicode-MLで時ならぬ非難の嵐が吹き荒れたこと。そこでの反発を一言で言い表すなら、日本の文化に強く依存する絵文字を単純に国際規格に収録しようとした点にあったこと。 なぜなら国際規格の審議は参加各国の総意で成り立っており、特定の国しか便利に使えない文字を収録することは、当然強い反対をうけるからです。さらに
雨が降り始めると即メールで通知『降りはじめ〜る』提供 - お天気☆JAPAN | 携帯 | マイコミジャーナル
島津ビジネスシステムズは7日、同社が運営する携帯電話公式サイト「お天気☆JAPAN」において、雨降り通知メールサービス『降りはじめ〜る』を8月10日から提供開始すると発表した。 雨降り通知メールサービス『降りはじめ〜る』イメージ お天気☆JAPANは、オリジナルキャラクターが天気を分かりやすく伝えるサイト。1kmメッシュの詳細なピンポイント予報、トップページから気象レーダーや地震などの最新情報を発信している。GPSや郵便番号で検索できる警報注意報など、「誰でも分かりやすい防災情報をリアルタイムで更新している」(島津ビジネスシステムズ)。 今回同サイトで提供を開始する「降りはじめ〜る」は、ユーザーがGPSなどで設定した位置を中心に、半径10kmの空を毎時6回監視して、降水が発見されると即時にメールで通知するサービス。ユーザー1人ごとに独自の雨雲発見アルゴリズムで監視するため、「的確に降水域を
Top - FireMobileSimulator.org
FireMobileSimulatorはFirefox/Chrome版ともに配布・メンテナンスを終了しました。本ページの内容は記録のみの目的で残しています。 FireMobileSimulatorとは？ FireMobileSimulatorは、主要３キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞ
Movatter
Movatterとは Movatterは、携帯電話やPHSでTwitterを利用するためのウェブサービスです。 docomo, SoftBank, au, Y!mobileのモバイルブラウザに対応しています。 一部機能制限がありますが、Android搭載ケータイ（ガラホ）でも動作します。 シンプルで直感的に分かりやすいインターフェイス、見やすく可読性に優れたレイアウト、基本機能の使いやすさ、柔軟なカスタマイズ性などを重視して開発しています。 主な機能 タイムラインの閲覧・投稿・リツイートなど、Twitterを利用するための基本機能 ダイレクトメッセージや＠関連の未読数の表示 複数のアカウントの切り替え タイムラインの画像のインラインプレビュー (複数の画像表示にも対応) 画像のサイズ・画質・回転などを操作できる高機能な画像ビューワー 細かくカスタマイズできるデザインとインターフェイス プロ
Return of the Mobile Stylesheet
The past couple of years have seen numerous new web-capable mobile devices arise, including Apple’s iPhone and its Safari browser, the creation of Google’s Android platform and Webkit-based browser, the rise of so called “full web” browsers (Nokia’s S60, Opera Mobile and Opera Mini, among others), the early development of Firefox’s mobile version, and more. These mobile browsers improve users’ exp
delicious blog » delicious to go
We’ve just launched a mobile version of Delicious. You can find it at http://m.delicious.com. This is a beta and represents our first real dabbling in mobile browsing, so we’ve started conservatively. The site is designed to work on as many devices as possible, although YMMV. Delicious Mobile enables you to sign into your account and browse your bookmarks, tags, inbox, and other data. You can also
ORG(8)：サイト用テンプレート - AZ store
取扱説明書 XHTML 1.0 Transitional、div要素未使用のテンプレート。文書構造がシンプルです。ソースのダイエットをしたい方、サーチエンジンフレンドリーなサイトを作りたい方におすすめです。 WordPressのテーマのblog(3)と着せ替えができます。WordPressで使う場合はcss/style.cssをaz-store.cssにリネームしてテーマフォルダに入れてください。 サンプル スタイルシート ダウンロード テンプレートをダウンロード 配布開始 2008年8月28日 配布元：AZ store 戻る 案内 メインナビゲーション sample(1) sample(2) sample(1) sample(2) sample(3) sample(4)
Mobile Web Best Practices 1.0
Basic Guidelines W3C Recommendation 29 July 2008 This version: http://www.w3.org/TR/2008/REC-mobile-bp-20080729/ Latest version: http://www.w3.org/TR/mobile-bp/ Previous version: http://www.w3.org/TR/2006/PR-mobile-bp-20061102/ Editors:Jo Rabin, mTLD Mobile Top Level Domain (dotMobi)Charles McCathieNevile, Opera Software [Early Drafts] Please refer to the errata for this document, which may includ
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
http://hpbuilder.net/weblog/2008/05/27071321.html