Advertisement
  1. Code
  2. Yii

Xây dựng Startup của bạn: Cải thiện phiên bản di động cho Web

by
Read Time:15 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: The Dashboard Foundation
Building Your Startup: Issue Tracking and Feature Planning

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Đây là hướng dẫn thuộc loạt bài Building Your Startup With PHP trên Envato Tuts. Trong loạt bài này, tôi hướng dẫn bạn việc khởi chạy một startup từ khái niệm đến thực tiễn bằng cách sử dụng ứng dụng Meeting Planner của tôi làm ví dụ thực tế. Mỗi bước trải qua, tôi sẽ phát hành code của Meeting Planner dưới dạng các ví dụ mã nguồn mở để bạn có thể nghiên cứu. Tôi cũng đang giải quyết các vấn đề có liên quan đến kinh doanh của startup khi chúng phát sinh.

Ứng dụng cho di động và Web tự thích ứng

Về mặt chiến lược, việc xây dựng ứng dụng dành cho thiết bị di động cho Công cụ lập kế hoạch họp trên iOS và Android có ý nghĩa, nhưng về mặt tài chính tôi chưa nêu ra tài nguyên cho điều này. Mathew Ingram gần đây đã viết trong tạp chí Fortune rằng vì có rất nhiều dịch vụ dành cho người dùng di động, "ít nhất là về mặt thống kê - không ai có ý định tải về ứng dụng của bạn." Vì thế trong khi tôi có thể cải thiện trải nghiệm của Meeting Planner với một ứng dụng, khả năng đáp ứng của nó không thực ý nghĩa với các tài nguyên hiện tại của tôi.

Tuy nhiên, điều cực kỳ quan trọng là khiến Meeting Planner trở thành trải nghiệm web tuyệt vời trên thiết bị di động.

Trong phần hôm nay, tôi sẽ xem xét và thảo luận về những thay đổi được định hướng để thực hiện điều đó — về cơ bản là làm cho ứng dụng web của chúng tôi trở nên dễ tự thích ứng hơn, dễ sử dụng trên thiết bị di động và máy tính bảng. Kiểm tra kết quả (trên điện thoại hoặc máy tính bảng của bạn)!

Một trong những thách thức của coding cho phần hôm nay là tôi không phải là một nhà thiết kế hay một coder chuyên về CSS. Một số ngày tôi cảm thấy như tôi không nên tự mình viết code; ở Microsoft, tôi là một Group Program Manager, tức là chúng tôi có các nhà thiết kế, một phòng thí lab có đầy đủ khả năng, CSS không hiện hữu, v.v.

Trong tình huống công việc này , tôi cảm thấy sợ khi cố gắng tìm hiểu media queries, breakpoints, và CSS chuyên biệt - tôi không rành về chủ đề này, và đã tốn thời gian để định hướng chi tiết. Tuy nhiên, trong vòng 48 giờ, tất cả mọi thứ xảy ra một cách nhanh chóng và đẹp mắt. Nếu bạn đi nhanh xuống phần kết của câu chuyện, bạn sẽ thấy sau cùng có bao nhiêu dòng CSS cần thiết cho tất cả các thay đổi. Đột nhiên khi tôi bắt đầu xem Meeting Planner trên điện thoại của mình, tôi rất vui mừng vì trải nghiệm web tự thích ứng mới hoạt động hiệu quả thế nào.

Thành thật mà nói, điều này làm cho tôi thấy rằng một ứng dụng di động chuyên dụng không cần thiết vào lúc này. Chúng tôi có thể tìm kiếm người dùng của mình bằng trải nghiệm web di động ngay bây giờ, đặc biệt là thông qua các giai đoạn quan trọng của bản alpha và beta sắp tới.

Trong thời gian chờ đợi, nếu chưa dùng thử Meeting Planner, hãy thử lên lịch cuộc họp đầu tiên từ điện thoại hoặc máy tính bảng của bạn. Tôi chắc chắn tham gia vào phần bình luận bên dưới, vì thế hãy cho tôi biết về kinh nghiệm của bạn! Bạn cũng có thể liên hệ với tôi trên Twitter @reifman. Tôi luôn quan tâm đến các yêu cầu những tính năng mới và đề xuất cho các chủ đề hướng dẫn.

Xin nhắc lại, tất cả code cho Meeting Planner được viết trong Yii2 Framework cho PHP. Nếu bạn muốn tìm hiểu thêm về Yii2, hãy xem loạt bài Programming With Yii2 của chúng tôi.

Trạng thái hiện tái cho phiên bản di động

Để bắt đầu, tôi duyệt qua trạng thái hiện tại của dịch vụ Meeting Planner qua điện thoại iOS của tôi và chụp ảnh màn hình của ứng dụng ban đầu. Không tệ, nhưng cũng không tuyệt. Hãy xem qua những gì tôi đã tìm ra

Trang chủ

Trang chủ có vẻ tốt, mặc dù về mặt thẩm mỹ, tôi muốn nội dung mở đầu, "Making Scheduling Easy", sẽ tách ra khác biệt một chút, ví dụ như khoảng tương đương chiều cao của ba dòng. Tuy nhiên, Bootstrap quản lý drop-down menu tốt và các phần còn lại của trang hoạt động đúng theo chức năng:

Meeting Planner Responsive Web - Home PageMeeting Planner Responsive Web - Home PageMeeting Planner Responsive Web - Home Page

Trang Đăng Ký

Một lần nữa, ngoài bố cục thẩm mỹ của dòng tiêu đề và sự nhất quán canh lề trái, trang đăng ký về cơ bản có chức năng:

Meeting Planner Responsive Web - Signup PageMeeting Planner Responsive Web - Signup PageMeeting Planner Responsive Web - Signup Page

Lập kế hoạch các cuộc họp

Khi một người bắt đầu lập kế hoạch cuộc họp, trang chỉ mục hiện tại cần có sự cải thiện. Có quá nhiều cột. Đối tượng được phân loại. Có lẽ thông tin tôi đã chọn để hiển thị ở đây từ đầu đã là không cần thiết. Và, chắc chắn, các tùy chọn lệnh không hiện hữu trong khung nhìn. Trang này cần được điều chỉnh nhiều hơn nữa cho thiết bị di động.

Meeting Planner Responsive Web - Meetings ListMeeting Planner Responsive Web - Meetings ListMeeting Planner Responsive Web - Meetings List

Các trang khác hoạt động tốt, chẳng hạn như yêu cầu một họp mới cho một chủ đề. Tuy nhiên, người dùng trên di động có thể không muốn được cung cấp một trường văn bản để nhập vào một thông điệp dài hơn để giới thiệu cuộc họp:

Meeting Planner Responsive Web - New Meeting Subject FormMeeting Planner Responsive Web - New Meeting Subject FormMeeting Planner Responsive Web - New Meeting Subject Form

Việc bổ sung người tham gia cũng sẽ trở nên rối loạn chức năng với các phần mở rộng bootstrap mà chúng tôi đang sử dụng:

Meeting Planner Responsive Web - Add a Person FormMeeting Planner Responsive Web - Add a Person FormMeeting Planner Responsive Web - Add a Person Form

Và những view cho việc lập kế hoạch cho các địa điểm và thời gian bắt đầu bị phá vỡ. Một lần nữa, thiết kế thông thường cho máy để bàn mang đến quá nhiều chi tiết và quá nhiều tùy chọn cho thiết bị di động:

Meeting Planner Responsive Web - When Times Form with SwitchesMeeting Planner Responsive Web - When Times Form with SwitchesMeeting Planner Responsive Web - When Times Form with Switches

Các khu vực khác

Chức năng của trang Places hoạt động nhưng cần cải thiện bố trí của các nút bấm. Và có lẽ chức năng này không cần thiết cho người dùng trên di động.

Meeting Planner Responsive Web - Add Places FormMeeting Planner Responsive Web - Add Places FormMeeting Planner Responsive Web - Add Places Form

Tương tự, bố cục của tab và hình ảnh bị phá hỏng khi trên thiết bị di động. Điều này cũng cần phải suy nghĩ:

Meeting Planner Responsive Web - Profile SettingsMeeting Planner Responsive Web - Profile SettingsMeeting Planner Responsive Web - Profile Settings

Những giải pháp phát triển

Chắc chắn, có rất nhiều khu vực của trang web có thể được cải thiện. Một số khu vực cần được xem xét lại cho thiết bị di động, một số khu vực được tối giản và một số khu vực khác được điều chỉnh về mặt thẩm mỹ. Hãy bắt tay vào công việc.

Những phương pháp tiếp cận khác nhau

Tôi gần như không có kinh nghiệm về với media query và breakpoint khi tôi bắt đầu công việc này. Vài ngày trước, tôi đã chần chừ khi phải đào sâu vào điều tôi sợ, là một bãi lầy không quen thuộc. Tôi đã bắt đầu với một media query thực tiễn để trêu chọc người biên tập của mình:

Trò đùa này giúp tâm trí tôi cảm thấy thoải mái. Tôi luôn sẵn sàng và hiện hữu với các thiên thần biên tập của Envato.

Có một số khu vực tôi bắt đầu cân nhắc:

  • Đơn giản hóa chức năng, đặc biệt là với quy trình lập kế hoạch cho cuộc họp
  • Xác định thông tin quan trọng để hiển thị cho thiết bị di động
  • Ẩn đi một số chức năng khi trên thiết bị di động, chẳng hạn như các thành phần, cột và tùy chọn trình đơn
  • Làm việc với media-queries và breakpoints
  • Tập trung vào các khu vực quan trọng nhất cho bản phát hành alpha

Một ý tưởng hữu dụng tôi duy trì hoạt động trên web là "Design for Mobile First" (ưu tiên thiết kế cho di động). Không may, tôi quá truyền thống và đã không thực hiện nó. Nhưng rất hữu ích để suy nghĩ lại mỗi trang với giao diện này: Mobile First.

Ví dụ: chỉ mục cuộc họp với bốn cột trong bảng phải có và mất phương hướng trên các điện thoại theo chiều ngang.

Tôi cứ tự hỏi mình làm thế nào tôi có thể thiết kế tất cả các trang để làm việc từ điện thoại.

Khởi động với Media Queries

Drop-Down Menus

Điều này đã mang lại một số nỗ lực để vượt qua sự do dự của tôi khi tìm hiểu thêm CSS. Để khởi động, tôi bắt đầu làm việc để giảm thiểu các menu thả xuống và đơn giản hóa phạm vi chức năng di động.

Hiện tại, tôi đã quyết định tạo một media query cơ bản cho các thiết bị nhỏ hơn và sử dụng trên toàn bộ trang web. Đây là frontend/site.css:

Thực hiện những thay đổi trở nên khá đơn giản. Đối với bất kỳ mục menu nào tôi muốn ẩn đi trên thiết bị di động, tôi đã cần thêm thuộc tính CSS, ví dụ: menuHide.

Đây là thuộc tính menuHide được bổ sung vào /frontend/views/layouts/main.php:

Đột nhiên, drop-down menu ít phức tạp hơn:

Meeting Planner Responsive Web - Responsive Dropdown MenuMeeting Planner Responsive Web - Responsive Dropdown MenuMeeting Planner Responsive Web - Responsive Dropdown Menu

Tôi dần nhận ra rằng việc đơn giản hóa và giảm chức năng trong phiên bản di động của web sẽ tạo ra trải nghiệm tốt nhất. Mọi người luôn có thể trở lại màn hình của họ để truy cập các tính năng khác, ít nhất là trong lúc này. Đây cũng là cơ hội để thu thập phản hồi từ mọi người trong giai đoạn alpha và beta.

Breadcrumbs

Bố cục mặc định của Yii bao gồm một tiện ích breadcrumb được tải qua composer và khó chỉnh sửa hơn. Tôi đã thử nghiệm với việc bổ sung CSS để ẩn đi phần tử đầu tiên và phần phân tách "/":

Meeting Planner Responsive Web - Desktop BreadcrumbsMeeting Planner Responsive Web - Desktop BreadcrumbsMeeting Planner Responsive Web - Desktop Breadcrumbs

Tốn chút thời gian nhưng tôi đã tìm hiểu sâu hơn về CSS, ví dụ như nội dung thứ cấp nth-child và xây dựng lòng tự tin cho tôi:

Tôi không biết rằng CSS có thể sửa đổi nội dung.

Đây là kết quả:

Meeting Planner Responsive Web - Responsive BreadcrumbsMeeting Planner Responsive Web - Responsive BreadcrumbsMeeting Planner Responsive Web - Responsive Breadcrumbs

Khoảng cách cho nút đã cải thiện cho Fingertips

Tiếp theo, tôi đã bổ sung CSS để tạo thêm vùng đệm cho các nút trên thiết bị di động để giúp việc bấm qua các đầu ngón tay ít lỗi hơn. Ví dụ: dưới đây là các nút submit và cancel trên thiết bị máy tính để bàn:

Meeting Planner Responsive Web - Default Button Spacing DesktopMeeting Planner Responsive Web - Default Button Spacing DesktopMeeting Planner Responsive Web - Default Button Spacing Desktop

Đây là CSS tôi đã sử dụng và bắt đầu bổ sung vào các nút khác nhau và các biểu tượng có thể nhấp được trên trang web:

Dưới đây là cách những biểu mẫu trông ra sao trên di động — hãy chú ý đến phần padding (đệm) mới giữa SubmitCancel:

Meeting Planner Responsive Web - Enhanced Button SpacingMeeting Planner Responsive Web - Enhanced Button SpacingMeeting Planner Responsive Web - Enhanced Button Spacing

Phần bao phủ nội dung có tính tự ứng biến

Meeting Planner Responsive Web - Home Page with Text WrapMeeting Planner Responsive Web - Home Page with Text WrapMeeting Planner Responsive Web - Home Page with Text Wrap

Tạo tiêu đề trang chủ, "Scheduling Made Easy", phần bao phủ thực sự mất thêm một ít thời gian. Cuối cùng, tôi đã thêm thẻ <br /> vào văn bản và mặc định ẩn đi khi không sử dụng trên thiết bị di động. Nhưng tôi cũng phải bổ sung một khoảng trắng trong thẻ span với class itemHide.

Đây là CSS cho .rwd-break. Nó mặc định được ẩn đi và chỉ xuất hiện trong phần hiển thị tự thích ứng, thay đổi bố cục chữ tiêu đề theo cách tôi muốn.

Nếu không có thẻ span khoảng trắng, phần nội dung văn bản không thể thay đổi thành canh giữa ngay ngắn.

Đơn giản hóa trang Meeting List (danh sách cuộc họp)

Khi tôi nghĩ về "mobile first" nhiều hơn, tôi nhận ra rằng người dùng trên điện thoại không cần tất cả chức năng trên trang của tôi. Họ không cần tất cả các tab, họ không cần bảng dữ liệu về cuộc họp và họ không cần tất cả các tùy chọn nút biểu tượng. Trên thực tế, đối với trang cuộc họp, họ chỉ cần có thể mở các cuộc họp (và có thể hủy các cuộc họp từ chính trang xem cuộc họp).

Tôi đã kết hợp các cột chủ đề và người tham gia vào một cột duy nhất theo chiều dọc và kết quả trông khá hơn nhiều.

Meeting Planner Responsive Web - Responsive Meeting List Meeting Planner Responsive Web - Responsive Meeting List Meeting Planner Responsive Web - Responsive Meeting List

Trong /frontend/views/meeting/index.php, tôi đã thêm .tabHide vào 2 trong số 4 tabs:

Và, trong /frontend/views/meeting/_grid.php, tôi đã bố trí cấu trúc cột lại để kết hợp chủ đề và người tham gia:

Việc ẩn đi ActionColumn đã cần đến một chút nghiên cứu, nhưng trông như thế này:

Cuối cùng, những thay đổi này đã đơn giản hóa giao diện cho máy để bàn trong quá trình cải thiện cho thiết bị di động.

Thách thức lớn: Meeting Scheduling (Lập lịch họp)

Meeting Planner Responsive Web - Existing When Times Planning FormMeeting Planner Responsive Web - Existing When Times Planning FormMeeting Planner Responsive Web - Existing When Times Planning Form

Cho đến nay, nhiệm vụ khó khăn nhất đối với tôi là điều chỉnh trang lên lịch cuộc họp ở trên cho thiết bị di động. Đó là một mớ hỗn độn trên điện thoại, và tôi thực sự bị ám ảnh. Một cách riêng biệt, tôi luôn lo lắng về việc tôi sẽ áp dụng giao diện này cho nhiều người tham gia trong tương lai như thế nào — các yêu cầu về tự thích ứng có thể khiến việc này trở nên khó khăn hơn.

Việc sử dụng tiện ích mở rộng Bootstrap Switch Widget của Kartik cho Yii có những hạn chế riêng khi bàn đến việc sửa đổi bố cục. Việc đặt các phần tử này trong các cột trong bảng hoạt động tốt, nhưng việc làm cho các cột bảng tự thích ứng không đơn giản với media queries.

Thật ra như tôi đã trình bày với trang Meetings list bên trên, việc ẩn đi các cột rất dễ, nhưng việc thay đổi vị trí không giống như thế.

Tôi bắt đầu bằng cách rời bỏ thiết kế bảng theo chiều ngang để hiển thị các tùy chọn thời gian và địa điểm và hướng tới một kiểu theo chiều dọc, thẳng đứng. Và, rất rõ ràng, các bảng và các cột có cách riêng chúng để bao bọc với HTML5 và CSS mà không cần có media queries.

Bạn có thể xem trang kế hoạch cuộc họp mới, đã cải tiến tại đây:

Meeting Planner Responsive Web - Responsive New Plan a Meeting FormMeeting Planner Responsive Web - Responsive New Plan a Meeting FormMeeting Planner Responsive Web - Responsive New Plan a Meeting Form

Mỗi view tách từng phần đã yêu cầu phần bổ sung css cho bố cục Bootstrap grid đã được xác định trước để cho phù hợp tốt, ví dụ như col-xs4 bên trái và bên phải col-xs-8. Đây là một ví dụ:

Làm cho các vị trí và các form lập biểu thời gian trở thành tự thích ứng là việc khó nhất. Tôi đã thử nghiệm và cuối cùng đã thành công trong việc sử dụng các cột bảng tự nhiên bao phủ khi cửa sổ chứ nội dung (hoặc thiết bị) co giãn.

Tôi cũng đã loại bỏ trạng thái của người tham gia hiển thị trong cột của mình bằng các nút thay đổi trạng thái bị vô hiệu — bạn không thể sử dụng chúng, vậy tại sao lại hiển thị chúng như những công tắc? Thay vào đó, tôi đã tạo một bản tóm tắt văn bản về trạng thái của những người tham gia của bạn cho địa điểm và thời gian. Đây là phần code cho getWhenStatus():

Dưới đây là kết quả trên máy tính để bàn — chú ý bố cục landscape của các hàng của văn bản và nút thay đổi trạng thái:

Meeting Planner Responsive Web - Desktop Layout of Times and Places FormMeeting Planner Responsive Web - Desktop Layout of Times and Places FormMeeting Planner Responsive Web - Desktop Layout of Times and Places Form

Và đây là phiên bản dành cho thiết bị di động, theo hướng portrait và được xếp chồng lên nhau mà không có media queries:

Meeting Planner Responsive Web - Final Responsive Meeting Planning FormMeeting Planner Responsive Web - Final Responsive Meeting Planning FormMeeting Planner Responsive Web - Final Responsive Meeting Planning Form

Ví dụ, đây là CSS cho cách tôi mã hóa các cột trong bảng trên bảng điều khiển Khi (thời gian):

Và đây là code cho form tách biệt này từ /frontend/views/meeting-time/_list.php:

Điều tốt nhất về những thay đổi này là chúng sẽ đơn giản những thách thức về thiết kế UX cho các cuộc họp trong tương lai với nhiều người tham gia. Bất kể số lượng người tham gia một cuộc họp, view về cơ bản sẽ giống như ở trên. Chủ yếu, việc này đã giải quyết được rào cản lớn nhất đối với tôi khi mở rộng đến nhiều cuộc họp của người tham gia — thiết kế UX.

Tiếp theo là gì?

Tôi hy vọng bạn thấy hứng thú khi theo dõi tôi xử lý phần thiết kế web tự thích ứng. Khi các thay đổi trực quan và mã nguồn cho trang web diễn ra cùng nhau, tôi cảm thấy vô cùng hài lòng và ấn tượng với mức độ CSS cần thiết rất ít. Được kết hợp cùng nhau, bạn có thể xem ở đây:

Những nỗ lực thiết kế trong tương lai của tôi sẽ bắt đầu, "Nó sẽ trông thế nào trên thiết bị di động?"

Như đã đề cập, tôi hiện đang làm việc chăm chỉ để chuẩn bị bản phát hành alpha của Meeting Planner. Tôi chủ yếu tập trung vào các cải tiến và tính năng chính giúp phát hành suôn sẻ bản alpha.

Bây giờ tôi đang theo dõi mọi thứ qua Asana, tôi sẽ viết về điều này trong một hướng dẫn khác; điều này cực kỳ hữu ích. Ngoài ra còn có một số tính năng mới thú vị đang trên lộ trình.

Tôi cũng bắt đầu tập trung hơn vào nỗ lực thu thập đầu tư sắp tới với Meeting Planner. Tôi chỉ mới bắt đầu thử nghiệm với WeFunder dựa trên việc triển khai của SEC's new crowdfunding rules. Xin vui lòng cân nhắc theo dõi hồ sơ của tôi. Tôi cũng sẽ viết về điều này trong một bài hướng dẫn trong tương lai.

Trong khi chờ đợi thêm nhiều bài viết hơn, hãy lên lịch cuộc họp đầu tiên của bạn (từ điện thoại của bạn!). Ngoài ra, tôi sẽ biết ơn nếu bạn chia sẻ kinh nghiệm qua phần bình luận bên dưới, và tôi luôn quan tâm đến các đề xuất của bạn. Bạn cũng có thể liên hệ trực tiếp với tôi trên Twitter @reifman. Bạn cũng có thể đăng chúng tại website hỗ trợ của Meeting Planner.

Xem các hướng dẫn sắp tới trong loạt bài Building Your Startup With PHP của bạn.

Những liên kết liên quan

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.