responsive design mobile - Tổng hợp các bài viết về responsive design mobile

<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUl2VfyfawmolnfYo5z3IWkVJ7HRBAUTGRpHi1bF2WeQ8B84IUvKAiwfOSOaxS7J-O2OTF8DGxoRm5e2MItSEgRz40zXzGyfBk_mEnJXNccifz6S2hvZNNrps6vCCrNqHiVIVonLEhl2E/s1600/responsive3_zps1364ea29.jpg"><img border="0" height="577" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUl2VfyfawmolnfYo5z3IWkVJ7HRBAUTGRpHi1bF2WeQ8B84IUvKAiwfOSOaxS7J-O2OTF8DGxoRm5e2MItSEgRz40zXzGyfBk_mEnJXNccifz6S2hvZNNrps6vCCrNqHiVIVonLEhl2E/s1600/responsive3_zps1364ea29.jpg" width="640" /></a></div>
<br /><b>Không cần nói quá nhiều, thời kỳ Mobile đang là xu hướng của thời đại hiện nay. Và cũng vì lẽ đó mà Seo Mobile là một phần gắn liền không thể thiếu khi nhắc tới Mobile.</b><br /><br />Và thuật ngữ <b>Responsive web design</b> là thuật ngữ bạn không thể không tìm hiểu. Responsive web design mobile đã nhanh chóng trải qua thời kỳ được thích thú khám phá và bước vào giai đoạn phát triển với những tiêu chuẩn nhất định. Điều này cũng quan trọng như việc chuyển đổi từ thiết kế layout sang CSS.<br /><h2>
Responsive web design Mobile là gì?</h2>
Để biết một thiết kế website có thuộc dạng <b>responsive design</b> hay không chỉ cần mở một trình duyệt trên desktop và từ từ thu hẹp bề rộng trình duyệt lại. <b>Responsive</b> web sẽ tự động điều chỉnh giao diện sao cho vừa khít với bề rộng của trình duyệt, cho dù là hẹp như trên điện thoại. Dưới đây là giao diện của trang Think Vitamin trong nhiều kích thước màn hình khác nhau:<br /><br /><div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN8khSQvDR3Ok9xtvlxhCCfkqt78iDpZKJx7PFnInEjMYjTcIZQ3BR4XmKPxUBfnGvl1GlhnX_GPDwlA4HgBS418TP0Y93SgO1xgYmxfwRu8tAnFKNntyxpOB3svOKLcklhm-iJmpt69U/s1600/responsive-web-design-mobile.png"><img alt="Responsive Web Design là gì?" border="0" height="577" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN8khSQvDR3Ok9xtvlxhCCfkqt78iDpZKJx7PFnInEjMYjTcIZQ3BR4XmKPxUBfnGvl1GlhnX_GPDwlA4HgBS418TP0Y93SgO1xgYmxfwRu8tAnFKNntyxpOB3svOKLcklhm-iJmpt69U/s1600/responsive-web-design-mobile.png" title="" width="640" /></a></div>
<br /><div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL3zLxL_xaNQynWK38bPrD1EjNM27zRkxr1wrbzCx0Hwvh51XpbhAjSKS_1FqTFPk-0n0fNaezfj-ACmeYSsSTD5KuI3t2YZFr1FLD8OpK-6vqtnN3o0MbrZh4FSst45N72kobjAMF2E/s1600/responsive4_zps6b6fc2a2.jpg"><img alt="Responsive Web Design là gì?" border="0" height="577" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL3zLxL_xaNQynWK38bPrD1EjNM27zRkxr1wrbzCx0Hwvh51XpbhAjSKS_1FqTFPk-0n0fNaezfj-ACmeYSsSTD5KuI3t2YZFr1FLD8OpK-6vqtnN3o0MbrZh4FSst45N72kobjAMF2E/s1600/responsive4_zps6b6fc2a2.jpg" title="" width="640" /></a></div>
<br />Nói tới <b>responsive </b>design mobile không thể không nói tới người sáng lập ra nó, Ethan Marcotte với bài báo đáng chú ý về <b>responsive web design mobile</b>. Trong bài báo này, Ethan đề cập tới tất cả cả các ý tưởng chủ chốt hình thành nên responsive web design mobile. Đó không phải là một phần kỹ thuật nào cả, mà là một loạt các kỹ thuật và ý tưởng kết hợp với nhau.<br /><br />Thay vì trả lời câu hỏi <b>responsive design mobile</b> chính xác là gì, hãy quan tâm tới nó giải quyết được vấn đề gì. Ngày nay để lướt web, máy tính không còn là lựa chọn duy nhất nữa. iPhone và nhiều thiết bị tương tự ra đời, chỉ trong nháy mắt đã làm thay đổi hoàn toàn trải nghiệm lướt web trên di động.<br /><br />Sự thay đổi trong trình duyệt web khiến cho kỳ vọng của người dùng thay đổi; ai cũng muốn việc lướt web trên điện thoại cũng phải dễ dàng như trên màn hình máy tính. Để đáp ứng được điều này, cộng đồng thiết kế web bắt đầu sáng tạo nên phiên bản web dành cho điện thoại di động. Như vậy là bên cạnh phiên bản dành cho màn hình thông thường sẽ có một phiên bản khác dành riêng cho điện thoại.<br /><br />Cùng với sự phát triển của laptop, điện thoại, các thiết bị như máy tính bảng và netbook cũng ngày càng xuất hiện nhiều hơn với màn hình lớn, độ phân giải cao. Sẽ khá lãng phí nếu những người thiết kế web không tận dụng xu hướng này.<br /><br />Tóm lại, trước sự bùng nổ ngày càng đa dạng đủ loại kích thước và độ phân giải màn hình, responsive web design mobile hướng tới việc tạo ra phiên bản web đáp ứng nhu cầu cho từng đối tượng người dùng khác nhau.<div>
<br /><h2>
Tham khảo thiết kế Responsive:</h2>
Hiện nay để chạy theo Responsive tôi đã làm một số mẫu để các bạn tham khảo.<br />-Web bán hàng: <a href="http://www.mega-buy.vn/">http://www.mega-buy.vn</a><br />-Blogs bằng WP: <a href="http://blog.mega-buy.vn/">http://blog.mega-buy.vn</a><br />-Blogspot: <a href="http://phungdiep.blogspot.com/">http://phungdiep.blogspot.com</a><h2>
Điểm qua một số phần trong responsive web design mobile</h2>
<h3>
Fluid Grids</h3>
<br />Ý tưởng chủ đạo đầu tiên của responsive design là fluid grid. Trước đây, liquid layout (một dạng layout có thể tự động chỉnh sửa kích cỡ để vừa màn hình, tự động xoay ngang, dọc) không phổ biến bằng việc thiết kế các layout cố định bề rộng; các trang được thiết kế với số lượng pixel cố định và căn chính giữa trang. Tuy nhiên, với khối lượng đồ sộ đủ các loại kích thước màn hình như hiện nay, khó có thể bỏ qua lợi ích của liquid layout.<br /><br />Fluid grid tiến một bước xa hơn so với liquid layout truyền thống. Thay vì thiết kế một layout dựa trên pixel cố định hay giá trị phần trăm tùy ý, fluid grid được thiết kế kỹ càng hơn theo tỷ lệ. Theo cách này, khi một layout được thu gọn trên màn hình điện thoại hay trải rộng trên một màn hình lớn, tất cả mọi thành phần trong layout đều tự thay đổi kích thước để tương thích với nhau.<br /><br />Để tính được tỷ lệ cho thành phần của từng trang, cần phải chia các nhân tố mục tiêu theo từng bối cảnh. Hiện tại, cách tốt nhất để làm điều này là tạo ra một bản mockup chính xác trên phần mềm như Photoshop. Nhờ đó, có thể đo được các phần trong trang và chia cho bề rộng của toàn trang. Ví dụ, nếu layout có kích thước bề ngang là 960 pixel, và bề rộng của thành phần mục tiêu là 300 pixel thì giá trị phần trăm sẽ là 31,25%.<br /><br /><div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pfoGYD85fRIaMmcoIf5pYhPym_8MgEmR0ghDsp5nqXDUmiO3EYudaQLgM9pqt_F7Qk_dj-L_uIjZmwRFk9MD6QytQsvNazQmLtnLrxv7nhvjDDzmmgOlYp7om3uV0LZDhXB-s59BUUk/s1600/responsive5_zpsd7850852.png"><img alt="Responsive Web Design là gì?" border="0" height="511" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pfoGYD85fRIaMmcoIf5pYhPym_8MgEmR0ghDsp5nqXDUmiO3EYudaQLgM9pqt_F7Qk_dj-L_uIjZmwRFk9MD6QytQsvNazQmLtnLrxv7nhvjDDzmmgOlYp7om3uV0LZDhXB-s59BUUk/s1600/responsive5_zpsd7850852.png" title="" width="640" /></a></div>
<br /><div style="text-align: center;">
<i>Nếu kết quả ra số lẻ thì đừng làm tròn, hãy giữ nguyên vì với máy tính mọi con số cần phải giữ chính xác.</i></div>
<br />Fluid grid là một phần rất quan trọng khi tạo ra responsive design. Khi bề rộng của trình duyệt quá hẹp thì giao diện có thể bị bể. Ví dụ, layout ba cột không thích hợp cho màn hình nhỏ của điện thoại. Thật may vì responsive design có thể xử lý việc này bằng media queries.<br /><br /><h2>
Media Queries</h2>
<br />Phần thứ hai của responsive design mobile là CSS3 media queries – giúp website tự động thay đổi bố cục theo kích thước màn hình. Sử dụng một chuỗi media queries giúp làm việc tốt hơn với độ phân giải cao hơn. Các loại bề rộng (đây chỉ là những gợi ý) thường gặp là:<br />320px<br />480px<br />600px<br />768px<br />900px<br />1200px<br /><br />Nói một cách lý tưởng, một layout nên được điều chỉnh sao cho phù hợp hoàn hảo với mọi loại thiết bị, nhưng đôi khi bạn phải lựa chọn xem nên tập trung vào loại nào. Trên thực tế, loại giao diện nào được chọn để phát triển chính phải dựa trên các vấn đề về người sử dụng, thời gian, ngân sách… Càng trải rộng vào nhiều loại giao diện thì càng sẽ tốn nhiều thời gian hơn, do đó nên cẩn thận với việc bạn sẽ tiêu tốn công sức vào đâu.<br /><br /><div style="text-align: right;">
Theo Teamtreehouse</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>