Nếu bỏ qua các ứng dụng di động trên platform trong quá khứ, bạn có thể gặp một số khó khăn khi hỗ trợ trình duyệt cho di động với những trang web hiện tại của mình. Có rất nhiều điều để học hỏi, cả triệu công nghệ để lựa chọn và vô số công việc mà có khả năng là bạn sẽ cần cho những dự án hiện tại của mình.
Một câu hỏi mà các designer và chủ website luôn muốn tìm hiểu là “Làm thế nào để tôi có thể thệm hỗ trợ điện thoại một cách nhanh chóng?” Đôi khi bạn không đủ ngân sách để bắt đầu lại từ đầu nhưng vẫn muốn có được phần tinh túy cho chiếc điện thoại. Hôm nay tôi sẽ giới thiệu 5 cách nhanh chóng giúp trang web của bạn trở nên thân thiện hơn với cấu hình của điện thoại.
Sử dụng Fluid Layout
Fluid layouts đã được sử dụng từ rất nhiều năm qua. Rất lâu trước khi nó được áp dụng vào thiết kế như chúng ta đã biết, rất nhiều web designer và developer đã sử dụng kỹ thuật này như giải pháp cho nhiều kích cỡ viewport khác nhau.
.someColumn {
width: 30%;
}
Thật dễ dàng khi tạo một fluid layout, tất cả những gì bạn cần làm là chọn chiều rộng theo tỷ lệ % trong CSS của bạn. Thay vì chọn cột với chiều rộng là 350px, bạn có thể tùy chỉnh thành 30%. Tùy chỉnh chiều rộng sẽ tự động chuyển kích thước của viewport thành con số và thiết lập chiều rộng thành 30%. Vì vậy nếu cửa sổ trình duyệt của bạn là 900px wide thì chiều rộng của cột sẽ là 270px.
Vậy làm thế nào để có kích thước viewport thật phù hợp. Bí quyết là bạn cần hiểu thuật toán cần thiết. Bạn có 100% kích thước, một layout 5 cột, bạn sẽ cần tùy chỉnh chiều rộng mỗi cột là 20% (20*5=100). Tuy nhiên điều này sẽ làm phần cột của bạn lấp đầy chiều rộng vốn có và không có không gian giữa các cột. Thường thì bạn sẽ muốn thêm vào một số margin và nó sẽ chiếm một phần của chiều rộng.
Bạn cần xác định mình muốn bao nhiêu margin cho mỗi cột, sau đó nhân với số lượng cột để có tổng %. Cuối cùng, bạn chia cột thành các phần như bạn muốn. Tôi thường dùng Instacalc để tìm các con số mình muốn.
Bạn có thể thấy tôi đã tùy chỉnh layout 5 cột với 4% margin trên mỗi cột (2% cho cột bên trái và 2% cho cột bên phải). Chỉ cần click vào hình ảnh ở trên và nhập giá trị, bạn sẽ có những con số mà bạn muốn.
4% lần margin để có 5 cột bằng nhau tương đương 20% cho chiều rộng của margin, 80% còn lại cho chiều rộng đã chia bằng 5 cột bằng nhau với chiều rộng mỗi cột là 16%.
Dù kích thước cửa sổ trình duyệt là bao nhiêu, tỷ lệ này vẫn sẽ được duy trì.
Thực hiện với Sass
Nếu bạn muốn thiết lập trong CSS thật dễ dàng, bạn có thể dùng Sass để tìm ra tỷ lệ phù hợp nhất. Mixin sẽ thực hiện tất cả những gì cần thiết, đơn giản là bạn chỉ cần điền số cột và margin cho mỗi cột.
@mixin columnFix($columns,$margin) {
$totalMargin: $columns * $margin;
$totalContent: 100 - $totalMargin;
width: $totalContent / $columns;
margin-left: $margin / 2;
margin-right: $margin / 2;
}
Để sử dụng mixin này, bạn chỉ cần thêm tên vào kế mixin và những thông số mà tôi đã đề cập. Đây là một ví dụ tự động phân chia margin 4% cho mỗi cột.
.column {
@include columnFix(4, 4%);
float: left;
}
CSS sẽ phân bổ chiều rộng 21% cho mỗi cột với 2% margin trái và phải. Kỹ thuật này cũng hữu ích như Sass và LESS.
.column {
width: 21%;
margin-left: 2%;
margin-right: 2%;
float: left;
}
Sử dụng framework
Nếu bạn thận trọng trong việc xây dựng fluid layout ngay từ đầu, có rất nhiều framework CSS có sẵn cho công việc của bạn. Hãy xem một số tùy chọn sau, có thể chúng sẽ giúp bạn có fluid layout thật đẹp.
- The 1140px CSS Grid System
- Fluid 960.gs
- Tiny Fluid Grid
- NegativeGrid
- Golden Grid System
- Fluid Baseline Grid
Cột truy vấn đơn
Lời khuyên của tôi để có một trang web thân thiện trên điện thoại là bạn phải đáp ứng thích nghi. Điều này cho phép bạn tạo một thiết kế duy nhất có thể phù hợp và thích nghi với các viewport khác nhau, đảm bảo trang web của bạn sẽ được hiển thị thật tốt trên bất kỳ thiết bị nào. Giải pháp này khá hữu ích và thực hiện đơn giản hơn những gì bạn tưởng tượng.
Nếu bạn vẫn gặp những thách thức khác nhau khi nỗ lực để có một thiết kế thật sự thích nghi. Bạn cần tiếp cận một cách mới trong thiết kế web và tối ưu hóa trang web của bạn bằng rất nhiều ý tưởng khác nhau.
Trên thực tế, bạn sẽ không có thời gian và ngân sách để tập trung đáp ứng mọi thứ. Thậm chí nếu bạn đang lên kế hoạch dài hạn cho thương hiệu, ít nhất hãy làm cho trang web của bạn thật phù hợp với những viewport nhỏ hơn.
Một giải pháp để trang web của bạn hiển thị tốt trong cột truy vấn đơn là hãy chọn 100% chiều rộng cho cột và khung chứa. Giảm kích thước cửa số trình duyệt và lưu ý phần lỗi, sau đó thêm những bước cơ bản để sửa nó:
@media only screen and (max-width : 700px),
only screen and (max-device-width : 700px) {
.container, .mainColumn, .footerColumn, {width: 100%; margin-left: 0;}
p {margin-bottom: 20px;}
img {max-width: 100%;}
}
Như những gì tôi đã thực hiện ở đây, bạn có thể sẽ phải điều chỉnh một số thông số khác ngoài việc thiết lập chiều rộng cột là 100% nhằm đảm bảo mọi thứ vẫn trông thật đẹp với layout mới. Sử dụng công nghệ này, layout mặc định sẽ hiển thị tất cả với màn hình lớn và sẽ trở thành một cột duy nhất khi viewport nhỏ hơn để phù hợp với thiết kế ban đầu (như ví dụ ở trên của chúng tôi là 700px).
Tôi đã chứng minh kỹ thuật này trong một bài viết khác với layout khá đơn giản. Bạn có thể xem thêm tại đây. Dưới đây là thiết kế ở kích thước lớn:
Trên các thiết bị nhỏ hơn, chúng tôi không bận tâm với những thay đổi nhưng thay vì chỉ đơn giản sử dụng đoạn code ở trên để tạo một cột nội dung.
Thêm các touch icon của Apple
Đây là một trung tâm iOS nhỏ nhưng nó không ảnh hưởng gì đến platform. Nó chỉ yêu cầu một nỗ lực tối thiểu để giúp website của bạn thích ứng hơn với màn hình trang chủ trên iPhone/iPad của người dùng (nó đặc biệt hữu ích cho ứng dụng web).
Safari trên iOS không chỉ cho phép người dùng bookmark một trang web theo cách truyền thống mà còn đặt nó vào icon trong grid màn hình trang chủ. Để đảm bảo icon mà Safari đã được định dạng là đúng, tốt nhất bạn có thể tạo icon riêng cho trang web của bạn.
Làm thế nào để thêm các icon
Hiện tại có 3 màn hình khác nhau thích ứng với các thiết bị của Apple: iPad, iPhone 4 và các iPhone đời trước. Kích thước 57px cho các iPhone cũ, 72 cho iPads (phiên bản 1 và 2) và 114 px cho iPhone 4 và loại mới hơn. Hãy nhớ rằng iPad 3 sẽ yêu cầu 144px icon nếu tin đồn tăng gấp đôi độ phân giải là đúng.
Đây là đoạn code mà bạn sẽ cần thêm vào cho phần đầu của file HTML.
Bạn có thể thêm màn hình khởi động cho ứng dụng web bằng phương pháp tương tự. Hãy xem tại đây để biết thêm thông tin.
Các hiệu ứng đặc biệt
Chúng ta đã qua phần kích thước cho mỗi hình ảnh nhưng bạn cũng nên lưu ý thêm. Mỗi icon mà bạn tạo sẽ vuông vức với góc 90 độ và không có shadow. iPhong sẽ tự động bo tròn góc cho thích hợp và áp dụng hiệu ứng đánh bóng mặc định.
Tip: Hãy thêm “precompased” cho tên tập tin để tạo hiệu ứng bóng. Ví dụ apple-touch-icon-precomposed.png.
Hiệu ứng di chuột
Đây là phần khá chung chung nhưng đôi khi tôi thường khuyến khích người bắt đầu nên cân nhắc khi thiết kế ứng dụng web cho mobile. Với thiết kế màn hình, tôi có xu hướng sử dụng hiệu ứng di chuột rộng và không thật sự đơn giản, trực quan và dùng để kích hoạt một số chức năng.
Hãy nghĩ đến cách chuyển đổi trên di động, platform touchsreen. Nó không còn là hiệu ứng di chuột đơn thuần. Bạn sẽ không cần gõ trên item, sẽ không cần dùng chuột. Vậy điều này có nghĩa là bạn sẽ không sử dụng hiệu ứng di chuột ư? Không hẳn như vậy, hãy nhớ rằng bạn cần có những chức năng thật hoàn hảo trên thiết bị di động.
Điều này không đòi hỏi bạn tốn quá nhiều công sức. Cuối cùng, tôi khuyến khích bạn nên thực hiện thử nghiệm bất cứ nơi nào có thể để cảm nhận được cách website của bạn hoạt động. Ví dụ, tôi đã viết tutorial việc tạo một navigation mở rộng có thể trượt hiệu ứng chuột. Tôi đã nghĩ menu sẽ là vi6 ích trên iOS cho đến khi không có bất kỳ hiệu ứng di chuột nào, nhưng trên iPhone và iPad, nó sẽ được tự động hiểu là cảm ứng, giúp menu hoàn hảo hơn.
Không ngừng nghĩ đến hiệu ứng di chuột bởi nó sẽ được chuyển đổi để phù hợp với platform điện thoại. Nếu không, hãy sử dụng phương tiện truy vấn truyền thông hoặc JavaScript để thay thế.
Sử dụng công nghệ điện thoại thân thiện
Web di động đã mang lại rất nhiều thách thức cho các designer và developer. Item chính là iOS đơn giản cho Flash nhưng nó không dừng lại ở đó. Trang web với đầy đủ plugin như Silverlight của Microsoft tương tự không thể install trên một vài platform điện thoại.
Giải thích cho điều này, hãy chắc chắc trang web của bạn không phụ thuộc vào các công nghệ để hoạt động. Nếu có, bạn phải kèm một phiên bản cho điện thoại. Ví dụ Youtube (trang web này trước đây chỉ là Flash) đã sử dụng HTML5 để có thể chạy tốt trên platform điện thoại.
Ngoài ra hãy chắc chắn tận dụng lợi thế của các thư viện có sẵn và cho phép bạn hỗ trợ cho platform điện thoại. Một ví dụ rất được yêu thích là JavaScript, HTML5 sẽ dựa vào toolkit được xây dựng trên jQuery và jQuert UI.
Kết luận
Rõ ràng, danh sách này không đầy đủ nhưng đó là bước khởi đầu để bạn có một trang web có thể thích ứng với bất kỳ platform nào. Một khi bạn đã nắm 5 kỹ thuật đơn giản này, tôi chắc chắn rằng bạn sẽ cảm giác tốt hơn khi tiếp cận với thiết kế ứng dụng di động cho platform trong một ngày không xa.
Hãy để lại comment bên dưới và cho chúng tôi biết bạn về những kỹ thuật này. Nếu tôi hỏi bạn về 5 cách nhanh chóng và dễ dàng để trang web của bạn trông thân thiện hơn với cấu hình điện thoại, bạn sẽ chọn gì?
