Examples of responsive web design


 Following on from the previous post, here are some examples of responsive web design - animated so that you can see how the layout changes as the browser resizes.  These are all done using CSS3 media queries.

This first example shows how the left-hand column disappears under the main content as the page width shrinks.  The logo shifts from the usual top left to be centred and the main links align under this logo.
The images also scale all the way down to a 260 pixel width!




This second example keeps the extra right hand column down to 410 pixels and only at the small sizes does the logo pop and centre itself.





This following is an example of using media queries to take advantage of widescreen monitors all the way down to mobile widths. Notice how the main navigation goes from eight links down to four links and how the extra info is pruned away.





The final example shows how images are scaled and removed to simplify the layout.



You'll notice that all these four examples have set there media query points at different widths.  Resulting in style switching at different browser widths.

Comments

Post a Comment

Popular posts from this blog

PHP, MySQL, JavaScript & HTML5 All-in-One For Dummies

Image
PHP, javascript, and HTML5 are essential programming languages for creating dynamic websites that work with the MySQL database. PHP and MySQL provide a robust, easy-to-learn, open-source solution for creating superb e-commerce sites and content management. javascript and HTML5 add support for the most current multimedia effects. This one-stop guide gives you what you need to know about all four! Seven self-contained mini books cover web technologies, HTML5 and CSS3, PHP programming, MySQL databases, javascript, PHP with templates, and web applications.
Read more

3 Best Applications that Organize your Chat and Messaging Accounts

Image
Vast of Instant Messaging (IM) platforms are made available in the internet nowadays. It helps every users to easily exchange messages, multimedia or even real-time virtual interaction with each other through computers and other portable devices. These mode of communication are somewhat important for everyone in this modern society and this applications plays a very essential and effective role in our daily living. Some of us are just busy interacting with people in such a way of bringing everyone closer, business matters, family, friends and others. Facebook Messenger, WeChat, Skype, Google Hangouts and Slack are just a few to mention of this platforms, it offers similar services but with quite different features. One has to sign up with these IM applications to start communicating and most of this services are being offered free. As of these days, people do have multiple accounts in different platforms, interacting people from different sides for different matters. As for me, I ...
Read more

Japan Style: Architecture Interiors Design

Image
Enter the world of the stylish Japanese house, where every object in sight is a work of art. Japan Style introduces 20 special residences. With more than 200 color photographs, this book showcases the stunning beauty of old homes, and reveals how they are cared for by their owners. Traditional Japanese homes, with superbly crafted fine wood, great workmanship and seasonal interior arrangements, have an aesthetic of infinite simplicity. Unlike Japanese inns and historical buildings, the houses featured in this book are private property and are not open to public viewing. Japan Style offers a rare glimpse into the intimate world of the everyday Japanese and fascinating insight into the traditional architecture of Japan download link http://libgen.io/_ads/E7F3D5D3E376CB1E116D00AFC8E89AC4 .
Read more