Style Sheets
  Home arrow Style Sheets arrow Using the Golden Ratio in Liquid Web Page ...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Using the Golden Ratio in Liquid Web Page Designs
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 2 stars2 stars2 stars2 stars2 stars / 5
    2009-07-02

    Table of Contents:
  • Using the Golden Ratio in Liquid Web Page Designs
  • Review: using the golden ratio for a two-column web page layout
  • Using the golden proportion to build an elastic web page design
  • Including the previous CSS code in a basic (X)HTML document

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Using the Golden Ratio in Liquid Web Page Designs


    (Page 1 of 4 )

    At first glance, some basic principles of graphic design like the “Golden Proportion” and the “Rule of Thirds” seem to have nothing to do with web design. But the truth is that they can be perfectly applied when creating web page layouts to make them look more pleasant and harmonious to the human eye. If you wish to learn how to implement these two fundamental principles when building your own web sites, then keep reading. In this series of articles you’ll find an approachable guide to putting these concepts into practice with both fixed and elastic web page designs.

    And now that you’re aware of the topics to be covered by this group of tutorials, it’s time to summarize the contents of the previous article (the first one in this seven-part series). In that part of this series, I offered a brief introduction to the golden ratio, explaining what it is, and how it can be utilized for building truly appealing web page layouts.  

    Quite possibly, one of the most attractive aspects to applying the golden ratio in web design is that it only requires a basic notion of its meaning and historical origins, and practically nothing else. From that point on, even inexperienced designers can take advantage of its benefits by using a calculator or software that calculates this proportion for them. It’s that easy.  

    Now, returning to the topics treated in the previous tutorial, in that case I demonstrated how to apply the golden ratio to building a fixed web page layout composed of the classical header and footer sections, a side bar and finally a content area.  

    However, as the title of this article suggests, it’s possible to implement the golden ratio with liquid designs as well. In the next few lines I’m going to develop another practical example that will illustrate this process in a step-by-step fashion.  

    Does this sound good to you? Then jump forward and start learning how to use the divine proportion for creating elastic web page layouts! 

    More Style Sheets Articles
    More By Alejandro Gervasio


       · This second part of the series shows how to apply the Golden Proportion for building...
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 3 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek