warning: more geekery/nerdiness about HTML, CSS and Content Management Systems in this article
I received at least one comment asking me to do more posts about web design.
Anyone who talks to me about web design for longer than 60 seconds will quickly discover that I don’t like Wordpress. Or more accurately, that I hate Wordpress with a fiery burning passion. Why is that? one wonders. Well, back in the early days of my design experience (around 2004 or 2005) with blog systems and content managers (or CMSes for Content Management Systems) I worked with a Wordpress site. I was eventually able with some effort to make it do what I wanted but it left a pretty bad taste in my mouth. The templating system assumes things, you have to work with the templates as pre-defined. This template is for the “header” this template is for the “sidebar” this template is for “content” and this template is for the “footer” and so on. Well what if my design fits awkwardly in that structure? What if for some reason I want to have a page completely free of that templating system altogether but still be able to pull certain things from the database? I flailed around with a few more Wordpress sites before I determined that there must be something better. So I began a search for a better CMS. For a couple years I never really found one, probably due to the fact that web design has never been my bread and butter, but something I do on the side.
Finally sometime in 2007, I was introduced to ExpressionEngine (EE). The designer of the site at the company I work for built it using EE. Shortly thereafter I built a site with EE and I LOVED it. It was sort of my “Eureka” moment.
So why do I love EE so much? Well, simply put, EE assumes nothing about your design. You create any templates you want, you write the HTML and CSS you want, you put it where you want, and you call what you want from the EE database. There is no pre-defined template structure. That may seem like a pain if you are caught up in the Wordpress world, but it is actually very freeing. When I design a site, I don’t worry about how to implement it within a templating system. It just doesn’t enter my mind. I’m free to focus on the design, HTML and CSS.
So let’s look at the basics of deploying an EE website. There are two basic components to EE design, and they are Templates and Channels. A Template accepts HTML and EE Template Tags. Templates exist in Template Groups. In order to make a template, you have to make a Template Group. The main Template Group on Apple User Pro is named “Site.” Every Template Group has a default template named “index,” and the first segment of a URL (the part after the base URL, in this case the base URL is “<a href="http://appleuserpro.com%E2%80%9D">http://appleuserpro.com”</a>) always refers to a Template Group (well, unless you are using the “pages module”). So when you type, “<a href="http://appleuserpro.com/site%E2%80%9D">http://appleuserpro.com/site”</a> that will load the “index” template of the Template Group “site.” So that’s Templates.
Now what are Channels. Channels can be almost anything you want. In the case of Apple User Pro, I have two primary Channels — “Article” and “Linked List” — and a “Page” channel (through which I publish my only page, the Colophon page, using the Pages Module). Channels can be customized in many ways, you can add custom fields, custom statuses for entires and so on. In the case of Apple User Pro, the Channels through which I publish my links and articles have 4 fields (fields are stored in “Field Groups” and I have the same field group assigned to both Channels):
<ol>
<li>
The Title field - this is a default field for all Channels you create
</li>
<li>
The URL Title (Permalink) field - this is again a default field for all channels, it auto populates as you type a title, but you can alter it to be custom too, or you can ignore it if it’s irrelevant to the type of data you will be using the channel for, of course in the case of a blog, URL Permalinks are important
</li>
<li>
Link URL field - This is a custom field. If I’m posting a “Linked List” item, this is where I put the URL to the item I’m linking to. I have this field hidden on my ”Article“ channel.
</li>
<li>
Body field - This is a custom field set to use <a href="http://daringfireball.net/projects/markdown/">Markdown</a>. It’s where I’m writing this article right now.
</li>
</ol>
Here’s a screen shot so you can get an idea of what I’m describing:
<a href="http://appleuserpro.com/assets/uploads/2011-11-15/apple-user-pro-channel-entry-revised.jpg"><img src="http://appleuserpro.com/assets/uploads/2011-11-15/apple-user-pro-channel-entry-revised-small.jpg" alt="apple-user-pro-channel-entry-small"></a>
click the image to see it full size
Alright, so with those two components, how do you build a site?
I typically start with Photoshop, mockup what I want, figure out how to turn that into HTML, and write my basic HTML. Then I put in the appropriate ExpressionEngine template tags, as in the case of this site, I figure out what parts of the template need to “loop” for the entires etc.
So let’s look at a basic implementation with just the entry body part of my template.
<pre><code>{exp:channel:entries channel="appleuserpro|linkedlist" orderby="date" sort="desc" limit="10"}
&#x3C;article>

 [if channel_id == "9"]&#x3C;h1>&#x3C;a href="/article/{url_title}">&#x26;diams; {title}&#x3C;/a>&#x3C;/h1>[/if]
 [if channel_id == "13"]&#x3C;h1>&#x3C;a href="{rss-link}">&#x26;rarr; {title}&#x3C;/a>&#x3C;/h1>[/if]
 &#x3C;div class="article-subtitle">{entry_date format=' %l, %F %j, %Y '}&#x3C;/div>

 &#x3C;div class="article-wrapper">

 {postcontent}

 &#x3C;div class="article-footer">

 &#x3C;div class="article-footer-item">&#x3C;strong>Categories:&#x3C;/strong> {categories backspace="8"}&#x3C;a href="/category/{category_url_title}">{category_name}&#x3C;/a> &#x26;bull; {/categories}&#x3C;/div>
 [if channel_id == "9"]&#x3C;div class="article-footer-item permalinks">&#x3C;a href="/article/{url_title}">Permalink&#x3C;/a>&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x3C;a href="http://aupro.us/s/{entry_id}">Short URL&#x3C;/a>&#x3C;/div>[/if]
 [if channel_id=="13"]&#x3C;div class="article-footer-item permalinks">&#x3C;a href="/linkedlist/{url_title}">Permalink&#x3C;/a>&#x26;nbsp;&#x26;nbsp;&#x26;nbsp;&#x3C;a href="http://aupro.us/s/{entry_id}">Short URL&#x3C;/a>&#x3C;/div>[/if]

 &#x3C;/div>

 &#x3C;/div>

&#x3C;/article>
{/exp:channel:entries}
</code></pre>
The brackets around the “if” statements are supposed to be curly braces, but ExpressionEngine won’t display them in Channel Entries. So if you do happen to try to use code like this in EE, just beware you should change the brackets to curly braces.
The items in curly braces are all ExpressionEngine tags, but what do they mean? Well in this case, I’m opening the Channel loop at the very start of my code there, and closing it at the bottom:
<pre><code>{exp:channel:entries channel="appleuserpro|linkedlist" orderby="date" sort="desc" limit="10"}

{/exp:channel:entries}
</code></pre>
Everything between the opening and closing of that tag will loop with each article. There are also pagination tags that I’m not including here for the sake of simplicity, but obviously with a limit of 10 you would need pagination.
So once I’ve opened the Channel loop, I can now use tags that refer to the Channel Fields. I think it’s fairly self explanatory except for perhaps the “if” statements. Since I’m using two channels for my primary content, I’m determining what to display based on the Channel. Basically, if the article is posted in the Linked List, the title will link to the item I’m linking to. If it’s posted in the Article Channel, it will be a permalink. Same principle applies in the post footer.
There are other ways to use Channels. As I said, a Channel can be used for almost anything you can think of. For instance, I’m using a channel on my Church’s website to post sermons. I use the title field for the title of the Sermon. And then I created custom fields for the name of the person preaching (usually our Pastor, but sometimes we have guest speakers), the passage being preached from, the name of the mp3 file on the server etc. I use EE’s Channel Categories for sermon series and the publish date for the date stamp of the sermon. And from that one Channel, I call the sermon entires on the <a href="http://heritagecenterville.org/sermons">sermon page</a>, the most recent sermon appears on the <a href="http://heritagecenterville.org">home page</a>, and of course the Podcast (just a special RSS feed) is powered from that Channel by an RSS template in EE.
There’s a lot more to it as you start to get into working with EE, but that’s the very basic idea of constructing a site in EE. You create your HTML, and call things from EE with the curly brace tags as you need them. There’s no silly template structure that you must work within. As far as I know, EE is the only CMS that works in this way and it is extremely flexible. So hopefully that explains a little bit of why I love EE so much. EE is extremely flexible and I think any HTML/CSS designer would learn to love EE pretty quickly once they begin using it.

Why ExpressionEngine

<img src="/assets/uploads/2011-11-12/appleuserpro-mobile.jpg" alt="appleuserpro-mobile">
(This article is going to be about HTML and CSS geekery so if you aren’t in to that sort of thing, feel free to pass.)
Since as a professional Apple User I use Apple devices to do HTML and CSS coding, and it is therefore of interest to me, I thought I would break down how I did the standard and mobile versions of this site.
The first thing of note is that I have kept this site’s design intentionally simple. I wanted something that looked nice, and that wasn’t cluttered.
The standard desktop version of this site is powered by HTML, CSS, and 4 template images:
<ul>
<li><a href="/assets/template_01.png">Image 1</a> — Header of the site</li>
<li><a href="/assets/template_02.png">Image 2</a> — Top of every article</li>
<li><a href="/assets/template_03.png">Image 3</a> — Article repeating background</li>
<li><a href="/assets/template_04.png">Image 4</a> — Footer for each article</li>
</ul>
This was my initial (re)design. I intended to do a mobile version, but did not get around to it until last night. In my desire to keep things extremely simple, I decided to see if I could use the exact same HTML and simply serve a different stylesheet to iPhones and iPods Touch. So I implemented PHP code detection in the <code>&#x3C;head></code> section to determine whether to serve the standard CSS or the iPhone CSS like so:
<pre><code>$iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPhone”);
$ipod = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPod”);

if ($iphone||$ipod == true) { echo ‘
&#x3C;meta name=”viewport” content=”width=652, user-scalable=yes” />
&#x3C;meta name=”apple-mobile-web-app-capable” content=”yes” />
&#x3C;link rel=”stylesheet” href=”/styles/iphone” />’; }

else { echo ‘&#x3C;link rel=”stylesheet” href=”/styles/index” />’; }
</code></pre>
You can see I set the width of the site to serve to iPhone to be 652 Pixels wide. This allowed me to incorporate the same width of my articles on the desktop version of the site (580, important for images I include in articles to fit properly) and have room for the template design. So those 4 template images become:
<ul>
<li><a href="/assets/template-iphone_01.png">Image 1</a> — Header of the site</li>
<li><a href="/assets/template-iphone_02.png">Image 2</a> — Top of every article</li>
<li><a href="/assets/template-iphone_03.png">Image 3</a> — Article repeating background</li>
<li><a href="/assets/template-iphone_04.png">Image 4</a> — Footer for each article</li>
</ul>
Now how do I deal with the two column format that my articles are in on the standard desktop version (the main content on the left side, and the meta information and permalink on the right)? I’m serving the same HTML so how do I adjust it to work for iPhone? iPhones are longer than wide so left/right column division isn’t great. Well those two columns (<code>&#x3C;div></code>s) are simply floats as specified by the CSS like so:
<pre><code>.entry-block {background-repeat: repeat-y; background-image: url(/assets/template_03.png); width: 900px; overflow: auto}

.entry-main {width: 900px; background-repeat: no-repeat; background-image: url(/assets/template_02.png); overflow: auto}

.entry-right-column {margin-right: 38px; margin-top: 24px; float: right; width: 210px;}

.entry-left-column {margin-top: 24px; margin-left: 38px; width: 580px; float: left;}
</code></pre>
So, a little tweaking of the CSS for those elements in the iPhone version should do the trick to make them stack instead. Like so:
<pre><code>.entry-block {background-repeat: repeat-y; background-image: url(/assets/template-iphone_03.png); width: 652px; overflow: hidden}

.entry-main {width: 652px; background-repeat: no-repeat; background-image: url(/assets/template-iphone_02.png); overflow: hidden}

.entry-right-column { padding-bottom: 20px; margin-bottom: -1px; margin-top: 10px; padding-left: 26px; padding-top: 12px; border-top-style: solid; border-top-width: 1px; margin-left: 38px; width: 550px;}

.entry-left-column { margin-bottom: -1px; padding-bottom: 10px; margin-left: 38px; margin-top: 24px; width: 570px;}
</code></pre>
And that’s basically it. Of course I adjusted font sizes for iPhone and tweaked some things here and there. For a detailed comparison of the two stylesheets, you can find them here (please note the simplicity, and I think elegance of these stylesheets. I think they are the best I’ve done so far):
<ul>
<li><a href="/styles/index">Standard Desktop Version</a></li>
<li><a href="/styles/iphone">iPhone Version</a></li>
</ul>
And here’s the basic stripped down HTML template (Again, I’m pretty proud of the simplicity and elegance):
<ul>
<li><a href="/assets/uploads/2011-11-12/basic-html-template.txt">Basic HTML Template</a></li>
</ul>

Posts tagged “HTML/CSS” from the blog