March 11, 2015

Posted by: Brian

Categories:

New to Responsive Website Design? 5 Keys For Success

       The future is faster. Technology and devices are empowering customers while also expediting content for businesses and their websites whether it is for e-commerce or brand exposure. Company profiles are important assets and customers are on the go. If you are new to responsive web design, then this is for you. Mobile traffic has skyrocketed 125% since 2012 but with only 1/3 of conversion tracked.

 

1)   Simplify and Manipulate a Fluid Layout                                                                       

Keeping your HTML layout simple with no stylized CSS (Cascading Style Sheets) benefits your usability. Think like a customer for clickable menus. Scrap anything redundant.  

 

The browser wants the home page to model a replica of a desktop view, so don’t forget to include the viewport in the meta tag.  (example is content= “width=device-width”>)

                                                       

Organized content also needs a solid frame but with flexibility. Relative width rather than fixed width orients adaptable usage.

 

Check out certain sites for this:             Gridsetapp.com, Columnal.com, Goldengridsystem.com

 

2)   Using Media Queries allow your website content to embrace the screen resolution based on device. You’ll take on style rules alongside regular CSS rules. An example would be @media screen. 

-For LANDSCAPE, use @media screen (min-width: 600px) and (orientation: landscape)

-For Portrait, use @media screen and (max-width 380px) and (orientation: portait)

 

3)   Defining Breakpoints                                                                                                                                        

These are measuring tools for best quality resolution matching a specific device. Capitalizing on essential ones for your best may be a good return on investment for your audience, because not everybody uses the same phone!

 

By entering <480px for first generation smart phones, <768px for high end smartphones and portrait presentation of iPads, and <768px for bigger stylesheets on desktops. Setting a <320px would be useful for audiences with low resolution smartphones.

 

4)   Tame Images and Sizing

Regarding measuring the use of your pictures, breakpoints go hand in hand with pictures. Commonly, you adapt the width: 

 

For 100% width, type in img { width: 100%; } and for 100% width, capped to file size type in img { max-width 100% ; }.

 

Highly recommended to monitor what is used for maximum or minimum for properly having boundaries and proportions for images that come up on specific devices.

 

5)   Designate One Column (Low Resolution Style Sheets)                                             

If you know a page will be formatted on a low resolution style sheet, replace width of each column to this:  

Width  - > 100% . Continue to scrap any pieces that are redundant and slow down any navigation for browsers. 

 

 

Source

http://www.downgraf.com/inspiration/basic-tips-about-responsive-design/

Tell us what you think!