Thực hành thiết kế một trang web đáp ứng đơn giản

Qua bài viết Responsive web design là gì? chắc các bạn cũng đã nắm bắt được phần nào về thiết kế đáp ứng cũng như những lợi ích vượt trội mà chúng đem lại. Vậy hãy cùng tôi làm thử một trang web đáp ứng đơn giản.

HTML

Tôi viết ví dụ này bằng HTML5 nên tôi sẽ sử dụng các yếu tố mới như header, footer... Tôi khuyên bạn nên đưa HTML5 shiv trong đó cho IE, sau đó dùng một tập tin reset.css để bắt đầu làm việc mới một trang trắng.

Vì vậy, tôi bắt đầu bằng một div toàn trang, một thẻ header cho title, tagline và navigation. Một khung nội dung chính dành cho các bài viết, một số blog gần đây, một sidebar, một khung thông tin và cuối cùng là footer. Không có gì đặc biệt ở đây, chỉ đơn giản là đặt cấu trúc trang bằng một số class CSS hữu ích.

<div id="wrapper">

  <header>

    <h1><a href="index.html">Site Title</a></h1>

    <h2>Tagline <span>&</span> Some clever comment about the company</h2>

    <nav>

      <a href="#">Home</a>

      <a href="#">About</a>

      <a href="#">Portfolio</a>

      <a href="#">Blog</a>

      <a href="#">Contact</a>

      <div class="clearfix"></div>

    </nav>   

    </header>

 

    <section id="main-content">

        <div id="featured">

            <h3>Featured Article :</h3>

            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> <a href="#">Continue Reading &rarr;</a></p>

        </div> <!-- END Featured -->

        <hr/>

        <div id="latest">

            <section class="left-col">

                <h3>Latest Articles :</h3><br/>

                <h4><a href="#">Blog 1</a></h4>

                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</a></p>

                <h4><a href="#">Blog 2</a></h4>

                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</a></p>

                <h4><a href="#">Blog 3</a></h4>

                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</a></p>

            </section> <!-- END Left Column -->

 

            <aside class="sidebar">

                <h4><a href="#">Archives</a></h4>

                <ul>

                    <li><a href="#">July 2010</a></li>

                    <li><a href="#">August 2010</a></li>

                    <li><a href="#">September 2010</a></li>

                </ul>

                <br/>

                <h4><a href="#">Categories</a></h4>

                <ul>

                    <li><a href="#">Articles</a></li>

                    <li><a href="#">Tutorials</a></li>

                    <li><a href="#">Roundups</a></li>

                </ul>

                <br/>

                <h4><a href="#">Social</a></h4>

                <ul>

                    <li><a href="#">Facebook</a></li>

                    <li><a href="#">Twitter</a></li>

                    <li><a href="#">RSS</a></li>

                    <li><a href="#">Google+</a></li>

                </ul>

            </aside>

        </div> <!-- END Latest -->

        <div class="clearfix"></div>

        <hr/>

        <div id="about">

            <h3>About</h3>

            <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.<br/><br/>

 

            Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

        </div>   

    </section>   

    <hr/>

    <footer>

        <p>&copy; 2011 - Responsive Website Template</p>

    </footer>    

 

</div> <!-- END Wrapper -->

Đây là trang mẫu của chúng ta khi chưa thiết lập style:

CSS Styling

Cấu trúc

Bạn sẽ thấy tôi vừa thêm các phông chữ serif Droid từ API Google Web Fonts vào thẻ head, giờ đến style cho phần body.

body { background: #F9F9F9; color: #222; font-family: 'Droid Serif', serif; font-size: 16px; }

Bây giờ chúng ta sẽ thiết lập cho div #wrapper, tôi sẽ đặt cho chiều rộng của nó bằng 90% kích thước cửa sổ trình duyệt, và cả chiều rộng tối đa mà chúng ta có thể xem trên máy tính để bàn.

MAIN STYLING

Chỉ là chỉnh sửa một chút  để trang web của chúng ta nhìn gọn gàng hơn. Trong phần giữa, tôi sẽ bố trí hai cột và nhớ rằng phẳi đặt giá trị của độ rộng là % để chúng có thể co dãn được.

h1 { font-size: 90px;

    font-family: 'Droid Serif', serif;

    line-height: 75px; padding: 10px;

    -webkit-transition-property: font-size;

    -moz-transition-property: font-size;

    transition-property: font-size;

    -webkit-transition-duration: 0.5s, 0.5s;

    -moz-transition-duration: 0.5s, 0.5s;

    transition-duration: 0.5s, 0.5s;

    -webkit-transition-timing function: linear, ease-in;

    -moz-transition-timing function: linear, ease-in;

    transition-timing function: linear, ease-in; 

}

h1 a:hover { text-decoration: none; color: #27B3CF; }

 

h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px;

    -webkit-transition-property: font-size;

    -moz-transition-property: font-size;

    transition-property: font-size;

    -webkit-transition-duration: 0.5s, 0.5s;

    -moz-transition-duration: 0.5s, 0.5s;

    transition-duration: 0.5s, 0.5s;

    -webkit-transition-timing function: linear, ease-in;

    -moz-transition-timing function: linear, ease-in;

    transition-timing function: linear, ease-in;

}

h3 { font-family: 'Droid Serif', serif; font-size: 30px; }

h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; }

h4 a { text-decoration: underline; }

h4 a:hover { text-decoration: none; }

 

nav { background: #222; padding: 0; margin: 10px 0;}

nav a { color: #F9F9F9; display: block; float: left; padding: 10px; }

nav a:visited { color: #f9f9f9; }

nav a:hover { text-decoration: none; background: #27B3CF; }

nav a:active { position: relative; top: 0; }

 

.left-col { width: 70%; float: left; }

.sidebar { width: 20%; float: right; margin-bottom: 10px;

    -webkit-transition-property: width;

    -moz-transition-property: width;

    transition-property: width;

    -webkit-transition-duration: 0.5s, 0.5s;

    -moz-transition-duration: 0.5s, 0.5s;

    transition-duration: 0.5s, 0.5s;

    -webkit-transition-timing function: linear, ease-in;

    -moz-transition-timing function: linear, ease-in;

    transition-timing function: linear, ease-in;

}

 

#featured { padding: 20px; }

#latest { padding: 20px; }

#about { padding: 20px; }

 

p { padding: 0 5px 0 5px; }

ul { list-style: none; }

ul li { margin: 0 5px; }

 

footer { padding: 5px; }   

Giờ trang web của chúng ta sẽ trông thế này:

MEDIA QUERIES

Tôi sẽ liên kết tập tin HTML tới một tập tin CSS mà chúng ta sẽ đặt tên là media-queries.css, đây là nơi chúng ta thiết lập kích thước cụ thể cho trình duyệt cũng như thay đổi kích thước của font chữ sao cho phù hợp, cuối cùng là thay đổi thiết kế 2 cột trở thành một cột.

@media screen and (max-width: 478px) {

    h1 { font-size: 70px; padding: 1px; }

    h2 { font-size: 13px; padding: 1px; }

    body { font-size: 13px; }

}

 

@media screen and (max-width: 740px) {

    .left-col { width: 100%; }

    .sidebar { width: 100%; }

}

 

img {

    max-width: 100%;

    height: auto;

    width: auto\9; /* ie8 */

}

iPhone View

Đây là kích thước bé nhất có thể của trang web ở trên IPhone.

Kết luận

Trên đây là một cách đơn giản để thiết kế một website đáp ứng. Còn rất nhiều phương pháp thực hiện khác nhau mà tôi sẽ trình bày vào những phần sau. Nhưng đây là cách đơn giản nhất để bạn bắt đầu thực hiện. Bạn nên thực hành ngay để hiểu rõ hơn về các tùy chỉnh và nắm bắt được những khái niệm cơ bản trong thiết kế đáp ứng. Nếu có bất kì thắc mắc và góp ý nào, hãy để lại dưới phần comment và chúng tôi sẽ cố gắng trả lời trong thời gian nhanh nhất.

Bài viết liên quan: Thiết kế web đáp ứng - Responsive vs. Adaptive