このサイトについて
160309 160214
現在、モバイルファースト(mobile first)が主流です。souko.comも通常のサイトと同様に、モバイルからのアクセスの比率が高いです。souko.comでは"モバイルファースト"を、"モバイル優先/モバイル用をメインに構築する"という意味に加えて、ユーザー中心＆コンテンツ中心のWebサイト構築として構成しています。
対象
通常の対象ユーザーエージェント(UA)(=ブラウザー)に加えて、linuxのさまざなブラウザーに対応。
通常の対象ブラウザーは、アクセス比率の重要度からIE,Chrome,firefoxの最新版、モバイル(Android, iOSでのメインブウラザ)で、比率の少ないものは対象外とします。linuxの場合は用途にあわせていろいろなブラウザーを使用しますので対象とし、資料として参照できるようにしています。
通常のCSSフレームワークでは切り捨てとなる、IE,firefoxの古いVersionでも参照できるようにしています。
例 Puppy linuxでのトピックになるブラウザー
palemoon browser Slimjet web browser Tor Browser Bundle 5.5.1 Sylpheed-3.4.1 Chromium 48 with pepper-flash Portable SeaMonkey KompoZer 0.8 QtWeb super light browser Luakit Opera Portable Google Chrome for Puppy QtWeb - fast portable browser midori
CSS
従来の手法と併用して、CSSスタイルシート オフでも極端にレイアウトが崩れず、なんとか資料として参照可能。
モバイル フレンドリー
すべてのページでモバイル フレンドリーとなっています。(googleのモバイルフレンドリーチェックで"モバイル フレンドリー"と表示)
モバイル フレンドリー テスト
https://www.google.com/webmasters/tools/mobile-friendly/
レスポンシブWebデザイン（Responsive Web Design）
軽量CSSフレームワークをベースとしてレスポンシブWebデザインで構築しています。
JavaScript Off
Javascript(以下JS)はoff。
現在ほとんどのサイトがJS必須です。以前はセキュリティ面のため一定の割合でJS offの運用がありました。モバイルアクセスの比率が多くなり、全体からするとJS offのユーザーは5%以下となり、優先度から、モバイルメニューにJSを使う形が多いです。
souko.comの場合は KidsPCなどで、セキュリティ面に特化した形式もあり、JSはoffとしています。XSS、CSRFなどのJS関連の説明は別途、セキュリティ、KidsPCで説明します。
外部サイトを利用している場合(googleカレンダーなど)はJS必要となっています。
HTML5 CSS2 CSS3 JS
サイトの一部で、対象が通常の場合は、HTML5 CSS2 CSS3で構成しています。Javascriptも使用しています。
参考
ウェブマスター向けモバイルガイド
https://developers.google.com/webmasters/mobile-sites/
Principles of site design | Web Fundamentals - Google Developers
https://developers.google.com/web/fundamentals/getting-started/principles/
Supporting Different Screens in Web Apps | Android Developers
http://developer.android.com/guide/webapps/targeting.html
Supported Meta Tags
https://developer.apple.com/library/safari/
documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
