There have been many books written about website design, and I am not about to take on the challenge of disputing any of them or trying to explain every facet of design. In this short blog, I want to explain what I have come to understand as the modern layout of websites. The term “layout” may have many different definitions, but for this article I am talking about the basic structure of your website, meaning separation of concerns, data transfer from host to client, how to handle changes in data, and when to change your page structure.
Separation of Concerns
It is important when sitting down for the first time to build a website to come up with an outline. Start by making a list of the parts of your website and the functions of those parts. I always start at the base of my web structure and work from there. HTML is always the foundation of a website; it defines the structure and outlines how you will display your data – plain and simple. It doesn’t have to include data or styles, nor does it need to be dynamic … At its essence, it’s a static file that browsers can cache.
Client-side scripting languages like JavaScript will take care of client-side animations and data dispersal, while cascading style sheets (CSS) take care of style and presentation, and server-side scripting languages like PHP or Perl can take care of data retrieval and formatting.
Data Transfer
Where is your data going to come from, and what format it will be in when the client receives it? Try to use a data format that is the most compatible with your scripting languages. I use JavaScript as my primary client side scripting program, so I try to use JSON as my data format, but that’s not always possible when dealing with APIs and transferring data from remote computers. JSON is quickly becoming a standard data format, but XML* is the most widely accepted format.
I prefer to use REST APIs as much as possible, because they sends the information directly on the client, rather than using the server as a proxy. However, if a REST API is not available or if there is a security risk involved, you get the advantage of being able to format the data on the server before pushing it to the client. Try to parse and format data as little as possible on the client side of things, the client should be concerned with placing data.
Changes in Data
In the past, websites were made from multiple HTML documents, each one containing different data. The structure of the pages were the same though, so the data changed, but the code was nearly identical. Later, using server side scripting programs, websites became more dynamic, displaying different data based on variables passed in the URL. Now, using AJAX or script injection, we can load new data into a static webpage without reloading. This means less redundant code, less load on the client, and better overall performance.
Page Structure
It is important when displaying data to understand when to change the structure of the page. I start by creating a structure for my home page – it needs to be very open and unrestricting so I can add pictures and text to build the site. Once the overall loose structure is established, I create a structure for displaying products (this will be more restrictive, containing tables and ordering tools). The idea is to have as few HTML structures as possible, but if you find that your data doesn’t fit or if you spend a lot of time positioning your data, then it might be time to create a new structure.
The Impact of a Modern Layout
Following these steps will lead to quicker, more efficient websites. This is (of course) not a new subject, and further understanding of web layout can be found in Model-View-Controller frameworks. If you find that you spend too much time writing code to interface with databases or place data, then frameworks are for you.
-Kevin
*If you have to deal with XML, make sure to include JavaScript libraries that make it easier to parse, like JQuery.
- Lilah Brown's Planets, Part II (or, Season II preview) - November 8th, 2009 [November 8th, 2009]
- Snow White needs a bailout - November 8th, 2009 [November 8th, 2009]
- To the moon - November 8th, 2009 [November 8th, 2009]
- S/1 90482 (2005) needs your help - November 8th, 2009 [November 8th, 2009]
- We'll always have Regulus - November 8th, 2009 [November 8th, 2009]
- Orcus Porcus - November 8th, 2009 [November 8th, 2009]
- Kant's Crowded Universe - November 8th, 2009 [November 8th, 2009]
- Look up! - November 8th, 2009 [November 8th, 2009]
- Baby Pictures - November 8th, 2009 [November 8th, 2009]
- Encore: Yelping at Saints - November 8th, 2009 [November 8th, 2009]
- Godspeed - November 8th, 2009 [November 8th, 2009]
- Heavens above! - November 8th, 2009 [November 8th, 2009]
- Homeward bound - November 8th, 2009 [November 8th, 2009]
- Sony Pictures and the end of the world - November 8th, 2009 [November 8th, 2009]
- Thank you from the future - November 8th, 2009 [November 8th, 2009]
- Lunar dreams - November 8th, 2009 [November 8th, 2009]
- The first of the Pluto books! - November 8th, 2009 [November 8th, 2009]
- Don't try to blame it on Rio - November 8th, 2009 [November 8th, 2009]
- Rio roundup - November 8th, 2009 [November 8th, 2009]
- The long road to a Titan storm - November 8th, 2009 [November 8th, 2009]
- Planetary Placemats - November 8th, 2009 [November 8th, 2009]
- Fog! Titan! Titan Fog! (and a peer review experiment) - November 8th, 2009 [November 8th, 2009]
- Millard Canyon Memories - November 8th, 2009 [November 8th, 2009]
- The problem with science - November 8th, 2009 [November 8th, 2009]
- P.S. on the problem with science - November 8th, 2009 [November 8th, 2009]
- How Big is 10 TB? - November 8th, 2009 [November 8th, 2009]
- Showing You Your Servers - November 8th, 2009 [November 8th, 2009]
- Pick Your Partnership: Referral Partners, Resellers and Affiliates - November 8th, 2009 [November 8th, 2009]
- Server Form Factors: Towers v. Rack-Mounts - November 8th, 2009 [November 8th, 2009]
- Lights-Out in the Data Centers - November 8th, 2009 [November 8th, 2009]
- Disruptive Technologies: Virtualization and The Cloud - November 8th, 2009 [November 8th, 2009]
- Know Thy Backups – Part I - November 8th, 2009 [November 8th, 2009]
- Know Thy Backups – Part II - November 8th, 2009 [November 8th, 2009]
- Boo Bash 2009 – Desktop Costume Included! - November 8th, 2009 [November 8th, 2009]
- Why No One Will Talk About “Cloud Computing” in 10 Years - November 8th, 2009 [November 8th, 2009]
- The end of the fall - December 13th, 2009 [December 13th, 2009]
- We Love ‘Server Huggers’ - December 13th, 2009 [December 13th, 2009]
- All About the Cloud: An Interview with Dell’s Cloud Evangelist - December 13th, 2009 [December 13th, 2009]
- Happy Solstice - December 21st, 2009 [December 21st, 2009]
- A ghost of Christmas past - December 31st, 2009 [December 31st, 2009]
- Learning from a Blender - January 5th, 2010 [January 5th, 2010]
- Changing my world - January 6th, 2010 [January 6th, 2010]
- A Server. From Scratch. - January 7th, 2010 [January 7th, 2010]
- The Planet Sand Castle: Upgrade Your Sandbox - January 12th, 2010 [January 12th, 2010]
- Hosting for Haiti - January 20th, 2010 [January 20th, 2010]
- Redefining Value - January 26th, 2010 [January 26th, 2010]
- My Experience as a Newbie at The Planet - January 28th, 2010 [January 28th, 2010]
- Confessions of Another New Planeteer - February 1st, 2010 [February 1st, 2010]
- How I Learned to Stop Worrying and Love Permissions - February 11th, 2010 [February 11th, 2010]
- Where at The Planet is Rachel? - February 15th, 2010 [February 15th, 2010]
- The Planet Storage Cloud: FYI - February 19th, 2010 [February 19th, 2010]
- Meet us in March - February 25th, 2010 [February 25th, 2010]
- The Planet in “The Channel” - March 2nd, 2010 [March 2nd, 2010]
- The Planet Server Challenge - March 13th, 2010 [March 13th, 2010]
- The Definitive Guide to Finding The Planet at SXSW - March 13th, 2010 [March 13th, 2010]
- The SXSW Iron Geek Champion! - March 15th, 2010 [March 15th, 2010]
- Drinking from the Fire Hose - March 16th, 2010 [March 16th, 2010]
- The Fastest Hands at SXSW - March 17th, 2010 [March 17th, 2010]
- System.out.println(“Hello World!”); - March 22nd, 2010 [March 22nd, 2010]
- Westmere – Get it Here - March 23rd, 2010 [March 23rd, 2010]
- Orbit on Your iPhone: A Sign of Things to Come - March 24th, 2010 [March 24th, 2010]
- #ShowMeMyServer 2.0 - March 25th, 2010 [March 25th, 2010]
- Get to Know Your Visitors - March 30th, 2010 [March 30th, 2010]
- The Next Big Thing in Hosting: The Hostatulator - April 1st, 2010 [April 1st, 2010]
- Storage Cloud and the City - April 4th, 2010 [April 4th, 2010]
- American Heart – Why I Walk - April 7th, 2010 [April 7th, 2010]
- The Cake Shouldn’t Be a Lie - April 8th, 2010 [April 8th, 2010]
- April Showers Bring May Flowers - April 9th, 2010 [April 9th, 2010]
- First at The Planet: Nehalem EX 4-Socket Servers - April 15th, 2010 [April 15th, 2010]
- Intel Guest Blog: Xeon 5600 - April 16th, 2010 [April 16th, 2010]
- Inside the Office: A Birthday Surprise - April 18th, 2010 [April 18th, 2010]
- The Planet @ Cloud Expo East - April 19th, 2010 [April 19th, 2010]
- The Planet @ ad:tech SF - April 22nd, 2010 [April 22nd, 2010]
- ad:tech Server Challenge - April 22nd, 2010 [April 22nd, 2010]
- ad:tech Panel: Developing Communities Online - April 23rd, 2010 [April 23rd, 2010]
- The Planet @ Interop Las Vegas - April 27th, 2010 [April 27th, 2010]
- Overflowing With Value: 10TB is Back! - April 28th, 2010 [April 28th, 2010]
- The Cloud is NOT the Revolution - April 29th, 2010 [April 29th, 2010]
- The Importance of Orbit 2.0 - May 5th, 2010 [May 5th, 2010]
- The Planet @ Web 2.0 Expo - May 6th, 2010 [May 6th, 2010]