好ましいサイトデザインはモバイルフレンドリー

recommendation for building smartphone-optimised websites
https://developers.google.com/webmasters/mobile-sites/

SEO 的にとても重要なこと。 デスクトップでしか見れないようなウェブデザインは時代遅れ。 むかしのいわゆる「モバイルサイト=ケータイサイト」はデスクトップサイトの機能劣化版であったけれど、「モバイルフレンドリーサイト」は変幻自在。レスポンシブに自らの見え方(デザイン)を変えることができる。W3C の CSS3 の仕様が実現させたこと。CSS3 のおかげでモバイルへ見せるサイトを劣化版にする必要がなくなった。

type A

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="/styles/mobile.css"
 media="only screen and (max-width: 640px)" />
<link rel="stylesheet" type="text/css" href="/styles/desktop.css"
 media="screen and (min-width: 641px)" />

type B

/*
To render your page at a more readable scale, 
use the device-width in the viewport meta element:
  <meta name="viewport"
        content="width=device-width, initial-scale=1" />
*/

/* To prevent fixed width images “propping open” liquid columns */
img { max-width: 100%; }

/* Target landscape smartphones, portrait tablets, narrow desktops */
@media screen and (min-width:480px) and (max-width:800px) { }

/* Target portrait smartphones */
@media screen and (max-width:479px) { }

/* Target device in landscape mode */
@media all and (orientation: landscape) { }

/* Target device in portrait mode */
@media all and (orientation: portrait) { }

/* specific CSS */
@media screen and (max-width: 800px) { }
@media screen and (max-width: 479px) { }

the power of media queries - the stylesheet enables a liquid layout

What is Liquid Layout

Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types.
http://alistapart.com/article/responsive-web-design

What is Responsive Design

Thankfully media queries are now well-supported in modern browsers including IE9+ and most mobile devices.
Official Google Webmaster Central Blog: Responsive design – harnessing the power of media queries
https://webmasters.googleblog.com/2012/04/responsive-design-harnessing-power-of.html

surfing your own sites with a smartphone will prove invaluable

iOS Simulator (Xcode)
https://developer.apple.com/download/

topic: macosx
first posted: 2016-09-11 12:23:24
last modified: 2016-09-12 10:56:10