طراحی تعاملی, وبسایت و پروفایل شخصی داود جمیری

21 نمونه از بهترین نمونه های طراحی وب سایت تلفن همراه

در حال حاضر بیش از هر زمان دیگری ، کسب و کارها بر ایجاد تجربه های لذت بخش وب سایت تلفن همراه متمرکز شده اند.

گوگل از سال 2015 هنگامی که الگوریتم رتبه بندی خود را به روز کرد ، سپس نمایه سازی سایت های تلفن همراه در مارس 2018 ، و دارای نمایه سازی تلفن همراه اول از سال 2019 انجام شد. این بسیار مهم است ، زیرا چندین سال است که درخواست های بیشتری در دستگاه های تلفن همراه نسبت به رایانه جستجو می کند.

در آینده ، گوگل فقط برای مواردی که از نظر موبایل سازگار است ( از جمله زمان بارگذاری صفحه ) در به روز رسانی الگوریتم آن. بنابراین ، اگر روی بهبود تجربه تلفن همراه خود تمرکز نکرده اید > ، باید از همین حالا شروع کنید یا رتبه جستجوی خود را کاهش دهید. Click here to download a free, 5-part kit to help you grow your mobile  audience.

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

1. Shutterfly

چرا کار می کند: وب سایت تلفن همراه Shutterfly برای بازدیدکنندگان جدید و مشتریان با تجربه به راحتی قابل مشاهده ، بسیار بصری و بصری است.

Shutterfly یک سرویس آنلاین است که به کاربران امکان می دهد کتابهای عکس ، کارت های شخصی ، لوازم التحریر و سایر محصولات مشابه ایجاد کنند. از آنجا که افراد بیشتری عکس می گیرند و سپس با استفاده از تلفن های هوشمند خود به آنها دسترسی پیدا می کنند ، Shutterfly نیاز به ایجاد یک تجربه تلفن همراه عالی برای مشتریان خود را تشخیص داد.

Shutterfly دو هدف اصلی را در وب سایت تلفن همراه خود انجام می دهد. اول ، برای کاربران آسان است که از اطلاعات ارائه شده خود مطلع شوند. دوم ، این اطلاعات با تصاویر زیبا تکمیل می شود.

هنگامی که وارد سایت تلفن همراه می شوید ، جدیدترین مرکز تبلیغاتی Shutterfly و مرکز و همچنین یک منوی ناوبری بالا به اندازه انگشتان خود را مشاهده می کنید که هیچ کدام بر تجربه کاربر غلبه نمی کند.

mobile website design: shutterfly homepage

پایین بروید و دکمه های بزرگی را مشاهده خواهید کرد که به کاربران این امکان را می دهد تا به سرعت نوع محصول مورد نظر خود را انتخاب کنند. هنگامی که کاربران روی یکی از این گزینه ها کلیک کردند ، با عکس های بزرگی که نشان می دهد چه چیزی Shutterfly قابلیت مرور آسان را دارد.

mobile-website-design-emobile website design: shutterfly product listingsxamples-shutterfly-2

2. Google Maps

چرا کار می کند: وب سایت تلفن همراه برای Google Maps عملکرد ، تصاویر و عملکرد مشابهی با برنامه تلفن همراه خود دارد.

هر کس برنامه یا مسیرهای مورد علاقه خود را دارد. مال من Google Maps است که از آن استفاده می کنم چه پیاده روی کنم ، چه رانندگی کنم ، چه دوچرخه سواری کنم ، چه وسیله نقلیه عمومی. وب سایت تلفن همراه آن خاص این است که عملاً از برنامه تلفن همراه قابل بارگیری آنها قابل تشخیص نیست.

mobile website design: google map search result

این تصاویر زیر از وب سایت تلفن همراه آنها گرفته شده است ، اما اگر اصلاً با این برنامه آشنا باشید ، متوجه خواهید شد که آنها دقیقاً مشابه هستند. نه تنها ظاهر یکسان است ، بلکه وب سایت تلفن همراه دارای سرعت و عملکرد برنامه است.

mobile website design: google map place description page

3. Typeform

چرا کار می کند: فرم وب سایت تلفن همراه خود را برای بهبود زمان بارگذاری و ارائه تجربه کاربری ساده تر ، ساده می کند.

Typeform یک شرکت فناوری مستقر در بارسلونا است که دارای یک مأموریت ساده است: “ایجاد فرم ها عالی”. وب سایت رومیزی آنها به زیبایی طراحی شده است و از بازدیدکنندگان با کپی مختصر ، انیمیشن های مرتبط و سایر اجزای پیچیده طراحی استقبال می کند.

اما برای کاربران تلفن همراه ، Typeform تشخیص داد که این طرح پیچیده می تواند بر روی بارگذاری صفحه تأثیر بسزایی دارد ، در میان سایر مشکلات. به همین دلیل آنها در واقع بسیاری از آنها را حذف کردند ، سایت را از بین بردند و تجربه کلی تلفن همراه را ساده کردند. سایت تلفن همراه نسخه ساده تری از وب سایت رومیزی است و هنوز هم به زیبایی طراحی شده است.

mobile website design: typeform homepage

به دکمه های بزرگ موجود در صفحه منو توجه کنید – برای ضربه زدن با انگشت روی صفحه تلفن همراه مناسب است.

mobile website design: typeform product description page

4. Etsy

چرا کار می کند: این سایت تلفن همراه مهمترین ویژگی های خود – جستجوی سایت ، دسته بندی اقلام و محصولات پرطرفدار – را در صفحه اصلی و در عین حال از بهم ریختگی جلوگیری می کند.

Etsy یک وب سایت تجارت الکترونیک است که افراد می توانند اجناس قدیمی یا دست ساز را خرید و فروش کنند. اکثر خریدارانی که از وب سایت Etsy دیدن می کنند یکی از دو کار را انجام می دهند: یا در جستجوی یک مورد خاص هستند ، یا در حال مرور موارد در دسته بندی های مورد علاقه خود هستند.

وب سایت تلفن همراه از همان ابتدا به هر دو نوع بازدیدکننده توجه می کند. هنگامی که برای اولین بار به وب سایت تلفن همراه آنها می روید ، با گزینه ای برای جستجوی موارد ، مغازه ها یا دسته های خاص مواجه می شوید.

mobile website design: etsy homepage

بلافاصله در زیر تصاویری کوچک از موارد پرطرفدار است که برخی از محبوب ترین مواردی را که می توانید در Etsy خریداری کنید به نمایش گذاشته شده است. کاربران تلفن همراه می توانند این موارد پرطرفدار را در قالب کلاژ مشاهده کنند و تصاویر آنقدر بزرگ هستند که به راحتی با انگشت ضربه می زنند.

mobile website design: etsy popular items homepage

5. Adrian Zumbrunnen

چرا کار می کند: آدریان زامبرونن یک رویکرد منحصر به فرد برای وب سایت شخصی در نظر گرفته و تجربه ای را ایجاد می کند که کاملاً برای کاربران تلفن همراه مناسب است.

این وب سایت شخصی آدریان زومبرونن ، طراح ، نویسنده و سخنران UX است. وقتی از وب سایت او دیدن می کنید ، بلافاصله متوجه می شوید که یک چیز بسیار منحصر به فرد در آن وجود دارد: این یک وب سایت مکالمه

است.

تقریباً به نظر می رسد یک مکالمه پیام متنی که معمولاً در تلفن خود دارید ، از جمله بیضوی برای نشان دادن “تایپ کردن” او. در پایان هر مبادله ، به کاربران دو گزینه پاسخ داده می شود ، بنابراین شبیه به تجربه “ماجراجویی خود را انتخاب کنید” است.

در حالی که تجربیات تلفن همراه و رایانه رومیزی مشابه است ، وب سایت رومیزی به نظر می رسد که عمدتا برای موبایل ساخته شده است – که می تواند در آینده سایتها به آن سمت بروند.

mobile website design: personal website homepage

و اگر ترجیح می دهید در مبادله ای مانند مکالمه شرکت نکنید ، می توانید برای اطلاع از جزئیات به پایین بروید.

mobile website design: personal website contact page

6. وروجک در قفسه

چرا کار می کند: سایت تلفن همراه Elf on the Shelf انتخاب وسیع محصولات خود را از همان ابتدا قابل مشاهده می کند و از نمایشگرهای احساسی و بسیار بصری برای جلب نظر بازدیدکنندگان استفاده می کند.

وروجک روی قفسه ، به طور نسبی ، یک سنت کریسمس نسبتاً جدید است که بر اساس کتاب کودک طراحی شده است. اگر ناآشنا هستید ، فرض اساسی این است: این کتاب داستان جن های پیشاهنگ بابانوئل را روایت می کند ، که توسط سانتا برای مراقبت از کودکان در خانه هایشان در سراسر جهان فرستاده شده و به سانتا گزارش می دهند.

والدین می توانند مجسمه جن را خریداری کنند ، که آنها را به صورت ظریف در جایی در خانه خود قرار می دهند که فرزندانشان می توانند آن را ببینند. هر شب قبل از کریسمس ، والدین جن را به مکان دیگری در اطراف خانه خود منتقل می کنند تا “ثابت کنند” که جن های پیشاهنگ واقعی هستند و همیشه به آنها نگاه می کنند.

وقتی وارد وب سایت Elf در وب سایت Shelf می شوید ، خواهید دید که محصولات زیادی وجود دارد که می توانید خریداری کنید. اما طراحان وب به جای این که کاربران را مجبور به مرور هر محصول به صورت مجزا کنند ، هر محصول را در یک کاشی بزرگ و فریبنده که هدف سفر هر خریدار را توصیف می کند ، بسته بندی می کنند و مورد برجسته در جلوی صفحه نمایش داده می شود.

شما جن یا توله سگ خود را نمی خرید ، بلکه آن را قبول می کنید. این واقعاً یک تجربه قدرتمند در چنین صفحه کوچک است.

mobile website design: elf on the shelf homepage

7. BuzzFeed

چرا کار می کند: BuzzFeed با وب سایتی که آنها را به موضوعات مورد علاقه خود هدایت می کند ، به کاربران تلفن همراه خود توجه می کند.

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

و فکر می کنید در حین رفت و آمد من BuzzFeed را چک می کنم؟ حدس زدید: تلفن من. BuzzFeed می داند که بسیاری از بازدیدکنندگان آنها از طریق تلفن همراه از سایت آنها دیدن می کنند ، بنابراین آنها بسیار تلاش کرده اند تا تجربه ای روان برای خوانندگان در حال حرکت خود ایجاد کنند.

هنگامی که وارد وب سایت تلفن همراه BuzzFeed می شوید ، اولین چیزی که مشاهده می کنید برخی از محبوب ترین قطعات محتوای آنها است که در قالب ساده و شبیه به کولاژ با استفاده از تصاویر بزرگ که به راحتی قابل لمس هستند نمایش داده می شود.

mobile website design: buzzfeed homepage

برای کاربرانی که به دسته های خاص علاقه مند هستند ، منویی در بالای صفحه وجود دارد که همه دسته بندی های پست را لیست می کند. هر دسته دارای صفحه فهرست اختصاصی خود هستند که در بالای آن فیلترهای قابل کلیک وجود دارد.

mobile website design: buzzfeed film and media page

8. Evernote

چرا کار می کند: با یک مسیر تبدیل واضح و طراحی تمیز که از روی دسکتاپ منتقل شده است ، سایت تلفن همراه Evernote به وضوح نشان می دهد که چگونه کار می کند و چگونه می توانید بپیوندید.

Evernote برنامه ای است که به شما امکان می دهد یادداشت ها ، تصاویر و مقالات وب را ذخیره کرده و سپس در همه دستگاه های خود به آنها دسترسی پیدا کنید. از آنجا که کاربران تمایل دارند برنامه را بارگیری کرده یا از طریق چندین دستگاه از جمله رایانه های رومیزی ، تلفن های هوشمند و رایانه های لوحی به وب سایت دسترسی پیدا کنند ، ضروری است که Evernote تجربه موبایل را به درستی دریافت کند.

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

mobile website design: evernote desktop homepage

وقتی به وب سایت تلفن همراه Evernote نگاه می کنید ، می بینید که آنها پالت رنگ و سبک کلی نام تجاری خود را کاملاً دست نخورده حفظ کرده اند. وب سایت تلفن همراه این شرکت تمیز ، ساده است و به هیچ وجه از ارزش برنامه نمی کاهد. مسیر تبدیل Evernote از فراخوان متمرکز برای اقدام آشکار است: “ثبت نام رایگان.”

mobile website design: evernote mobile homepage

9. /a>

چرا کار می کند: تم های وردپرس Pixelgrade سازگار با تلفن همراه ، حداقل و زیبا هستند. به طور خاص ، موضوع Pile برای وب سایت های نمونه کارها وردپرس مناسب است.

Pixelgrade’s Pile theme allows you to properly showcase your services and previous work and doesn’t sacrifice mobile design. The theme is optimized for mobile devices while delivering on your content’s intended message and aesthetic at the same time.

mobile website design: pixelgrade homepage

10. Huffington Post

Why it works: The well-known publication condenses its content to better fit mobile screen dimensions and serve readers on the move.

The Huffington Post is a news outlet that reports everything from politics and current events to entertainment and technology. What makes their mobile website unique is that they actually alter their headlines slightly for mobile users so their content is more easily scannable.

If you compare the desktop versus mobile websites, you’ll notice that the mobile website has fewer words on the homepage. The headlines are shorter and much more digestible — perfect for someone skimming or reading on a small screen.

mobile website design: huffington post mobile homepage

There’s also a clickable menu in the top left-hand corner of the screen listing out all the post categories.

mobile website design: huffington post mobile menu

11. Express

Why it works: Express cleverly utilizes images to create a more realistic product viewing experience — users simply swipe to view products from different angles before committing to a purchase.

Express is a clothing store that caters to young men and women. Because their audience often comes to their website to browse clothing, it’s important for their website to include big, clear images of their clothing — especially on mobile devices, when users will need to tap items on the screen with their fingers to click through for purchase information.

Express takes its mobile experience a step further than most online retail sites. If you slide your finger from left to right across an image showing a piece of clothing, the image will change so you can see the clothing in a different view. In other words, users don’t have to load another page to see multiple pictures of the same article of clothing.

Look at the image on the top right in the following two images to see how it changes when you swipe to one side:

mobile website design: express homepage

mobile website design: express homepage with alternate featured image

12. Nationwide Insurance

Why it works: This mobile site serves two different types of clientele and divides its mobile website accordingly. Whether you’re an individual or a customer, it’s clear where you should go.

Nationwide Insurance provides insurance and financial services. You might think a financial company would have a complicated website, but on mobile, Nationwide Insurance nails the simple user experience.

When you arrive on Nationwide’s mobile site, you’ll see two tabs at the top allowing you to identify as one of two types of users right away to customize your experience: Personal or Business. Or, alternatively, you can “Find an Agent” or “Find a financial advisor” to learn more information about their services.

Although limiting the experience to these two options excludes Nationwide’s more in-depth features, it makes for a much easier experience for visitors using small screens. This is a great technique to lead potential customers in the right direction if they’re not yet account-holders and are visiting the website for the first time.

mobile website design: nationwide homepage

13. Squaredot

Why it works: This mobile site nails the color palette, font choices, and interactive elements on the homepage. It’s simple, engaging, and playful.

Squaredot is an agency based in Dublin, Ireland that helps marketers build out their inbound marketing strategies. Their mobile website is colorful, simple, and makes for easy navigating.

What sticks out to me most is the visually pleasing color combinations as well as the large clickable menu that expands to reveal each of the organization’s services.

mobile website design: squaredot homepage

Farther down the page, there are entirely swipeable regions. The one pictured below presents client success stories and adds another dimension to the mobile site.

mobile website design: squaredot customer stories page

14. Zappos

Why it works: The Zappos mobile website is very easily searchable, which is critical given its huge inventory. The latest offerings are also clear on first page load.

Zappos is an online vendor for shoes and clothing known for its stellar customer service. Their top priority on mobile is to help users search easily for the items they’re looking for on their website, so they’ve put a large search bar at both the top and bottom of their mobile website to make it super easy for them.

This is what the top of their mobile site looks like:

mobile website design: zappos homepage

15. ABC

Why it works: This mobile site’s dark theme is a contrast to many other popular mobile sites, bringing a theater-like feel to the experience. The highly navigable pages help viewers find their content of choice or simply browse.

ABC is a television broadcasting company known for popular shows like The Bachelorette, The Rookie, and General Hospital. Users visiting ABC’s desktop website are greeted with these options and more. View the network’s television schedule, check out the most recent Emmy winners, watch some of your favorite television shows, or even look at entertainment news relating to those shows.

But because nearly every household today is a multi-screen household, ABC knows its experience on a mobile device should be both simple and ready for viewing.

When you visit the ABC website on a mobile device, you’ll see a dark background for a theatre-like experience with tiles for each program you might want to stream. Users can scan through these options and click into any show they want based on genre, alphabetical order, what’s popular, and similar categories you’d also find on your TV’s streaming platform.

mobile website design: abc homepage

16. Lean Labs

Why it works: Lean Labs utilizes fly-in animations and distinct content sections to tell a story as users scroll down.

Lean Labs is a marketing agency that creates engaging, responsive, and high-conversion web solutions. (They were also featured on the hit TV series Shark Tank.) The folks there do a great job of providing a smooth experience for mobile users, especially with regard to their design techniques.

Notice how Lean Labs’ mobile website uses scale, contrast, and typeface to distinguish certain elements of their page. It even incorporates fly-in animations for its images to enhance the scrolling experience.

mobile website design: lean labs homepage

17. SAP

Why it works: Despite its plethora of offerings, SAP reigns it in on its mobile website and simplifies its CTAs and menus.

SAP is an enterprise software company that manages business operations and customer relations. The business enhances its mobile experience by condensing information and combining some of their calls-to-action into sliders, whereas their desktop website has these CTAs laid out horizontally.

mobile website design: sap homepage

This helps keep things simple so mobile users aren’t overwhelmed with a lot of information at once, and it also ensures none of the CTAs are too small to read.

18. KISSmetrics

Why it works: KISSmetrics uses color to separate content sections from each other and to create prominent CTAs that stick out, even on smaller mobile screens.

KISSmetrics provides analytics software for businesses. On their homepage, there’s a lot of information explaining what the software does along with a testimonial.

But their mobile site is displayed a little differently: On a mobile device, the information on their site is shown in a list with alternative dark and light modules. This makes it easy for users to skim the page without getting lost in text.

mobile website design: kissmetrics homepage

They’ve also made the text and fields on their forms large and easy to read:

mobile website design: kissmetrics contact form

19. idig Marketing

Why it works: idig prioritizes accessibility on its website, presenting a sticky accessibility menu where users can adjust various display options.

idig Marketing is a development and communications provider. Their mobile website is laid out similarly to their desktop website, but I especially liked the readily available accessibility options menu on the right side of the screen.

mobile website design: idig marketing homepage

Tapping this blue icon reveals a menu where users can adjust settings like enhanced visuals.

mobile website design: accessibility menu

20. IndiaMART

Why it works: This company’s mobile website is both conveniently browsable and searchable, depending on what visitors are looking to do on the site. It displays trending items prominently as well.

IndiaMART is the largest online B2B marketplace in India, and its simple category-based mobile store makes it one of the best mobile websites we’ve ever seen in the ecommerce industry.

The company’s mobile homepage puts the search bar right at the top so you can always retreat to a custom search if browsing no longer suffices to find the item you’re looking for.

But, IndiaMART makes it easy to peruse its digital aisles by sorting each item by item type, and then sub-types within each item type — a smart design move to encourage users to explore your site further. Under “Apparel & Garments,” for example, you have easily clickable tiles to check out more specific categories of clothing, such as menswear, women’s dresses, and even suits, sarees, and similar garb native to India.

mobile website design: indiamart homepage

Underneath IndiaMART’s browsing tiles, the company has its own trending section specifically for merchandise people are paying most attention to — similar to a trending list of news on a social media platform. Each trending category has a mobile-friendly call-to-action button allowing users to get price quotes for the product they’re interested in.

mobile website design: indiamart product listing

21. Pipsnacks

Why it works: Finally, the mobile website for Pipsnacks doesn’t sacrifice its visuals for smaller screens. Even on your smartphone, you’re immersed in the snack food company’s lighthearted branding.

To close out our list, Pipsnacks brings the vibrant colors and textures of their desktop site to the mobile screen. Products are listed as large, clickable images that bring you to their respective product pages, and the mobile site is enhanced with minimal but effective animations that add to the experiences without hurting load time.

mobile website design: pipcorn homepage

Mobile Websites to Inspire Yours

These days, having an effective mobile website isn’t just a nice perk — it’s a necessity, at least if you want to rank in search results and get found. If you neglect your mobile site, that might just put off half your audience.

Fortunately, today’s website builders and platforms let anyone make a site that’s both desktop-ready and mobile-friendly. But, it’s the little details you add on top that will make yours truly exceptional.

Want more information on how to optimize your business with a creative mobile web design? Download the free kit on mobile marketing below.

Editor’s note: This post was originally published in October 2018 and has been updated for comprehensiveness.

guide to mobile marketing

نوشته ها مرتبط

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

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