1Thiết kế giao diện web cho mobile là một công nghệ mà nhiều nhà thiết kế quan tâm. Bởi sự phát triển và sự thay đổi thuật toán của Google hướng đến tính thân thiện với các thiết bị di động. Điều này đã làm ảnh hưởng đến vị trí xếp hạng của nhiều website trên các trang tìm kiếm bằng thiết bị di động, và các nhà thiết kế web đã phải chuyển sang thiết kế giao diện thân thiện với các thiết bị di động smartphone để được Google đánh giá cao và nâng cao vị trí của website mình trên bảng xếp hạng. Hôm nay chúng tôi sẽ hướng dẫn cho các bạn cách thiết kế giao diện web cho mobile.
Hướng dẫn thiết kế giao diện web cho mobile với phần mềm Dreamweaver.
Dreamweaver là một công cụ hỗ trợ thiết kế giao diện web cho mobile hoặc thiết kế app mobile đơn giản và nhanh chóng được rất nhiều người ưu thích lựa chọn. Để bắt đầu thiết kế web mobile bằng Dreamweaver thì các bạn làm theo các bước sau :
Bước 1: Mở Dreamweaver : Bạn mở Dreamweaver , đi đến hộp New và mở cửa sổ” New document” bên trái bạn sẽ thấy tùy chọn ” page from sample” kích vào đó và sau đó chọn lần lượt theo thứ tự “mobile Starlers” và “jQuery Mobile (CDN)”.
Bước 2 : Tạo page : Bước này sau khi bạn mở ” jQuery Mobile” lên thì sẽ xuất hiện một trang tài liệu như sau :
Bước 3 : Tập trung vào code : Đây là bước tạo nội dung cho page của bạn. Ở góc phải bên trên của Dreamweaver bạn sẽ thấy các tùy chọn là “code, split, design và live”. Đây là những tùy chọn quan trọng để bạn tạo ra nội dung cho page. Để hiểu và tận dụng tốt các tùy chọn này đòi hỏi bạn phải biết về HTML hoặc CSS. Nếu bạn chưa biết gì về chúng thì bài viết sau có thể hỗ trợ cho bạn một lượng kiến thức bổ ích đấy : Tài liệu học làm web bằng HTML và CSS từ A-Z
Bước 4 : Chỉnh sửa header, nội dung , thanh menu và footer cho page.
Chỉnh sửa header : Phần (div data-role=”page” id=”page”) là phần mở đầu của mỗi trang. Mỗi trang được liên kết với một số, ‘div data-role=”page” id = “page2″‘ là trang thứ 2, ‘div data-role = “page” id = “page3″‘ là trang thứ 3 và ‘div data-role=”header”‘ là khu vực header và bạn có thể đặt thông tin header vào giữa hai thẻ “h1” và “/h1”
Chỉnh sửa nội dung, thanh menu : ‘div data-role=”Content”‘ là phần mở đầu cho nội dung.
Ví dụ, nếu trang hai là “About Us”, trang ba là “Service” và trang bốn là “Contact” thì bạn đặt như sau:
Chỉnh sửa footer : Bạn đưa nội dung vào phần text ” Page footer ”
Bước 5 : Xem lại trang sau khi hoàn thành :
Bạn chỉ cần nhấp chuột vào nút ” live ” ở khu vực “split view” bạn sẽ thấy được những gì mình thiết kế trên thiết bị di động.
Những điều cần thiết với Thiết kế Web cho thiết bị di động
Để thiết kế giao diện web cho mobile được hoàn hảo và thu hút bạn cần tham khảo video sau. Video sẽ cho các bạn biết những điều cần thiết với thiết kế web cho thiết bị di động.
Chúc các bạn thành công thiết kế giao diện web phù hợp cho mobile với những chia sẻ trên của chúng tôi.
