Web Developing on Mac OS X with Panic’s Coda

Out of Adobe’s undisputed Fab Four on any web designer’s desktop (Photoshop, Illustrator, Flash and Dreamweaver), the one specifically for HTML and CSS is probably the most threatened. Indeed, replacing any of the first three is almost an impossibility (see my post on GIMP’s attempt to overthrow Photoshop). Finding an alternative to Dreamweaver, however, has become more of a reality.

And why not? After all, when you’re cutting up the design, laying out the XHTML, and writing up the CSS on your framework of choice (see my reviews on the 960 GS, Blueprint CSS, or 1kb CSS Grid), you don’t need an application for rocket science. The main reason why many designers stick to Dreamweaver, as oppose to opting for any of the open-source alternatives, is because a) it tags along other essential Adobe products in a Creative Suite, and b) it boasts some neat features. However, it remains an over-priced product for a relatively simple task.

Panic Coda

In comes Coda: a web development application that brings everything you need in a single window (Mac OS X window, that is). Firstly, at $99, it’s not the priciest of applications, given that you develop websites professionally. More importantly however, it packs some top-notch features:

• Subversion integration that allows you to synchronize your files
• An emotionally touching FTP client built into the sidebar. Browse a remote server, click on the file you choose to edit, and save to instantly update the remote file. No need to use a separate FTP client, a text-editor, or endless hours
• Live collaboration. That’s right! Who would’ve thought that you’d be able to work on the same code with someone else at the same time (granted the other person bought his or her own copy of Coda)
• Live preview that is built into the application, but is actually using Safari. Unlike Dreamweaver, you are viewing the page in a full browser, but without actually changing windows
• Built-in terminal if you ever need (doesn’t get in the way if you don’t)

The most important aspect is that it’s sleek. The interface makes you feel very comfortable as you’re creating color-coded magic. Doing everything locally is a breeze, and then editing remotely on the fly saves a lot more time than running around your FTP client and temporary text editor. Its performance is also more impressive than its Adobe counterpart.

FTP on the left sidebar, colored code in main area

The biggest disadvantage must be in its price tag. Even if it is cheaper than Dreamweaver, thus making it the clear winner, it is still $100 more expensive than the second best open-source option. When the likes of Aptana Studio learn from Panic’s baby and step up their game, then no one will have to pay anything to live a proper web development experience. Until then, we’ll take the money out of our savings. My condolences to Adobe Dreamweaver, you were great, but now it’s time to move on.

Share this post:

How to Create a Centered UL with Blocks of LI Links

Whether you are working with a CMS or creating a static page (which is logically the step before your custom CMS theme), you are often left to ponder the best way to display a navigational menu or pagination links so that they are centered and in blocks of equal size. You’d be surprised how easy that is, this short tutorial is to get you to create a list that looks as such:

We want blocks of equal sizes, each linking to a given page (without a gap between the edge of the box and start of the link). And we want the code to be perfectly valid, of course.

First, we’ll start with the markup, which is a very basic unordered list:

<ul class="navigation">
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
</ul>

This alone results in a standard list with bullets and links. Now we need to add the CSS that will give us the look that we’re after:

ul.navigation{
	list-style: none;
	text-align: center;
}
ul.navigation li {
	display: inline;
	font-size: 14px;
	margin: 0 10px;
}
ul.navigation li a{
	background-color: #e5f27b;
	border: 1px solid #d9e383;
	color: #666666;
	display: inline-block;
	padding: 2px 8px;
	text-decoration: none;
	width : 75px;
}
ul.navigation li a:hover{
	background-color: #fe8a61;
	border-color: #d78466;
	color: #ffffff;
}

As you can see, it’s very straight-forward and you can easily customize it according to your needs. It’s useful for navigational menus, as well as pagination links to be displayed at the top or bottom of a given page.

Share this post:

El Koshary Today: Satirical News Website Built with Drupal

After months of hard work and creative time-wasting techniques, Egypt’s first online satirical news source is finally here. El Koshary Today is a website built with Drupal CMS that brings the latest fictitious stories from Egypt and around the globe.

El Koshary Today logo

It is built to be light-weight, simple yet sleek. The most important aspect of the website is the content itself, therefore, any unneeded elements would inevitably backfire as the audience are searching for a pleasant experience as they browse the dynamic content from the different subject areas.

Photo by Hossam el-Hamalawy

Inspired by Koshary, the main traditional dish that gains its popularity from it’s economical value, yet strong and engaging taste, the writers aim at springing off what is typically Egyptian and reaching out to the world. It is an approach to analyze and constructively criticize the difference aspects of the culture that gave birth to the revolutionary Koshary. You can read more at the Koshary Philosophy page.

EKT is built on the 960 Grid System framework that significantly facilitates the creation of a base/skeleton for your website. Using the traditional 12-column grid, the homepage is divided into three columns to display a lot of content, without sacrificing the simplicity of the layout and the usability aspect. The inner pages however, are two columns only (widening the right sidebar after removing the left one) to give more prominence to the main column with the article text, and to use the right sidebar to bring the the most read or any other promoted material.

Drupal was the ideal content management system for this particular project. On the one hand, using powerful modules such as Views (with the revolutionary Semantic Views) gives you complete control of where and how the content appears. One problem might be the lack of control as far as the unnecessary markup that is inevitably added to the code. Semantic Views significantly reduces the excessive code that gets in the way, and makes a substantial improvement to the arguably inefficient approach to templating in Drupal.

Drupal: Amazing CMS

Aside from the markup issue, and the naturally aggressive image caching that could be frustrating at times, getting Drupal to do exactly as required was a breeze. One of the most impressive features is the ability to specifically customize with the different users with different roles can see and do. As a result, the editors and contributors never come across any options they will not be using, and adding/maintaining the content is a fast and easy process, with no technical knowledge required. The ability to make revisions and leave comments associated with each revision, with the option of reverting to older version, is yet another fascinating functionality as part of the open source CMS.

El Koshary Today's interface

The result is a humorous website with fresh content displayed via an elegant interface using an efficient back-end built on an organized, cross-browser compatible framework. El Koshary Today is Egypt’s first satirical online news source, and it yet another example of the endless possibilities for the members of the web, thanks by large to the open-source technologies, and of course, the beautiful internet.

You can visit http://elkoshary.com, become a fan via the Facebook page, or follow on Twitter @elkoshary

Share this post:

1KB CSS Grid: Your Basic Framework

It has become evident that the best way to build a new website is to do it from scratch, and using proven frameworks. That saves you a lot of time and effort, and allows you to focus on the actual design of the website instead of having to worry about whether or not your layout is developed properly. I have previously discussed the 960 Grid System as an ideal CSS framework to build your website on, and while I still hold my stance towards it, I believe that in some cases, a solution such as the 1KB CSS Grid could be more appropriate.

1KB CSS Grid prides itself in its simplicity. You want to develop a relatively basic, straight-forward website, and do not feel it necessary to spend a significant amount of time setting up and building the foundations. With the 960 GS (or for that matter, the Bluprint CSS, which I have also talked about), you can construct a reliable foundation to your website. That includes a CSS reset to remove any default values that would cause inconsistencies between the different browsers, and another CSS file with all of the possible values of the columns, giving you complete freedom of using different-sized columns in any order you want. More importantly, with the 960 GS, you can download the Photoshop template, for example, and design your website with the exact coordinations of the columns in mind.

However, in many cases, you just want to build a simple website, without having to go through so many decision-making processes, and without investing an entire afternoon for features that you couldn’t care less about. For those of you working on quick and easy websites, 1KB CSS grid gives you the power to create the necessary CSS file in less than a minute, and start developing on top of that. No CSS reset, no limitless possibilities, just a light-weight file with the various column sizes that you are going to use.

The 1KB CSS Grid website

You won’t even need to enter the values. Just drag the indicators to your desired number, and you will see what the total width will be. The CSS file with the standard 960px values looks like this:

/* ================ */
/* = The 1Kb Grid = */
/* 12 columns, 60 pixels each, with 20 pixel gutter */
/* ================ */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}

It is recommended that you use a CSS reset, but if you’re doing something simplistic, the above code will work fine on its own. Creator Tyler Tate took into consideration the main values everyone’s after. At the end of the day, in many cases, particularly in this one, less is more. So if you are working on a relatively large project, start from scratch with the 960 GS, for everything else, there’s the 1KB CSS Grid.

Share this post:

DOCTYPEs And Validation

When developing a website it is crucial to do so in the cleanest, most standards’ compliant way. After spending sleepless nights getting your website to render properly on IE6 (which I hope will be dieing soon), the next major task on the list is to validate your CSS, as well as the markup. In most cases, having a clean, organized code that is valid goes hand-in-hand with proper browser rendering. However, before we go further, we need to know what exactly are the different DOCTYPEs, and which one we should be using.

DOCTYPE is short for Document Type Declaration and it is the very first element that appears in any web page (preceding the <HTML> tag), and it basically indicates to the browser how to look at your code. If you do not declare a DOCTYPE at the start of your document, browsers become confused and act differently. Therefore, regardless of how professional you want to go around doing this, a DOCTYPE is absolutely vital. You can read more about why you should use a DOCTYPE at the A List Apart website.

Having said that, you know need to make the decision of which of the various types are you going to stick to. The most important types are for HTML and XHTML, and on three levels: Frameset, Transitional and Strict. This is how the line of code looks like:

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

You can see the full list of DOCTYPEs at the W3C website.

Now you need to make the choice. If you are looking to become a professional web designer, then your goal is to stick to the XHTML 1.0 Strict DOCTYPE and produce valid CSS and code. This means your code is strictly organized and the syntax is perfect. However, this might be extremely difficult to reach at your first attempt. For that reason, you may want to use the Transitional, which is the same, but far looser and will let many little “errors” slip without making a big fuss about them. In all cases, you should not use the Frameset DOCTYPEs because we have successfully embarked the 21st century, and frames are a thing of the past.

You might want to start out with the XHTML Strict DOCTYPE and see how the validation goes. If your website is online, you can use the W3C Validation Service as you work to follow the errors that come up. If it’s not online, and you are developing from your local machine (via MAMP, for example, which I had talked about), you can use the Web Developer Firefox add-on (one of several that you should be using as a web designer) and click on Tools > Validate HTML. If you are getting 500 errors, that it might be too little too late. However, if you have 200, for example, you can work to fix them all. If that’s way too much work that you don’t think is worth the time, then you can go Transitional, and the error count should be significantly reduced, to eventually give you valid Transitional code.

Why Should I Validate My Code?

In theory, a proper DOCTYPE with validated CSS and XHTML will render properly across all browsers. However, since there are “browsers” such as Internet Explorer 6, a perfectly valid code could still lead to a perfectly disfunctional website. However, it will most probably render as you would want it to on the remaining browsers in the market. Over time, the issue with validation has moved from being essential for cross-browser compatibility, to being a prestigious title that is well worth striving for.

Therefore, as a professional web designer, you should put every effort into producing validated code to ensure that it is:

1. Future-proof: Any new browsers will properly render it
2. Cross-browser compatible: Will require less work to show up perfectly on all of the current browsers
3. Professional: Having the “valid CSS” and “valid XHTML” on your website are indications of the value of your work – something to be proud of

The good news is that the huge majority of frameworks and scripts that are used as the base of any website (I had previously talked about the 960 Grid System, as well as Blueprint as CSS frameworks) are developed with valid code to allow the most uptight of designers and developers to rely on them. So if you start developing your website by declaring the XHTML 1.0 Strict DOCTYPE, using the 960 GS, on your Mac using MAMP, you can use the Web Developer Firefox add-on to keep track of the validity of your code. That would hopefully result in a sleek, professional, CSS and XHTML-valid website!

Share this post:

The Ideal Footer Development

You can fool yourself into thinking that not all websites are created equal, and that you will design and develop one that expands beyonds the limits of the traditional two/three-column layout with a header and a footer. Sadly, though, the layout has become the victim of a rigid system used globally. Having said that, I wanted to talk about the development of the footer.

In many cases, the design of the homepage has just enough content to leave the footer sitting pretty at the bottom. However, there are always pages with fewer content, meaning there’s an awkward space beneath the footer (between the footer and the edge of the browser). This obviously needs to be taken care of, and in most cases, developers would place a minimum height on the main content div. That’s great, but that also means that visitors with a small screen size will have to scroll for the footer, even though there is no content – not the ideal solution.

That’s where CSS Sticky Footer comes in. IT is basically the XHTML and CSS solution to the problem. It prevents the footer from floating to the middle of the screen when there is not enough content, and at the same time, remains below the main content div when there is enough text and images to surpass the height of the browser window.

How to use it

Very simple, really. The markup looks as such:

<div id="wrap">
   <div id="main" class="clearfix">
      Main content goes here...
   </div>
</div>
<div id="footer">
   Footer content goes here..
</div>

After that the CSS will look like this:

* {
   margin:0;
   padding:0;
} 

html, body, #wrap {
   height: 100%;
   }

body #wrap {
   height: auto;
   min-height: 100%;
}

#main {
   padding-bottom: 150px;
}  /* must be same height as the footer */

#footer {
   position: relative;
   margin-top: -150px; /* negative value of footer height */
   height: 150px;
   clear:both;
} 

/* CLEAR FIX*/
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

.clearfix {
   display: inline-block;
}

Warning! The first class is there to get rid of the margins. If you are using a reset like the 960 Grid System, as you should, you will already have the reset classes laid out. That is because using the asterisk technique is not recommended at all – it takes longer to render, and doesn’t handle the reset comprehensively. For that reason, if you already have a reset, do not use that first class.

Do that, and you will have the idea footer development, regardless of the size of the content on the individual pages.

Share this post:

Blueprint: A CSS Framework

There has been a massive movement towards “frameworks” through the Web 2.0 territory.  It only seems logical as it facilitates the work of designers and developers, saving them a lot of time and effort. I had talked about the 960 Grid System in a previous post, and now I wanted to discuss a more comprehensive solution.

The Blueprint CSS framework

While PHP has produced numerous open-source frameworks to build your website on, few people (myself included) would’ve imagined that the a similar strategy would be adopted for CSS. For that reason, when I first heard about Blueprint, I was skeptical, but after looking into it, I would actually recommend it as a tool to be regularly used.

The website has very good documentation (it seems very uncommon nowadays, but for the first time in a while, I found a document that was straight, to-the-point, and informative). But basically, it reset the CSS, allows for a grid layout, sets standards for fonts and forms appearance. This means that it is an ideal starting point. All you have to do is go to the website, download the .zip file, call on the CSS files in your XHTML document, and start building.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
   <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->

The package comes with the following:

1. CSS reset: which resets all of the defaults, avoiding a lot of the browser compatibility issues you always come across
2. Grid: a default of 24 columns with 10px gutters to set up the division of the entire website
3. Typography: a set of attributes to set the standard for all types of texts, appearing properly across all browsers
4. Forms: saving you loads of time by creating the appropriate classes so that all of the forms appear properly

In all cases, the classes are over-ridden by your own. That’s why it’s ideal: is sets new defaults that look great and identical on browsers, but still allows you to shape everything as you normally would.

As for the grid layout, it works similarly to the 960 Grid System:

<div class="container">
    <div class="span-24">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        Main content
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
</div>

Blueprint also ships with a validator and compressor to make sure your CSS code is clean and light-weight (but you’ll need to have Ruby installed on your local machine for the tests to run, otherwise, you can use the Web Developer add-on for Firefox, or the W3C validtor when the site is on the Internet).

If you are developing a complex website with numerous diverse pages, Blueprint is a solution you should seriously consider: it takes everything into consideration, and saves you a lot of time and effort.

However, the downside of it is that it is bit complex. If you’re not going to take advantage of at least half  of its features, it might not be worth it. If you’re building a CMS-driven micro-site for example, than the 960 Grid System seems like the logical choice as it specializes in resetting, and laying out the grid.

Blueprint themselves put it very nicely when they said that it is not really a framework, it is more like a CSS tool box. Yet another beautiful product from the open-source community.

Share this post:

960 Grid System

When designing a new website, it is always important to be extremely organized and plan everything out from step one. That will avoid complications, and more importantly, help produce professional, sleek results.

The 960 Grid System is free CSS template that creates a 12-column style sheet. This allows you to organize the placements of the divs throughout your web page. The reason why it’s called 960, is because the majority of the websites created now are optimized for users on a 1024 x 768 screen resolution. Therefore, the maximum width would be 960 pixels.You can find examples of websites that are built on the 960 GS on the homepage.

If you are not going to stick to the standard 12-column template, you can always use the Custom CSS Generator available that will produce the file for you. Or you can just use the alternative 16-column style sheet, also freely available on the website.

One of the aspects I like most about the free service/tool, is the ability to download templates to incorporate while you’re in the design phase. Therefore, when you’re starting a new project, if you’re working with Photoshop, for example, you can download the .psd file that shows the columns, and base your design on that infrastructure. That way, when you get to the development phase, everything is a lot easier, and you’re website will be compatible with all modern browsers.

Along with the CSS file carrying the different-sized divs that you’re going to be working with, the 960 GS also includes a reset CSS file. If you haven’t been resetting your CSS when developing websites, that you should read this article to know why you should. But basically, resetting avoids a lot of browser incompatibility issues.

The downfall is that the CSS file holds a lot more classes than you’re going to be needing. But the easy way out is to erase all of the classes that you haven’t used after the initial code has been laid out. Realistically, however, you probably have more important things to worry about, than the few extra bytes produced by the style sheet.

After you’ve called on the CSS files, your markup will look something like this:

<div class="container_12">
   <div class="grid_7 prefix_1">
      <div class="grid_2 alpha">
            ...
      </div>
      <div class="grid_3">
            ...
      </div>
      <div class="grid_2 omega">
            ...
      </div>
   </div>
   <div class="grid_3 suffix_1">
        ...
   </div>
</div>

Overall, a great base for your websites, and a tool that we should all be using.

Share this post: