Responsive Web Design với SEO

Standard

Trên thế giới nói chung và tại Vietnam nói riêng hiện có hai xu hướng thiết kế website nổi bật hơn hết là Flat Design (hay còn gọi là thiết kế phẳng) và Responsive Web Design (tạm dịch là thiết kế Web tự điều chỉnh). Trong đó Responsive Web Design đang là chủ đề nóng nhận được nhiều sự quan tâm trong thế giới online marketing thời gian gần đây.

Liệu rằng Responsive Web Design có làm nên một chuẩn công nghiệp mới? Ưu điểm của responsive web design có đủ che lấp nhược điểm của nó? Ảnh hưởng của responsive web design đến SEO như thế nào? Ta sẽ cùng tìm hiểu trong bài viết sau.

Nói Responsive Web Design (RWD) là tương lai của thế giới online marketing hoàn toàn không phải không có cơ sở khi lượng tiêu thụ thiết bị di động vẫn không ngừng tăng và được dự báo sẽ vẫn tiếp tục đà tăng trưởng trong thời gian tới. Việc sở hữu một chiếc smartphone hay tablet (máy tính bảng) giờ đây không còn quá khó khăn với người tiêu dùng đồng nghĩa với việc thời gian họ dành cho thiết bị di động cũng tăng theo. Từ góc nhìn của một chủ sở hữu website và một nhà marketing, ta nhận thấy trong đó một cơ hội mới để tiếp cận khách hàng thông qua “vật bất li thân” này của họ và công cụ hỗ trợ đắc lực nhất ta có chính là website.

Một website tốt phải đảm bảo cả hai yếu tố: usability và readability. RWD giúp ta hoàn thành trọn vẹn cả hai yếu tố quan trọng này vì thế nó cũng là mắt xích trọng yếu trong chiến lược tiếp cận khách hàng lấy UX (user experience – trải nghiệm người dùng) làm trọng điểm. Ta cùng nhìn vào cách RWD hoạt động như thế nào trong phần tiếp theo đây.

RWD hoạt động như thế nào?

Theo truyền thống, một trang web được đặt cố định vào một khung (kích thước) định sẵn, thường là 800px X 600px và được canh giữa màn hình. Với RWD, các thành phần của một trang web sẽ lựa chọn “thông minh” vị trí, kích thước cho chúng tùy vào độ rộng màn hình của trình duyệt và công việc đó được thực hiện thông qua các truy vấn media trong CSS.

Để dễ hình dung ta có ví dụ đơn giản như sau: Một lưới gồm 9 thành phần hình vuông được đánh dấu từ A->I. Với màn hình nhỏ như máy tính bảng hay các màn hình máy tính đời cũ thì các thành phần sẽ hiển thị theo dạng lưới 3 x 3 như sau:

Ví dụ về responsive web design

Khi màn hình lớn hơn thì chúng trải dài ra:

Ví dụ về responsive web design

Với màn hình nhỏ hơn, chúng xếp chồng thành hàng một:

Ví dụ về responsive web design

Trong thiết kế của mình, Microsoft chọn phương án giữ mọi thành phần của trang web có trên phiên bản desktop cho các thiết bị khác. Nhưng một trong những khác biệt lớn nhất giữa website cho desktop và website cho mobile chính là trên mobile trình duyệt bị giới hạn về bộ nhớ do đó sẽ không có đủ không gian lưu trữ khi gặp phải một trang web có quá nhiều nội dung trên đó. Để khắc phục nhược điểm này, các nhà phát triển web đề ra ý tưởng loại bớt một số thành phần khi kích thước màn hình trở nên nhỏ hơn. Ví dụ với tạp chí Smashing cho ta thấy rõ điều này:

Trước hết, đây là phiên bản trên desktop:

Ví dụ về responsive web design với Smashing Magazine

Ở trạng thái hiển thị đầy đủ, trang web bao gồm hai cột điều hướng bên tay trái, nội dung chính ở giữa, và bên tay phải dành cho khung tìm kiếm và quảng cáo. Nội dung chính được đặt vào giữa nhằm tận dụng độ rộng của màn hình.

Chuyển sang trên màn hình iPad 10”:

Ví dụ về responsive web design với Smashing Magazine trên iPad

Khi màn hình nhỏ hơn ở hai bên, Smashing Magazine vẫn giữ quảng cáo và khung tìm kiếm bên phải nhưng phần điều hướng được đưa lên trên top mà vẫn khéo léo giữ được tính thẫm mĩ, thu hút người dùng mà không tốn nhiều chỗ.

Tiếp theo là trên màn hình máy tính bảng 7″ như Kindle Fire:

Ví dụ về responsive web design với Smashing Magazine trên Kindle Fire

Phần quảng cáo phải bị hi sinh khi không gian trở nên “tấc đất tấc vàng”. Khung tìm kiếm được di dời lên top và một phần điều hướng được dời xuống, sang bên cạnh để đảm bảo nội dung không bị chèn quá sâu xuống dưới.

Và cuối cùng là trên smartphone:

Ví dụ về responsive web design với Smashing Magazine trên Mobile

Trên smartphone, quảng cáo vẫn biến mất, biểu tượng chia sẻ cũng không còn. Phần điều hướng được gộp thành một khung menu nhỏ xổ xuống nằm trên top. Khung tìm kiếm thay chỗ phần điều hướng ban đầu.

Như bạn thấy, RWD cho ta khả năng tùy biến giao diện web rất cao. Với một chút  sáng tạo, việc chuyển mọi thứ đã được tối ưu hóa trên PC lên mobile và những mức khác ở giữa trở thành một công việc dễ dàng hơn bao giờ hết.

Vì sao RWD tốt cho SEO

Responsive Web Design có ưu điểm là vậy. Nhưng điều đó giúp SEO như thế nào?

Usability

Google muốn đưa người dùng đến những website phù hợp với họ. Khi người dùng vào đến website của bạn và trở lại trang kết quả tìm kiếm ngay lập tức, Google cũng note ngay lại rằng website của bạn không là sự lựa chọn tốt nhất từ khóa đó.

Khi nội dung trên phiên bản mobile quá nghèo nàn hoặc phiên bản mobile trông quá khác so với trên PC thì rõ ràng bạn đang đánh đố người dùng, những return visitors, những người đã thấy một thứ gì đó thú vị trên phiên bản desktop nay lại phải thất vọng trở ra tay không. Còn trong trường hợp, bạn vẫn chưa có phiên bản web trên mobile thì bạn cần biết có đến 61% khách truy cập sẽ trở lại Google để tìm một website khác có hình thức dễ đọc hơn. Cách nào cũng khiến bạn lâm vào tình cảnh bounce rate tăng cao mà thứ hạng thì giảm. Với RWD, khách vào website sẽ có được mọi nội dung họ muốn, và theo format họ có thể đọc được.

Trùng lặp nội dung

RWD đảm bảo nội dung của website trên phiên bản PC và trên phiên bản mobile chỉ là một và do đó sẽ không bị Panda “tuýt còi”, tránh được rắc rối khi khách viếng thăm vào nhầm phiên bản website bạn mong muốn cũng như bạn không phải tốn công khắc phục sự cố trùng lặp nội dung.

Mặt hạn chế

RWD không phải là giải pháp hoàn hảo trong thế giới online marketing; vẫn còn đó một vài nhược điểm bạn cần xem xét trước khi quyết định bắt tay vào thực hiện.

Thời gian thiết lập

Việc chuyển đổi sang RWD sẽ mất khá nhiều thời gian cho cả nhóm thiết kế và nhóm phát triển website bởi họ sẽ phải học một khái niệm hoàn toàn mới trong thiết kế trước khi bắt tay vào thực hiện

Trang có nhiều nội dung

Nếu website phiên bản desktop có nhiều nội dung trong một trang điều đó đồng nghĩa với bấy nhiêu nội dung cũng sẽ được tải trên phiên bản moble. Hãy thử tưởng tượng một chiếc điện thoại cấu hình thấp phải tải hết những thứ này:

Đó là lí do vì sao những trang như NYTimes.com và CNN.com phải có phiên bản mobile riêng cho website, trong đó chỉ hiển thị một phần nhỏ những gì có trên phiên bản desktop. Nếu bạn có một website lớn tương tự như thế, thì việc tách chúng ra thành hai phiên bản là việc nên làm.

Trải nghiệm người dùng trên thiết bị di động

Vì RWD đảm bảo bạn có một website và nội dung tương tự nhau trên cả hai phiên bản desktop và mobile, nó có thể gây ra một số hạn chế nhất định đến trải nghiệm người dùng. Như đã nói ở trên, người dùng muốn thấy cùng một nội dung trên mobile và trên desktop nhưng khi họ tìm kiếm với những ngón tay trên một màn hình bé xíu thay vì một màn hình lớn với con chuột và bàn phím thì sự khác biệt cũng đã là đáng kể.

Vậy RWD có thích hợp với website của bạn?

Vậy câu hỏi đặt ra là RWD có thích hợp cho website của tôi? Nếu website của bạn khá lớn hay quá phức tạp, cần có một website riêng cho phiên bản mobile, thì có thể bạn cần xem xét lại (hay có thể bạn đã có một phiên bản website cho mobile hoạt động hiệu quả rồi thì không nên can thiệp vào nó nữa). Ngược lại nếu vẫn chưa có một website phiên bản mobile thì sao? Liệu RWD có đáng cho bạn áp dụng? Câu trả lời phần nào sẽ hé lộ với sự giúp đỡ của Google Analytics.

Tôi có cần một website phiên bản mobile?

Trong Google Analytics có phần gọi là Mobile Overview nằm trong Audience > Mobile. Nếu con số của mobile và tablet dưới 5% trong tổng lưu lượng truy cập thì có thể bạn không cần lo phải tạo một website cụ thể cho mobile (tuy nhiên thường thì con số này luôn cao hơn).

Theo báo cáo, bạn xác định xem lượt truy cập trên desktop có cao hơn đáng kể so với trên mobile? Nếu tỉ lệ chuyển đổi trên mobile thấp hơn một nữa so với tỉ lệ chuyển đổi trên desktop nghĩa là website đang hoạt động dưới chuẩn công nghiệp và bạn cần tối ưu lại website cho người dungfb truy cập trên mobile.

Website phiên bản mobile của tôi trông như thế nào trên các màn hình khác nhau?

Bạn vào Google Analytics > Standard Reports > Audience > Mobile > Devices và đổi tham số chính (primary dimension) thành “Screen Resolution” để xem báo cáo từ Google Analytics đưa ra. Với Screen Resolution, bạn có thể thay đổi các kích cỡ khác nhau để theo dõi khi click vào dấu xổ Other nằm bên phải primary dimention khác. Hãy thử với 10 độ phân giải được người dùng ưa dùng nhất. Nếu muốn biết rõ hơn website của bạn trông thế nào trên các thiết bị của họ thì công cụ Screenfly có thể giúp bạn thực hiện việc này. Ngay cả khi website trên mobile khả quan trên 50% lượng truy cập từ thiết bị di động, thì với 50% không tốt còn lại cũng đủ cho bạn cân nhắc đến RWD.

Website phiên bản mobile của tôi có mang lại những gì người dùng muốn?

Tỉ lệ bounce rate trên mobile sẽ cho ta biết điều này. Trong Google Analytics bạn truy cập vào Standard Reports > Mobile > Overview. Tỉ lệ bounce rate trên mobile tương đương với tỉ lệ bounce rate trên desktop sẽ là con số hợp lí trong trường hợp này.

Lời kết

Chuyển đổi sang responsive web design sẽ là một thử thách lớn, nhưng với hướng đi của ngành công nghiệp hiện nay, thì đây sẽ là sự chuẩn bị cho tương lai của bạn và tạo được ưu thế dẫn trước các đối thủ.

Bạn đã có những sự thay đối nào trong thiết kế website? Lời khuyên nào bạn có cho những ai chưa tiếp cận đến website trên mobile? Mời bạn cũng chia sẻ trong phần dưới đây và nếu thấy bài viết hữu ích, hãy làm tăng giá trị cho bài viết bằng cách chia sẻ với mọi người.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s