Monday, September 17, 2012

Responsive Web Design | Latest Design Trend | Things to create mobile web

  1. Responsive Web Design : To create a responsive web design we need to kept few things in mind. I have mentioned those thing in my article below.

    i) Design Architecture : Found this informative Article on http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design where they point for creating media queries for different screen sizes. According to its article we need to write CSS on basis of 5 different screen sizes. These are 1000 larger then, 1000px,760px, 600px, 480px, and 320px.

    Screen Size
    HTML Architecture
    Larger then 1000px 3-column with fixed side header
    1000px to 760px 2-column with top header
    Below 760px single column layout

    It covers all types of machines used to browse the web. To full fill this approach we can use common pattern of design the web layout.


    ii) Meta Tag : Mobile browsers render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
      <meta name="viewport" content="width=device-width, initial-scale=1.0


    iii) Media Query : Web layout can appear to be restricted, sometimes unreadable on small mobile devices, and at other times too large on large wide screen displays. This is where media queries come in. Using this we can create different CSS attribute for specific class for different resolution. So they are still readable in small screen too.

    Media query comprises of a media type and one or many expressions to limit the scope of style sheets. Inside the media library, you can establish media queries such as "width," "height," or "color." With the help of the media queries, you can customize presentations to a specific range of output devices without actually changing the content.
    Below is example of writing media query.

      <link rel="stylesheet" media="(max-device-width: 320px)" ref="mobile.css" />
    <link rel="stylesheet"
    media="(min-width: 1600px)"
    href="widescreen.css" /



    iv) Relative Font Size : don't use font size in Pixels (px) as its is used for fixed. Instead of using pixels use em or %. Here is table of selecting font-size of EM equivalent to PX .
    Pixels EMs Percent Points
    6px 0.375em 37.5% 5pt
    7px 0.438em 43.8% 5pt
    8px 0.500em 50.0% 6pt
    9px 0.563em 56.3% 7pt
    10px 0.625em 62.5% 8pt
    11px 0.688em 68.8% 8pt
    12px 0.750em 75.0% 9pt
    13px 0.813em 81.3% 10pt
    14px 0.875em 87.5% 11pt
    15px 0.938em 93.8% 11pt
    16px 1.000em 100.0% 12pt
    17px 1.063em 106.3% 13pt
    18px 1.125em 112.5% 14pt
    19px 1.188em 118.8% 14pt
    20px 1.250em 125.0% 15pt
    21px 1.313em 131.3% 16pt
    22px 1.375em 137.5% 17pt
    23px 1.438em 143.8% 17pt
    24px 1.500em 150.0% 18pt


    v)
    Relative Padding / Margin / Line-Height / Width : As like Font-size we also avoid using Pixels for Padding / Margin / Line-Height / Width etc.. Use % instead of pixels for proportional space and gaping.


    vi) Word-Break Property : Don't forget to use word-Break CSS property. Because in small devices we have small screen to as a view area and if we need to give any URL or TEXT have no space and bigger length then device screen it will break out your design. So using word-Break property is safe side.
    Its a part of CSS3 which is not supported by all browsers but its good to be in practice. Here is example to use

    .break-word { word-wrap: break-word; }

    vii) Flexible images : You should practice setting the max-width 100%, which means that an image will never exceed the size of its containing element. You can also apply this rule to other forms of embedded media like videos.

1 comment:

Zinavo Tech said...

Now a days,a website is the fastest way to provide information about your business.
Web Design Company