iTools: Building a System; Part 5 – Using CSS to Integrate Your Map Into the Site

On Thursday I discussed the loading of the data from the spreadsheet into a map. While the map is free, it is obviously limited. There are not nearly as many options for displaying data; not as many breakdowns beyond the state level; and just not the array of fancy colors and styles for the map. Despite this, we think the simplicity of the map is it’s best characteristic. After all, a company like Craigslist uses almost exclusively no styling and just simple links for its information. Why? Because the data is always the most important aspect – bells and whistles are nice, but do not fool people.

These extra items should be used sparingly, and only to help facilitate a better overall experience for the user — not simply because of the fact that you can do it. Websites should be clear, succinct, and easy to understand. When information is flying onto the screen randomly, and there is a lot of movement, it just causes a person to become frustrated – or even worse, annoyed. There is a beauty in restraint. Simplicity in style can be beautiful.

With that said, we decided to implement a few style enhancements on the page so that it looks like the rest of the site. This is accomplished by using CSS (Cascading Style Sheets). In the case of Grown in the City, it is powered by WordPress using a custom theme. The beauty of CSS is that the styling is completely independent of all other aspects of your website. For example, to change a style for a heading, you don’t have to go into every page to make the change. In the case of GitC, this would be hundreds of pages! You simply go into the stylesheet and set the font, size, color, and many more options for the heading and every part of your site that falls within the brackets will now be updated, automatically.

While this is a very simplistic example, it still is a pretty easy process that can be used for more detailed items. In our case we had the map. I wanted to give the map a heading that matches the sidebars of the website, do the same for the data that is displayed, and separate each piece of data. I also wanted to orderly align the data into columns.

The second nice aspect of CSS is that it provides tools to customize your layout. Now, some of you may know about HTML layout, and say “I’ll just create a table with rows and columns and put my data in there.” No! In my experience, HTML tables are a poor choice, except for one situation – to display data. Even in this case, I can make a pretty compelling argument that you can accomplish the same thing with “divs.” So why are divs better? The first reason is performance. Say you have a table with 40 rows and 10 columns. Your page will not complete loading until all 400 cells are drawn. In comparison, you could display all that data in 400 divs and the beauty is that they are all separate entities. This means that they will start drawing on the page immediately, so that the first 2 rows are already up on the page the moment the user enters the page, and the rest of the cells can catch up before the user even notices that the page isn’t quite done loading. The second reason is readability. This is important from a maintenance aspect, from a readability of code aspect, and also from a non-computer style browser standpoint. Lastly, the most important reason is the control you have with divs for the layout of a site.

Now, I can talk a good deal about how divs work, but I think the best way I’ve heard it described is when I was teaching it to John. After describing it in much detail, he said “oh, it is like building blocks?”

There are three ways to lay out a div. You can use absolute value, relative value, and float. I have been doing this CSS styling for a good number of sites now, and while absolute and relative can serve a good purpose for certain things, I am just a huge fan of float. Basically, you float a div to the left or right of the screen. You then can float another div or block and it will show up next to the current block, and then another, until it reaches the width of the page, and then will just go to the next line, automatically. Say you want only two items on a row, not three. Well then you would use a div with a special class, “clear”, that clears the current floating setting. This sets the location back to the beginning – much like hitting enter on a typewriter – so you can start adding more divs on the next line. The other beautiful part of a floated div is that it automatically adjusts its height depending on how much data you put in it. This helps make layout even simpler.

The three main layout items associated with a div, are the margin, padding, and the border. These all get involved in exactly how the div ends up appearing.

A really good resource for learning more about div layouts can be found here.

Two really good examples of where I used particular div styling is both on the map page and also on the splash page for the interactive maps. You can go to the Tools menu on your browser and select ‘View Source’ to see the actual div layouts that are used. The splash screen is a great example, because it is column based, there are two maps on the top row, and the next map goes on the row underneath. When we add another map, we will add another div, and the layout will be standardized.

I hope this week has provided insight into just how much thought went into producing the interactive, open source maps. If you’d like to implement a similar map on your website, you can use the tools described throughout this series. I’ll also be working on an eBook that takes you step by step through the process and includes more detailed graphics and instructions. Keep reading Grown in the City for more information about when it will be available. Finally, if you want to contact me with any questions or comments concerning the implementation of a map on your website, I can be reached at bob.m.wall@gmail.com

This post originally appeared on Grown In The City.

__________________________