تحلیل کوتاهی بر نمای سایت amazon.com

یکی از سایت‌های e-commerce که برای خیلی از سایت‌های دیگر می‌تواند نمونه باشد سایت آمازون می‌باشد.

نمای desktop

نمای desktop سایت آمازون
سایت آمازون

در این نما تمام منو ها در عرض صفحه جا داده شده است. همچنین لوگو و تغییر زبان و قسمت ورود و سبد خرید در کنار جستجو در یک سطر قرار دارند.

این نما در حالت موبایل تغییر می‌کند. حتی با لب تاب هم نمی‌توانید حالت موبایل را تجربه نمایید:

تغییر سایز سایت آمازون
تغییر سایز سایت آمازون

پس باید این موضوع را در طراحی ها در نظر گرفت که حالت موبایل در دیباگر مرورگر به راحتی به دست نمی آید.

مگر اینکه از یه extension مثل SIMPLE MODIFY HEADERS استفاده کنید.

simple-modify-headers
simple-modify-headers

نمای موبایل

همانطور که مشاهده می‌کنید در این دو حالت موبایل منوی پایین به همان شکل واضح و افقی مانده با این تفاوت که ادامه آنها را می‌توان با کشیدن انگشت به سمت چپ مشاهده نمود و آیکون ها نیز به تناسب تغییر یافته و جستجو به یک ردیف جدید منتقل گردیده است. این حالت در اندازه‌های تبلت متفاوت است.

با استفاده از پلاگینی که پیش‌تر معرفی کردم تغییر User-Agent به مقدار زیر، می‌توان نمای تغییر موبایل در اندازه‌های گوناگون را واضح‌تر مشاهده نمود:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3 lk

تغییر سایز سایت آمازون در حالت موبایل
تغییر سایز سایت آمازون در حالت موبایل

نویسنده: حمید شریعتی

از سال 1365 دارم زندگی می‌کنم. مثل همه آدم‌ها... امیدوارم موفق بشم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *