Responsive Web Design: What It Is and How To Use It(javascrpit)

Thảo luận trong 'Javascript và AJAX' bắt đầu bởi Gardener, 28/6/13.

Loading...
  1. Gardener

    Gardener Admin

    JAVASCRIPT

    Another method that can be used is JavaScript, especially as a back-up to devices that don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js.
    In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:
    Mã:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>[/SIZE]
     
    [SIZE=5]<script type="text/javascript">[/SIZE]
    [SIZE=5]    $(document).ready(function(){[/SIZE]
    [SIZE=5]        $(window).bind("resize", resizeWindow);[/SIZE]
    [SIZE=5]        function resizeWindow(e){[/SIZE]
    [SIZE=5]            var newWindowWidth = $(window).width();[/SIZE]
     
    [SIZE=5]            // If width width is below 600px, switch to the mobile stylesheet[/SIZE]
    [SIZE=5]            if(newWindowWidth < 600){                $("link[rel=stylesheet]").attr({href : "mobile.css"});                }            // Else if width is above 600px, switch to the large stylesheet            else if(newWindowWidth > 600){[/SIZE]
    [SIZE=5]                $("link[rel=stylesheet]").attr({href : "style.css"});[/SIZE]
    [SIZE=5]            }[/SIZE]
    [SIZE=5]        }[/SIZE]
    [SIZE=5]    });[/SIZE]
    [SIZE=5]</script>

    There are many solutions for pairing up JavaScript with CSS media queries. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with media queries, look at “Combining Media Queries and JavaScript.”
    Showing or Hiding Content

    It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit (reasonably well) as a screen gets smaller. It’s great that that’s possible, but making every piece of content from a large screen available on a smaller screen or mobile device isn’t always the best answer. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.
    [​IMG]
    Responsive Web design shouldn’t be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years!
    Mã:
    display: none;

    Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet (for bigger screens) that should be available only in mobile versions or on smaller devices. For example, as we hide major pieces of content, we could replace them with navigation to that content, or with a different navigation structure altogether.
    Note that we haven’t used visibility: hidden here; this just hides the content (although it is still there), whereas the display property gets rid of it altogether. For smaller devices, there is no need to keep the mark-up on the page — it just takes up resources and might even cause unnecessary scrolling or break the layout.
    [​IMG]
    Here is our mark-up:
    HTML:
    <p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>[/SIZE]
     
    [SIZE=5]<div id="content">[/SIZE]
    [SIZE=5]    <h2>Main Content</h2>[/SIZE]
    [SIZE=5]</div>[/SIZE]
     
    [SIZE=5]<div id="sidebar-left">[/SIZE]
    [SIZE=5]    <h2>A Left Sidebar</h2>[/SIZE]
     
    [SIZE=5]</div>[/SIZE]
     
    [SIZE=5]<div id="sidebar-right">[/SIZE]
    [SIZE=5]    <h2>A Right Sidebar</h2>[/SIZE]
    [SIZE=5]</div>

    In our default style sheet below, we have hidden the links to the sidebar content. Because our screen is large enough, we can display this content on page load.
    Here is the style.css (default) content:
    Mã:
    #content{[/SIZE]
    [SIZE=5]    width: 54%;[/SIZE]
    [SIZE=5]    float: left;[/SIZE]
    [SIZE=5]    margin-right: 3%;[/SIZE]
    [SIZE=5]}[/SIZE]
     
    [SIZE=5]#sidebar-left{[/SIZE]
    [SIZE=5]    width: 20%;[/SIZE]
    [SIZE=5]    float: left;[/SIZE]
    [SIZE=5]    margin-right: 3%;[/SIZE]
    [SIZE=5]}[/SIZE]
     
    [SIZE=5]#sidebar-right{[/SIZE]
    [SIZE=5]    width: 20%;[/SIZE]
    [SIZE=5]    float: left;[/SIZE]
    [SIZE=5]}[/SIZE]
    [SIZE=5].sidebar-nav{display: none;}

    Now, we hide the two sidebars (below) and show the links to these pieces of content. As an alternative, the links could call to JavaScript to just cancel out the display: none when clicked, and the sidebars could be realigned in the CSS to float below the content (or in another reasonable way).
    Here is the mobile.css (simpler) content:
    Mã:
    #content{[/SIZE]
    [SIZE=5]    width: 100%;[/SIZE]
    [SIZE=5]}[/SIZE]
     
    [SIZE=5]#sidebar-left{[/SIZE]
    [SIZE=5]    display: none;[/SIZE]
    [SIZE=5]}[/SIZE]
     
    [SIZE=5]#sidebar-right{[/SIZE]
    [SIZE=5]    display: none;[/SIZE]
    [SIZE=5]}[/SIZE]
    [SIZE=5].sidebar-nav{display: inline;}

    With the ability to easily show and hide content, rearrange layout elements and automatically resize images, form elements and more, a design can be transformed to fit a huge variety of screen sizes and device types. As the screen gets smaller, rearrange elements to fit mobile guidelines; for example, use a script or alternate style sheet to increase white space or to replace image navigation sources on mobile devices for better usability (icons would be more beneficial on smaller screens).
    Below are a couple of relevant resources:
    TOUCHSCREENS VS. CURSORS

    Touchscreens are becoming increasingly popular. Assuming that smaller devices are more likely to be given touchscreen functionality is easy, but don’t be so quick. Right now touchscreens are mainly on smaller devices, but many laptops and desktops on the market also have touchscreen capability. For example, the HP Touchsmart tm2t is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet.
    [​IMG]
    Touchscreens obviously come with different design guidelines than purely cursor-based interaction, and the two have different capabilities as well. Fortunately, making a design work for both doesn’t take a lot of effort. Touchscreens have no capability to display CSS hovers because there is no cursor; once the user touches the screen, they click. So, don’t rely on CSS hovers for link definition; they should be considered an additional feature only for cursor-based devices.
    Look at the article “Designing for Touchscreen” for more ideas. Many of the design suggestions in it are best for touchscreens, but they would not necessarily impair cursor-based usability either. For example, sub-navigation on the right side of the page would be more user-friendly for touchscreen users, because most people are right-handed; they would therefore not bump or brush the navigation accidentally when holding the device in their left hand. This would make no difference to cursor users, so we might as well follow the touchscreen design guideline in this instance. Many more guidelines of this kind can be drawn from touchscreen-based usability.
    source:coding.smashingmagazine.com
    Loading...

Chia sẻ trang này