記事の表示をモバイル向けには、省略形で表示するアイディア 『Mobile Friendly Reading v2.0』

WS003016
このエントリーをはてなブックマークに追加
PR

Mobile Friendly Reading v2.0
By Justin

DEMO 表示

 

レスポンシブデザインでモバイル向けには、テキスト部分を、徐々に文字が薄くなっていくエフェクトを使って省略表示したアイディアです。テキスト部分をクリックすることで文章が展開されて通常通りに読むことが出来るようになるというものです

 

 

PC向けの通常の表示

WS003015

 

モバイル向けの者略表示

mb

半透明に成っている文章の部分をクリックすることで、通常の文字として文章が表示されるようになります。またREDUCE TEXT というボタンを押すことで、展開した文章をまた折りたたんで省略表示にすることが出来ます

 

テキストベースのサイトでモバイル対応するときに、この手法を取り入れてみるのもいいかも。ただ初見のユーザーがこれに気づいてくれるかどうかっていうのがあるので、何かしらのサポート的なテキストやアニメーションを加えてやると実用的かなと思います

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)