1 / 28

اردیبهشت 1391

اصول طراحی وب برای موبایل. اردیبهشت 1391. Hamid Reza Hemmati. 5 میلیارد نفر در دنیا از تلفن همراه استفاده می کنند. در سال 2010 بیش از 530 میلیون نفر از وب بر روی موبایل استفاده کرده اند تا سال 2015 بیش از 1 میلیارد نفر از وب بر روی موبایل استفاده خواهند کرد.

bishop
Download Presentation

اردیبهشت 1391

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. اصول طراحی وب برای موبایل اردیبهشت 1391 Hamid Reza Hemmati

  2. 5میلیارد نفر در دنیا از تلفن همراه استفاده می کنند

  3. در سال 2010بیش از 530 میلیون نفر از وب بر روی موبایل استفاده کرده اند • تا سال 2015بیش از 1 میلیارد نفر از وب بر روی موبایل استفاده خواهند کرد

  4. اگر هم اکنون به فکر ساخت نسخه موبایل سایت خود نباشید،‌ بسیاری از کاربران خود را از دست خواهید داد

  5. حالا باید چکار کنیم ؟

  6. شناختن مرورگرهای موبایل و میزان استفاده از آنها

  7. مرورگرهای رایج وب و میزان استفاده از آنها

  8. میزان استفاده از مرورگرهای موبایل در مناطق مختلف

  9. دسته بندی گوشی های مختلف و سایز صفحه ها

  10. دسته بندی گوشی های مختلف و سایز صفحه ها • گوشی های low-end :‌ 128 x 128- 128 x 160 • گوشی های mid-end گروه اول : • 176 x 208– 176 x 220 • گوشی های mid-end گروه دوم : • 320 x 240 (به همراه برخی از گوشی های سطح بالا) • گوشی های high-end • گوشی های تاچ و اسمارت فون ها با سایز های 240 x 480 – 320 x 480 – 360 x 480 – 480 x 800 – 480 x 854 – 640 x 960

  11. آشنایی با استاندارد های کدنویسی موبایل ها

  12. استاندارد های کدنویسی موبایل • WAP 1.1 • کدنویسی با WML • WAP 2.0 • کدنویسی WML • معرفی XHTML MP و WCSS توسط OMA • معرفی HTML basic 1.1 و CSS MP توسط W3C • آینده کدنویسی موبایل • HTML 5 • CSS 3

  13. Doctype های مورد استفاده برای صفحه موبایل

  14. پشتیبانی مرورگرها از Doctype ها

  15. Tag های موجود در XHTML نسخه موبایل

  16. Header طراحی صفحه موبایل حتما باید یک ستونهباشد Body Footer

  17. نکات مهم برای طراحی موبایل وب • صفحه را طوری طراحی کنید که scroll افقی نخورد • حال و هوای طراحی سایت اصلی را حفظ کنید • تعداد لینک های navigation را به چهار یا پنج عدد محدود کنید • بخش ها را با رنگ پس زمینه از هم جدا کنید • تعداد لینک های داخل صفحه را زیر 10 تا حفظ کنید • لینک بازگشت به بالای صفحه را حتما در footer قرار دهید • برای navigation بیش از یک لینک در یک خط قرار ندهید • در navigation لینک ها را به سبکی طراحی کنید که کل عرض صفحه را در مرورگر موبایل بگیرد • مطالب مهم تر را بالای صفحه قرار دهید

  18. نکات مهم برای طراحی موبایل وب • میزان متنی را که کاربر باید وارد کند، به کمترین حد ممکن برسانید • رنگ بندی سایت خود را در محیط های مختلف چک کنید • به جای tableها از list استفاده کنید • مناطق کلیک شدنی در گوشی های touchباید حداقل 40 پیکسل عرض و طول داشته باشند • از دکمه auto clear برای فیلد های متنی استفاده کنید • Label ها را در بالای فیلد های متنی قرار دهید

  19. چطور با Media Query ها طرحی انعطاف پذیر برای موبایل ایجاد کنیم

  20. http://css-tricks.com/resolution-specific-stylesheets/

  21. شیوه به کار گیری media query ها <link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' /> <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)‘href='css/medium.css' /> <link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' /> @media all and (max-width: 699px) and (min-width: 520px){ #sidebar ulli a { padding-left: 21px; background: url(../images/email.png) left center no-repeat; } }

  22. <!DOCTYPE HTML> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Resolution Dependent Layout</title> <link rel='stylesheet' type='text/css' href='css/style.css' /> <link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' /> <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)‘ href='css/medium.css' /> <link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' /> </head> <body> <div id="page-wrap"> <div id="header">Header</div> <div id="main-content">Content</div> <div id="secondary-one">Secondary</div> <div id="secondary-two">Extra</div> </div> </body> </html>

  23. Style.css * { margin: 0; padding: 0; } body { font: 14px Georgia, serif; } #page-wrap{ margin: 40px auto; color: white; } #page-wrap > div { border: 1px solid #999; padding: 20px; margin-bottom: 5px; color: black; } #header { background: #eee; } #main-content { background: #eee; } #secondary-one { background: #eee; } #secondary-two { background: #eee; }

  24. wide.css body { font: 14px Georgia, serif; background: #999;} #page-wrap { width: 900px; position: relative; } #main-content { float: left; width: 440px; height: 300px; margin-left: 218px; } #secondary-one { width: 170px; height: 300px; position: absolute; left: 0; top: 64px; } #secondary-two { float: right; width: 153px; height: 300px; }

  25. medium.css body { font: 14px Georgia, serif; background: #666;} #page-wrap { width: 700px;} #main-content {float: right; width: 440px; height: 300px; } #secondary-one {float: left; width: 170px; height: 300px; } #secondary-two { display: none; }

  26. narrow.css body { font: 14px Georgia, serif; background: #333;} #page-wrap {width: auto; margin: 40px 3%;} #secondary-two { display: none; }

  27. آدرس سایت: www.wedesign.ir آدرس ایمیل: amirabbas.abdolali@gmail.com آدرس تویتر: www.twitter.com/amirabbas آدرس فیسبوک: www.facebook.com/abdolali شماره تماس : 09394004049 شاد باشید و دیگران را شاد کنید Hamid Reza Hemmati www.HamidHemmati.com

More Related