Webサイトのリニューアル 【3年越し!】

久々の記事になってしまいました。

今年の春はなにかと忙しく・・・桜の写真も撮れなかったなぁ。
もしかして、楽しみにしてくださっていた方、来年は撮ります!

そうこうしている内にゴールデンウイークも終わり。
私は、10連休。 日銭を稼ぐ身としてはありがたくもなかったです。

っで、なにをしていたかというと。

延ばし延ばしになっていた 【SeaCanary Webサイト】 のリニューアルです。

あれ? そういえば、レスポンシブデザインの話って??
iPadで、【レスポンシブWebデザイン】!
iPadで、【レスポンシブWebデザイン】! その2

・・・2013年 6月 だった・・・。

この 3年で、もうみんなスマホですもんね。
すっかり遅れをとっちゃたな。

となれば、
ここは思い切ってスマホ・タブレットをメインに考えることにしましたよ。


出来上がりはこちら。 私の iPad2 の画面ですがね。

seacanary-web_2016_02

seacanary-web_2016_03

でも、現行のスマホも同様な解像度って感じなのが泣けちゃうところ。


タブレット・デスクトップではこんなふうになります。

seacanary-web_2016_01

デスクトップでの間延び感は否めないけど・・・
なんの問題もありません!


使い勝手はあれこれ考えた結果、サイトの能書きよりも、
情報に直接アクセスできることを優先しました。

トップページにはコンテンツのボタンがありますが、
他のページには、ホーム・メニュー・ページトップ のみです。


メニューは折りたたみ。

seacanary-web_2016_04

seacanary-web_2016_05

右手の親指だけで全てのページに行けます。


商品のバリエーションは、カルーセルに入れました。

seacanary-web_2016_07

seacanary-web_2016_06

そして、唯一、動くコンテンツです。

複雑なページレイアウトやボタンリンクも作ってきたけど、
やっぱり、シンプルなのはいいですね〜!

とても軽い構成のサイトに仕上げました。


私が Web を始めたのは、
ちょうど、テーブルレイアウトから css への過渡期。
まだ大部分は、テーブルレイアウトのサイトでした。

スクールで教わるのもメインはテーブルレイアウト。
スペーサーgif とかでガッチガチに組んだりしてました。

講師も、css は手探り。参考書に書かれている内容もマチマチ。
そうなると、自分でやるしかありません。

W3C のチェッカーに html と css のコードを入れては、
100点の Web標準を目指していました。

今はそれほど気にしてないけど、
当時は「Web標準です!」っていうのが、
サイトのアピールポイントでもあったんです。

でもほんと、コーディングは楽になりましたよね!

もう一つ、当初から好きじゃなかった Flash 。
今では使わなくったって、誰からも文句を言われません!


これが一番、幸せ!!




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

11 | 2023/12 | 01
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

月別アーカイブ