Tips to design your site for mobile devices[原文]

(訳者株 : 当然, 私は 専門 翻訳家が ない だから 違った 翻訳が ある 数 あります. 原文 リンクは クリア ボスで 得ました.)

何日 私は 内 友達 ルーカス(Lucas)街 自分 ブルログルを モバイル バージョンに 大海 助言(asked to me some suggest)日 くれと した. そのため 今度 文で 私は サイトを モバイル バージョンで 作ろうと 割 時 必要な 何 枝 簡単な チップを 使おうと する. 例えば, モバイル バージョン サイトを どうな URL 住所で 割 のか – モバイル 這うのを のために リデ−レックトを させる のか, CSSわ HTMLを 利用して モバイルに 当たる デザインを 割 のか. (もし あなたが WordPress ユーザーなら) free WordPress pluginで 早く 処理して 捨てる のか.

モバイル バージョン サイト URL 住所は 何で 割 のか

始めて 段階は URL 住所 選びだ. 何 枝 方法が ある. rootに モバイル用 フォルダ(mobile路 名付けたと 欠点)を 一つ 万たち 数 ある. それでは モバイル用 ページは http://www.yoursite.com/mobile これ なる のだ.

△これ フォルダを サイト ルートに 作りなさい.

それとも, もしに サーブドメインを 追加する 数 あったら, http://m.yoursite.com おこるが http://mobile.yoursite.com ような 住所を モバイル用 ファイルが ある フォルダに リンクさせて 使う 首都 ある.

モバイル 這うのを ための リデ−レックト(Redirect) スクリプト

二 番目 ダンゲは モバイル 這うのを のために リデ−レックト スクリプトを 作る のだ. 載せるように 必ず 必要な 件 ない. するが モバイル 這うことに 入って来る あらゆる トラフィックを 自動で モバイル ページに リデ−レックトさせる のは 有用だ. これ 主題 大韓 もっと 多い 情報は 次 リンクで ボール 数 ある.

… そして 特に PHP私 ASP プログラマーは 次 リンクを 見なさい.

もし 大丈夫な リンクが もっと あれば, コメント 残して 週期 望む.

モバイルに 当たる 簡単な ページ 構造

モバイル用で どうな レイアウトが もっと 良いか? 私は モバイル用では コラム 1ケのものが 仮装(家長) 大衆的で, 使うに値して, 読み取り 楽だと 思う. 例を 入れば, ユーチューブ, ペイスブック, ツイッターが こういう 構造だ.

△ユーチューブ モバイル ページだ.(コラム たいてい 犬 もの レイアウトだ.)

コラム 一つの レイアウトは 良い 方法だが 必ず よると する の(rule)銀 ない. 事実, ウィンドウ モバイルを 使う 器機で モバイル インターネット エクスプローラを 使って ネットサーフィンを したら 器機の 横 サイズに よって 内容を “arrange”(整列?)する オプションを 選択する 数 ある.(オリジナル ページ レイアウトに 構わずに 言葉だ.)(モバイル IEには コムロム 一つの モバイル ページも 二つ三つで 表現する 数 ある オプションが あるようだ.)

  • Default, 横 スクロールを 減らすこと のために コンテンツ 幅を 狭く する.
  • One Column, あらゆる コンテンツを 強制で たいてい コラムで 作る.
  • Desktop銀 コンテンツに 誰 変化を 主旨 ない.(デスクトップ用 IEで 見る ことと ぽきっとのように 見える.)

するが, 一般的に サイト レイアウトが あまり 複雑ならば 結果が 中 良い. こういう 問題を 避けて, サイトを 這うのに 当たる たいてい コラムの レイアウトで 作って モバイル 這うのに 最適化させる デザインで 作り ためには まどろみ もっと 悩みを すると する. 次 セクションで それを 説明する.

モバイル サイト 計画すること

もしに あなたが モバイル用 ページを 作ろうと する 蟹 ブログなら, モバイル 這うのに 当たる サイト レイアウトは 下と 似ている のだ.

ブログには こういう 要素たちが ある : header, body わ footer. Headerには サイト ロゴが ある. bodyには 文や 要約が 入って行く. プトには サイトに 大韓 違う 情報が 入って行く.

HTMLわ CSS 基本 コード

ドリームウィーバや ちくちくと痛ければ 好む エディタを 利用して コードを 組んで 見よう. HTML コードは 阿洲 簡単なのに, 下と ような 数 ある.

<!-- ------------ -->
<!-- Page Header -->
<div id="header">
<a href="index.html"><img src="logo.png" border="0" /></a>
</div>

<!-- ------------ -->
<!-- Page Body -->
<div id="page-body">
<!-- Your post here -->
<h1><a href="post1.html">Title of your post</a></h1>
<p>A summary of your post</p>
<p class="tag">
<a href="tag1">tag1</a>,
<a href="tag2">tag2</a>,
<a href="tag3">tag3</a>
</p>
<!-- Your post here -->
<!-- Your post here -->
<!-- ... -->
</div>

<!-- ------------ -->
<!-- Page Footer -->
<div id="footer">
<a href="index.html">Home</a> |
<a href="mailto:[email protected]">Contact me</a>
</div>

… そして CSS コードは こういう 数 ある.

/* -- Reset default style -- */
body, h1, p{border:0; margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/* ------------ */
/* HEADER */
#header{
padding:6px;
background:#444444;
}
/* PAGE BODY */
#page-body{padding:10px;}
h1{font-size:14px; font-weight:bold;}
h1 a:link, a:visited{color:#0033CC;}
.tag{font-size:12px; margin-bottom:20px;}
.tag a:link, .tag a:visited{color:#999999;}

/* FOOTER */
#footer{
padding:6px;
border-top:solid 1px #DEDEDE;
color:#999999;
font-size:11px;
}
#footer a:link, #footer a:visited{
color:#666666;
}

結果は こういう 食餌 なる のだ.

当然, これは 阿洲 基本的な 提案である だけだ. 直接 イメージや ロゴ, 色, 字面を 追加して, PHP私 Coldfusion, ASP私 違う コードを つまんで 入れて 動的な ページを 作ると する. 例を 入れば, CSSコードを 何 犬を 直して こんなに 万たち 首都 ある.

また, 読者たちが 願う のを 早く 捜す 数 あるように ヘッダーに 検索窓を 入れる 首都 ある. 私は また [サイト 構造を] シンプルに 維持しなさいと 言って たい. ソーシャル ネットワーク ボタン ような 益体もない 要素を 入れるの ないで.(delicious tagometer私 diggような の 言葉だ.(韓国で 打てば ダウムビュや ミクシィ, ブルコ ボタン ような 蟹 なる)) ジャバスクリプトを 使う ウィジェットも 同じだ. これは モバイル用 ページで, モバイル用 ページは シンプルに 維持されると する. サヨングソングイッゴ 読みやすく 言葉だ. 違う 件 重要なの ない.

ウィンドウ モバイルを 使う 器機の フォント 使用に 大海

ウィンドー モバイルが 搭載された モバイル 這うのを 使ったら, Arial, Verdana, Georgia ような 基本 フォントが 設置されて あるの ない. そのため ウェプページを まともに 表示 ためには こんなに ウェブデザインに 阿洲 多く 使われる フォントを モバイル 這うことに コピーして 与えると する. 探索器を クリックして, PCで(あるいは MACで) これ フォントたちを モバイル 這うのに ある Windows > Fonts フォルダに つまんで 入れなさい.

    • Arial
    • Verdana
    • Georgia
    • Trebouchet MS
    • Times New Roman

WordPress モバイル プラグイン

もし WordPressを 使って あって, モバイル用 サイトを 早く 製作して たければ, WordPress モバイル プラグインを ダウンする 数 ある.

  • Download WordPress Mobile Plugin

載せるように 全部! 違う 提案が あるとか, これ 主題に 大韓 おもしろい リンクが あったら コメント 残して くだされば ありがたい. :)

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。