A Guide to Future Proof Mobile/Tablet Friendly Websites

Tablet and Phones
In a matter of couple of years, more than half of total web browsing will be done from mobile devices, however, mobile devices don’t necessarily provide the same design implementation as desktop computers do and many of times we see our websites breaking on those small screens, while many designers create tablet/mobile specific website, but I think maintaining one website is better than maintaining two separate ones. Below I will discuss some importanr things which we can keep in mind while creating a website to make it future proof for mobile devices as well as desktop computers.

Use Responsive Frameworks

Responsive Web Design
Getting back to the idea of two separate websites, I don’t think it pleases me or anyone much, we are better off doing one Responsive Website. Well, what is this Responsive Website exactly? Wikipedia defines Responsive Web Design as

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also flexible images.

Which means, having a responsive website enables us serve all devices via a single website, it enables us to address the ever-changing screen sizes, orientations and resolutions by using a flexible/fluid grid which will adapt to any screen size (and resolution). With responsive design, we have one website which serves all kinds of devices. This is in contrast from the other trend where we need to maintain at least two websites (desktop and mobile version). It has an obvious major advantage of far easier maintenance (now we maintain one instead of two websites).

The essential concept of responsive design is minimum (or no) of resizing, scrolling (horizontal) and panning. There are many frameworks for fluid grids out there, I like the the 1140px CSS Grid and those who are loyal to 960px width can check out Gumby 960 CSS Framework.

Use Media Queries, everywhere

Media queries are certainly the most important part of responsive websites. Media queries were restricted in CSS2 to only screen, print and all, but, in CSS3 they are far more robust. We can now apply different stylesheets/styles based on the size of the viewport and pixel densities. Generally, for the most part, website implementation looks similar in tablets and desktops, however, many elements tend to get implemented (or displayed) differently in tablets, we can fix those elements using specific CSS thanks to media queries, also, we can differentiate how a particular element or the whole website will look in small screen phones, smart phones, tablets and desktops using media queries only. Here I am sharing some essential media queries.

Media Query for Normal Phones

We can include all of our phone specific styles within this block:

Select Code
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* ==================================== */
/* ! All phone specific CSS goes here   */
/* ==================================== */
}

Media Query for Smart Phones

The difference between a smart phone and a normal phone is resolution, smart phones will always higher resolution than normal phones, we can include all of our smart phone specific styles within this block:

Select Code
@media handheld, only screen and (max-width: 767px) {
/* ========================================= */
/* ! All smartphone specific CSS goes here   */
/* ========================================= */
}

Media Query for Tablets

We can use the below media query for all of our tablet specific styles, do keep in mind this will not get applied to those 10 inches tablets like Motorola Xoom, Toshiba Thrive, etc and will get applied to small/old monitors.

Select Code
@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) {
/* ===================================== */
/* ! All tablet specific CSS goes here   */
/* ===================================== */
}

Media Query for New Retina Displays

If we have some high resolutions assets which we will like to be applied to iPhone 4, iPhone 4S and iPad 3, then we can use the below block:

Select Code
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* =================================== */
/* ! Higher resolution CSS goes here   */
/* =================================== */
}

Taking Care of Orientation Problems

As I discussed in my post: Making Devices on Portrait Orientation Behave like Mobile, some websites get screwed in portrait orientation, read there only how it happens and why I strongly recommend to use the below media query.

Select Code
@media handheld, only screen and (max-width: 767px), screen and (orientation : portrait) {
/* ========================================================================= */
/* ! All phone and tablets(in portrait orientation) specific CSS goes here   */
/* ========================================================================= */
}

Design Light and Fast Websites

Fast Websites
The CPU of a mobile device is not same as of a desktop computer, thus if we are using a lot of high resolution assets like images and videos, we should give it a second thought from the perspective of mobile devices, also, loading a lot of jQuery/JavaScript for animations and other effects will most likely deteriorate the performance of our website and the website will tend to hang frequently, to overcome this, make sure the website made is light weight and simple, a simple website is definitely a winner for mobile devices as it can also be used easily.

Also, we should try reducing requests around network to minimum, some techniques for reducing HTTP requests include using CSS Sprites, combining (and compressing) multiple stylesheets/JavaScript files into one and using Data URI whenever possible. Data URIs are means to inline data in web pages, that is no external HTTP Request, here is one website to encode Data URIs. Back to JS, we should try and load all JavaScript in the end as it will increase the overall performance or at least we can use defer and async attributes (HTML5 only), furthermore, a lot of JS becomes useless for mobile device anyways, we should simply not load them by checking for user agent, here is JS snippet which pretty much checks for every mobile and tablet around:

Select Code
var mobile = (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase()));

var tablet = (/ipad|android 3|sch-i800|playbook|tablet|kindle|gt-p1000|sgh-t849|shw-m180s|a510|a511|a100|dell streak|silk/i.test(navigator.userAgent.toLowerCase()));

if (mobile) {
/* JS for mobile devices  */
}
else if (tablet) {
/* JS for tablets  */
}
else {
/* JS for everything else  */
}

This is not a 100% bulletproof method, but there is nothing to lose.

Dealing with Hardware

A4
One thing to remember while building mobile websites is that they don’t have any mouse or keyboard, so all keyboard jQuery for navigation will not work, also, since there is no mouse, there are no hover effects.

Building navigation menu for tablets is little tricky, although most tablets like iPad make most of the navigation menus easily usable, however, in some tablets like PlayBook, making our navigation menu work is real pain, especially the ones with sub menus (since they use hover), we need to carefully CSS between :hover and :active pseudo classes (as they are practically same for mobile devices).

Whitespacing is another crucial element in mobile devices, we don’t want our website to look in clutter and we must build elements, especially clickable elements with decent amount of padding and adequate spacing so that our fingers can tap easily on them (since our fingers are much more thicker than mouse pointers and some times it gets irking when we can not click items and need to zoom-in to do so). Besides, check out jQuery Mobile for adding touch gestures to websites.

Ditch Flash

Flash
Most of us are already aware of that many mobile devices like iPhones, iPads, Windows Phones, Chrome on Android, etc don’t have flash, even if some do, flash experience on them is not the same as in desktop computers, thus we should certainly not use it. We can use jQuery animation instead of flash to achieve most of the effects and where flash is absolutely necessary, we can do conditionals to check for flash and then execute the suitable code. SWFObject is an easy to use and standards friendly method to embed Flash content, which utilizes one small JavaScript file, we should use this where we absolutely need to use flash.

And finally, not all tablets are Webkit, use standardized properties!

Windows 8 Tablet
I know this will sound weird to most of you, especially since currently every tablet (probably) is on Webkit and thus what we tend to do is use those non standardized -webkit only CSS3 without their other counterparts, though it is very helpful and it works (and we should use them), but there are problems because of this, let me illustrate one.

A decade ago, IE6 was the most dominant web browser in the world, the whole Internet was full of websites made only for IE6, the users of other browsers were discontented. Though that particular problem is over now, but it is back in another form now, Webkit. Webkit is the rendering engine used by almost every modern mobile device (except a very few) and hence the mobile Internet is now full of Webkit only websites, now what if in future tablets ditch Webkit? And that future might not be very distant, later this year, Microsoft will introduce its flagship for tablet operating system, Windows 8, and as far as I can tell from its release preview and beta, its quite good, and its success wont be any surprise, however, it will be a surprise for designers when most of their websites wont work on it’s default web browser. Similarly, Firefox and Opera also have a decent share of mobile browsing, those -webkit properties wont work on even them (although Opera supports some -webkit properties). So to avoid all this, we are better off using standardized CSS properties for most of our designing and use -webkit properties with their -moz, -ms, -o and prefixless counterparts. Prefixr.com can help you to make your cross-browser CSS.

Further Reading

[unordered_list style=”arrow”]

[/unordered_list]

  • Pingback: Best Social Network()

  • http://www.fdlgroup.co.uk/images/Vintage-NBA-Jersey.asp NBA Throwback Jerseys

    Thanks for sharing your ideas here. The other issue is that when a problem takes place with a personal computer motherboard, folks should not consider the risk of repairing the item themselves for if it is not done right it can lead to irreparable damage to the complete laptop. It is usually safe to approach the dealer of that laptop for any repair of motherboard. They have got technicians who definitely have an experience in dealing with laptop computer motherboard troubles and can get the right analysis and accomplish repairs.

  • http://www.gucciusonline.com/gucci-trademark-engraved-metal-plate-gold-p-251.html Gucci Shoulder Bags

    Great post. I used to be checking constantly this weblog and I am inspired! Very useful info particularly the ultimate part I maintain such information a lot. I used to be looking for this particular info for a lengthy time. Thanks and best of luck.

  • Pingback: Best Social Network()

  • http://www.tudonghoavtc.com/women-louis-vuitton-louis-vuitton-handbags-c-30_32.html Louis Vuitton Belts

    Very Nice site I found it on the search engines , are you using wordpress with this blog? or some different?

  • http://www.abcindustrial.co.uk/News/nflcheapstore.asp Wholesale NFL Jerseys

    I used to be just looking for this info for a while. Once six hours of continuous Googleing, finally I received it in your own website. I wonder what is the Google’s issue that does not rank this type of helpful websites closer into the leading. Normally the leading websites are full of garbage.

  • Pingback: plypschz()

  • http://www.dobski.com/actionsed_admin/%e3%82%af%e3%83%ad%e3%83%a0%e3%83%8f%e3%83%bc%e3%83%84%e3%82%bf%e3%82%a4%e3%83%97-%e8%b2%a1%e5%b8%83_541115.asp クロムハーツタイプ 財布

    ねじれが生じやすい中足部にトラスティックを搭載し、優れた安定性を発揮。
    クロムハーツタイプ 財布 http://www.dobski.com/actionsed_admin/%e3%82%af%e3%83%ad%e3%83%a0%e3%83%8f%e3%83%bc%e3%83%84%e3%82%bf%e3%82%a4%e3%83%97-%e8%b2%a1%e5%b8%83_541115.asp

  • http://coachoutlet.kchbags.com/ Coach outlet store online

    Welcome to our coach online store,Super Discount waiting for youCoach Purses
    On Sale Coach outlet store online

  • http://www.phchandler.co.uk/specials/pittsburgh-penguins-new-jerseys.asp Cheap Hockey Jerseys

    This very blog is really educating and informative. I have chosen helluva interesting tips out of it. I’d love to return again soon. Thanks a bunch!

  • http://www.villaggioinsardegna.it/public/img_admin/file_2014/20141217222819_xpki.html ケイトスペード 財布 通販

    矢部さんの情熱あふれるワークスタイルは、以下のサイトでも取り上げられています高校2年生のときからビリヤードをはじめ、大会に出ては賞金を稼いでいたという矢部さん。
    ケイトスペード 財布 通販 http://www.villaggioinsardegna.it/public/img_admin/file_2014/20141217222819_xpki.html

  • http://word.slupsk.pl/snow/localhost.php discount ugg earmuffs

    “Norwich Fashion Week is the ideal time to hold a fashion auction where you can pick up a designer item at a fantastic price. The lots also include pieces from Armani, Radley, Amanda Wakeley, Miu Miu, Russell and Bromley and Longchamp.

  • http://www.freepvpgame.com/wow-guides wildstar item

    An amount you go for the caption comprehend? “Jeff Emmer browsing a vertical standing just about robert Zunker. Each of whom tend to be happy and checking camera, Yourself chosen probably one of tiny, Haphazard fine depth as soon as i’ve combined with to be able to study it so you are able to someway feel better about by you. And still, You’ll still was able to could be seen as an tech-leery.
    wildstar item http://www.freepvpgame.com/wow-guides

  • http://www.ldcxav.com/wildstar-news diablo 3 gold

    now.? Eliza: Do any some other reasons ‘t spring to mind? Us all: now. Are you planning to figure out making crepes? Eliza: Would you want household. instead, just weren’t planning clarify what produce crepes? My hoi: And moreover how about. Settlement is went after a hostile financial financial expansion plan within the last five lots of, Thanks to blended satisfaction. Operationally, We all that adheres to that the strict has created very important advances who have got made better the nation’s completely success. EA exceedingly low perform properly applications it writes the year to concentrate assets on several businesses in use a majority of its trades, Which ended in substantive border move on.
    diablo 3 gold http://www.ldcxav.com/wildstar-news

  • http://www.afftontelcom.com/images/patterns/price_admin/20141217235616_8v3x.html オロビアンコ bamburete

    ときどき必要なA3印刷を、コンパクトサイズで実現前面からの給紙と奥行の少ないコンパクトサイズで、本棚やリビングボードなど、家の中のちょっとしたスペースにすっきり収まり、スマートなインテリアを保ちます※A3プリントなど、1枚手差し給紙使用の場合には、製品を前に出す必要があります 無線LAN標準対応。
    オロビアンコ bamburete http://www.afftontelcom.com/images/patterns/price_admin/20141217235616_8v3x.html

  • http://www.newyearseveroma.it/public/sponsors/webalizer_2014/20141217215939_cexd.html リモワ 激安

    SM 35 スマートピン 【商品特長】 スマートガン(別売)専用の、消耗品の スタンダード用スマートピンです。
    リモワ 激安 http://www.newyearseveroma.it/public/sponsors/webalizer_2014/20141217215939_cexd.html

  • http://www.albergolacapannina.it/old_site/cp/Scripts-2014/html059-%e3%83%aa%e3%83%a2%e3%83%af-%e8%b3%bc%e5%85%a5_la.asp リモワ 購入

    できる限り正確な在庫数を記載するように努力しておりますが、常に在庫の変動がございますので、ご注文いただきましても、商品がご用意できない場合もございます。
    リモワ 購入 http://www.albergolacapannina.it/old_site/cp/Scripts-2014/html059-%e3%83%aa%e3%83%a2%e3%83%af-%e8%b3%bc%e5%85%a5_la.asp

  • http://www.stephaniehittlecounseling.com/MODS/images/asp_admin/20141217235147_1g1t.html リモワ ルフトハンザモデル

    90%以上のスタイリストの皆様が手触りが変わったと実感しています!【商品名】エスセブン プロフェッショナル S 707【電 源】AC100V,50/60Hz【消費電力】1400W【外形サイズ】 222(275 ノズル含む) 220 90 mm【重 さ】380g(ACコード含まない / コード長さ 3.4m)【風 量】high / low (2段階)【温度調整】約90℃ 約70℃ 約50℃ (3段階)【製造国】韓国 こちらの商品はメーカーより直送させていただきますので、代金引換のご利用はできません。
    リモワ ルフトハンザモデル http://www.stephaniehittlecounseling.com/MODS/images/asp_admin/20141217235147_1g1t.html

  • Pingback: rug cleaning()

  • http://www.carcan.it/public/img_admin/file_2014/20141218024801_bnkb.html ugg 正規代理店

    次のようなメールが翌朝に送られてきます訪問者数は2719人、一昨日は605人でした訪問回数は2761人、一昨日は612人でしたページビューは3167PV。
    ugg 正規代理店 http://www.carcan.it/public/img_admin/file_2014/20141218024801_bnkb.html

  • http://www.dolcerepasticceria.it/newupload/file/_notes_2014/20141217233712_wwkx.html フォーマルスーツ メンズ

    日当たりを大変好みます。
    フォーマルスーツ メンズ http://www.dolcerepasticceria.it/newupload/file/_notes_2014/20141217233712_wwkx.html

  • http://www.barrysea.com/Paradox/images/jscript_admin/%e3%82%b9%e3%83%9d%e3%83%bc%e3%83%84%e3%82%a6%e3%82%a7%e3%82%a2-%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97_674229.asp スポーツウェア ショップ

    スタンダードラストを基本としながら、足甲部を ワイドに設計しています。
    スポーツウェア ショップ http://www.barrysea.com/Paradox/images/jscript_admin/%e3%82%b9%e3%83%9d%e3%83%bc%e3%83%84%e3%82%a6%e3%82%a7%e3%82%a2-%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97_674229.asp

  • http://www.purevolume.com/cd66island/posts/8819841/%22To+turn+in+the+speed+he+has+is+truly+impressive levamen

    What I wouldnt give to learn how you got your design to be so brilliant! I mean it. Besides the site just being awesome

  • http://www.scbp.org/greenprograms/wp-content/uploads/2013/01/wp-config.php ugg georgette sizing

    mulberry bag mulberry bags mulberry handbag mulber

  • http://iventurelaundryservices.com/?page=mcm-backpack-real mcm backpack real

    You can choose to make your own skin whitening home remedies, or opt for some natural skin lightener products to be on the safer side. This was all that I had to tell you about skin bleaching cream. As I mentioned above, you always need to consult a dermatologist prior to using such skin care products, this is the best measure that you can take to stay healthy and beautiful!Blue Willow Legend Turns Dinnerware Into Hot Collectible

  • http://www.shopauraluz.com/photogallery/photo00002995/music_admin/20141218002030_2q2q.html ティンバーランド ロールトップ 白

    セットになっており、抱き合わせでないと購入できない、ということです「抱き合わせ販売だけなの?それは『悪い点』じゃないの?」と思われるでしょう私も最初そう思っていました。
    ティンバーランド ロールトップ 白 http://www.shopauraluz.com/photogallery/photo00002995/music_admin/20141218002030_2q2q.html

  • http://realestate.saudirama.com/now_admin/%e3%83%8f%e3%83%af%e3%82%a4%e9%99%90%e5%ae%9a-%e3%83%aa%e3%83%a2%e3%83%af_144037.asp ハワイ限定 リモワ
  • http://www.buywildstaritems.com/wildstar-gold-cheap diablo 3 gold guide

    Acquiring, His misdemeanor has raised belonging to the eyeballs of you to a criminal offense of scriptural dimensions and this man wanted to pay together along regarding his careers and the status. That almost all seems to be increasingly simply really actually sentenced to successfully departure as for the ltering. Check out a cinema to see a porno show, Some sort of flick intended intimately excite you nevertheless, you get detained by trying to find a solution.
    diablo 3 gold guide http://www.buywildstaritems.com/wildstar-gold-cheap

  • Pingback: todd read()

  • http://www.sonic-tide.com/about-us diablo 3 gold

    Might quite a few less well known innovations furthermore corrections to golf that offer this is options tasty(Food squishing, 6 young dungeons since 2 raids, A good solid production area PvE a hard time sections, Lowered user interface factors, Along with a processed voyage platform), Although, the primary cornerstones might be: Incredible lore, Player a place to stay, Intelligent capacity 90s, And delicate movement. Blizzard’s completing associated with the the most appropriate relocates to hold on to wow as well as focused on any kind of altering mmorpg surface, But in lots of ways, Killing the curve. Physiology of a not to like,
    diablo 3 gold http://www.sonic-tide.com/about-us

  • http://www.profaas.com/tips entertainment

    Twenty million physical activities, This type of year particularly Wii sport post brands will comprise of a family take up method, Crafting its xbox table exercises a great deal more offered to a much wider projected readers. Mother and wil take advantage of an occasion while logging hands in alongside most of as well as her tiny. SimCity communities using the pc is an alternative handle popular business, Together with verification that many sequels is often as ground breaking as freshly started internet protocol.
    entertainment http://www.profaas.com/tips

  • Pingback: Pinganillo()

  • http://www.newyearseveinberlin.com/public/img_admin/file_2014/20141218003053_izww.html アレキサンダーワン bag

    ハイドレーションシステムに対応した仕様設計 再帰反射:どんなに歪んだ曲面であっても入射してきた方向に光を反射させる性質を持つ素材を、夜間の視認性アップのため部分的に使用しています。
    アレキサンダーワン bag http://www.newyearseveinberlin.com/public/img_admin/file_2014/20141218003053_izww.html

  • http://www.hotelsuroma.it/public/stats/webalizer_2014/20141217235848_rric.html アバクロ ショートパンツ

    学長やろうと行政の長だろうと「それ、ちゃいますよ!」って言うように、ってかそんな人らには意識的に強めに言うようにしてるもんなぁ。
    アバクロ ショートパンツ http://www.hotelsuroma.it/public/stats/webalizer_2014/20141217235848_rric.html

  • http://www.newyearsevebudapest.com/public/img_admin/file_2014/20141217215016_gjxu.html ダウン 人気ブランド レディース

    ジュニアの不安定な走りと蹴り出し動作をスムーズに導くソール設計を採用。
    ダウン 人気ブランド レディース http://www.newyearsevebudapest.com/public/img_admin/file_2014/20141217215016_gjxu.html

  • Pingback: Criminal Records Texas()

  • http://www.baileyaccess.com/storeed_admin/mcm%e5%8f%96%e3%82%8a%e6%89%b1%e3%81%84%e5%ba%97_590138.asp mcm取り扱い店

    ・取り付けの際にはソケットに確実にとりつけてください。
    mcm取り扱い店 http://www.baileyaccess.com/storeed_admin/mcm%e5%8f%96%e3%82%8a%e6%89%b1%e3%81%84%e5%ba%97_590138.asp

  • http://www.gantzdental.com/pdfs/news/box_admin/20141218011232_6a8a.html サマンサ アクセサリー

    ご注文時に取付データ記入欄へ身長、体重、ご年齢、スキーレベル、ブーツソールサイズをご記入下さい。
    サマンサ アクセサリー http://www.gantzdental.com/pdfs/news/box_admin/20141218011232_6a8a.html

  • http://www.villaggivillasimius.com/includes/js/scripts_2014/20141218023455_kqhe.html メンズファッション ズボン

    120分テープに10時間、2時間の映画なら5本も録画できるので、旅行や出張中の予約録画や、連続ドラマのまとめ録り等に便利です。
    メンズファッション ズボン http://www.villaggivillasimius.com/includes/js/scripts_2014/20141218023455_kqhe.html

  • Pingback: steven avery()

  • Pingback: happy new year 2015 quotes for mom()

  • Pingback: Books()

  • Pingback: Andreas Antonopoulos Talks()

  • Pingback: dining room design()

  • Pingback: פורץ רכבים בראשון לציון()

  • Pingback: perfumes originales()