The Tale of a Designer/Developer
textpattern
May 8, 01:46 PM
After I pulled my previous template, this blog's visits sunk to a rock bottom. It was simply because I eliminated many of the SEO enhancements from the site. Today I attempted to boost visits by re-establishing those elements.
I re-added the tiered category list to the left, increasing the weight of commonly used keywords and tags. To the right, I added something new - a list of all entries. This will further strengthen my search engine visibility by repeating pertinent keywords and phrases.
Just before I disposed of my previous template, I was averaging about 25 unique viewers a day. Since then it's been about 1 per day.
One thing that contributed greatly to the spike in visitors was my "image replacement technique", which sounds a lot more sophisticated than it really is. I, to this day, cannot get sifr (or lightbox for that matter) to work in Txp. I had a static image that read 'Katie O'Connor:design'. To get the impact of the <h1>, without one, I created one and hid it -9999px to the left. I would call that 'ghetto' mark-up. Not only did it say 'Katie O'Connor:design', it said 'Katie O'Connor Web Designer and Developer. Chicago, Illinois.' The next week or so after I added that, I got outrageous hits.
Another 'ghetto' thing that contributed to my massive amount of traffic was that every page on this site had an extra blog article list (every complete article I've published) appended to the bottom of it. That is dozens more instances of every piece of content I've created. That upped the weight astronomically. It looked stupid, like I didn't know how to program, but the attention was exciting.
Good programming can lead to more opportunities and dignity, leading to something more gratifying than attention or capitalism. I am proud of the cleaness and perfection that I have going on right now. It is the Zen of the web, although boring (and somewhat ugly, no offense Txp).
— Katie O'Connor
web design, textpattern
Aug 31, 07:47 PM
My newest ‘client’:
Pro bono job for my good friend, Matt, who has traditional drawing and painting ability oozing out of from his bespectacled skull. His work is so obviously unique and powerful that it needs a home on the web. Since he is the visual genius, I wanted him to design the presentation as much as possible. He drew some boxes on a napkin and created the layout you see above. He also indicated that he loved purple and leopard print. I thought Helvetica was ulitarian and attractive, but I recall him prefering Old English styles. Maybe I should font-replace it up!
Soon I need to meet with the artist again so we can work on structuring the navigation. Throughout his career, Matt has traversed different movements and styles, and need to be organized accordingly. I am very pumped about this project!
— Katie O'Connor
geer, web design
Jun 27, 02:03 PM
This simple jQuery navigation example makes use of two of my favorite functions that play oh-so-nice together, index() and each(). With these, there is no need to specify anything. Simply add buttons and corresponding content in the HTML and the iterators match content by comparing indexes. Let me explain...
Step 1: Create HTML Page
The first step is creating the structure of your content. Order is everything in this example. Below I have recreated a common navigational metaphor: button represents content to be displayed.
1 <html>
2 <head>
3 <title>Simple jQuery Navigation</title>
4 </head>
5 <body>
6 <div id="container">
7 <div id="button-group">
8 <div class="button selected">
9 <div class="button-num selected">1</div>
10 </div>
11 <div class="button">
12 <div class="button-num">2</div>
13 </div>
14 <div class="button">
15 <div class="button-num">3</div>
16 </div>
17 <div class="button">
18 <div class="button-num">4</div>
19 </div>
20 <div class="button last">
21 <div class="button-num">5</div>
22 </div>
23 </div>
24 <div id="content">
25 <div class="page"><div class="page-num">1</div><p>Lorem ipsum dolor ...</p></div>
26 <div class="page"><div class="page-num">2</div><p>Sed interdum pharetra ... </p></div>
27 <div class="page"><div class="page-num">3</div><p>Cras dui elit...</p></div>
28 <div class="page"><div class="page-num">4</div><p>Duis nec dui augue...</p></div>
29 <div class="page"><div class="page-num">5</div><p>Cras rhoncus...</p></div>
30 </div>
31 </div>
32 </div>
33 </body>
34 </html>
But what is the point of a button if all the content is shown anyway?
Step 2: Add jQuery
Now we can add code to show and hide the appropriate content, while giving addition visual cues to enhance usability. First, the jQuery library must be included in some manner.
1 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Create a document ready function so to execute our functions on page load.
1 <script type="text/javascript">
2 $(document).ready(function(){
3
4 });
5 </script>
Start by hiding all the 'page' divs, and then slideDown() the 1st child.
1 $(document).ready(function(){
2
3 $("div.page").hide();
4 $("div.page").eq(0).slideDown();
5
6 });
Now add a click() event to all the "button" divs. This will control the rest of the behavior in this concept.
1 $("div.button").click(function() {
2
3 $('div.button').each(function() {
4 $(this).removeClass("selected").children().removeClass("selected");
5
6 });
7 $('div.page').each(function() {
8 $(this).hide();
9
10 });
11 });
— Katie O'Connor
xhtml/css, jquery
Jun 7, 11:11 PM
Sad, but true, I feel that I have graduated from the limitations of Txp. Maybe if I was a more creative developer I could do better with it. Results and inspirations have dwindle. Don't worry articles, I just might port some of you worthy ones over.
I must say with my recent experiences with WordPress I am loving a lot of things, especially templates. I search keywords like 'minimal' and browse, I utilize templates that suit my needs and than modify them accordingly. Fun!
My most recent Wordpress project is
Wardrobe Database. This should be really cool and enjoyable for me. I just need to continue to photograph my clothes.
I am very interested in adding more custom fields to my items and using Php to get data from them, like lists of items by a specific brand. The categories are strictly for defining purpose of article, like top or bottom, than branching into broad physical description, like cropped or jeans. At Ann Taylor I experience first hand the system of organizing stock by IDs and codes, generalities and then specifics. It all makes sense to me. You just wait.
(This design is wicked ugly. What was I thinking?)
— Katie O'Connor
web sites, wordpress
May 8, 01:46 PM
After I pulled my previous template, this blog's visits sunk to a rock bottom. It was simply because I eliminated many of the SEO enhancements from the site. Today I attempted to boost visits by re-establishing those elements.
I re-added the tiered category list to the left, increasing the weight of commonly used keywords and tags. To the right, I added something new - a list of all entries. This will further strengthen my search engine visibility by repeating pertinent keywords and phrases.
Just before I disposed of my previous template, I was averaging about 25 unique viewers a day. Since then it's been about 1 per day.
One thing that contributed greatly to the spike in visitors was my "image replacement technique", which sounds a lot more sophisticated than it really is. I, to this day, cannot get sifr (or lightbox for that matter) to work in Txp. I had a static image that read 'Katie O'Connor:design'. To get the impact of the <h1>, without one, I created one and hid it -9999px to the left. I would call that 'ghetto' mark-up. Not only did it say 'Katie O'Connor:design', it said 'Katie O'Connor Web Designer and Developer. Chicago, Illinois.' The next week or so after I added that, I got outrageous hits.
Another 'ghetto' thing that contributed to my massive amount of traffic was that every page on this site had an extra blog article list (every complete article I've published) appended to the bottom of it. That is dozens more instances of every piece of content I've created. That upped the weight astronomically. It looked stupid, like I didn't know how to program, but the attention was exciting.
Good programming can lead to more opportunities and dignity, leading to something more gratifying than attention or capitalism. I am proud of the cleaness and perfection that I have going on right now. It is the Zen of the web, although boring (and somewhat ugly, no offense Txp).
— Katie O'Connor
web design, textpattern
May 3, 11:19 PM
Heh, looks like I nuked my presentation. Over the months I’ve learned a lot about interface design and layout. I am going to create something new and exciting from my template. I will incorporate the previous design’s fonts, colors, and floral imagery into the new design. In that way, it is a realign. I’m not changing everything, just the HTML. The focus on the structural redesign is to create a more readable, larger, and engaging experience, like this template based project.
I have a sweet template. I lost control of the previous. It was a decent template, looked good, but structurally mystifying.
— Katie O'Connor
xhtml/css, web design
Apr 18, 07:40 PM
My first real client! I am so excited. This project is little more than half complete to date. I left all the complex page layouts for last. I’m so grateful for this flexible and basic project to kick start my freelance career. It is a super awesome learning experience.
To Do:
- Fay
- favicon
- finish the empty pages
- sifr copperplate
- more font formatting on about page
- This Site
- try to fix duplicate article display issues
- open external links in new window
— Katie O'Connor
fay, web design
Apr 6, 09:47 PM
Check out my killer Fruit website!
Who needs 24 boxes when you are working on a site with a small amount of content? KISS? My CSS is very simple, direct, and intuitive. My HTML is nearly flawless, IMO. I am still working it out, but in the end, my goal is to make the selector names intuitive yet not explicit in describing the style.
In the future, I am going to experiment with style.css, which contains only font and color elements, and make a bunch of fun templates. I want to build an interface and connect it with jQuery. If I could figure out the server side stuff (php? mySql?), maybe I could build a CMS. If it works, and I can make it secure, maybe I could sell it. Dreams, dreams of when we had just started things. Dreams, of me and you. It seems, it seems, that I can't fight these memories. I wonder if you have the same dreams, too.
I apologize for those who have been visiting my abandoned AI9 blog in hopes of an update. I still love the show, I am lazy and had my share of Idol gab over the holiday weekend, and didn't feel an entry was merited. I really just started it because of Katelyn. Siobhan did REALLY good tonight, thought.
It takes so long to write those entries, too. I want to be so perfect and concise with it, but it ends up taking a couple hours. I would never make it in the journalism industry.
— Katie O'Connor
web design, xhtml/css
Mar 17, 10:23 PM
I am going to shamelessly hype my new entertainment blog – Katie’s American Idol Blog.
In terms of development, it took me much more time to write the entry than it did to deploy and skin the blog. It shows that I am a speedy blog maker, with Textpattern that is. I am also extremely opinionated when it comes to American Idol, and those opinions need to go somewhere. Check it out!
— Katie O'Connor
web design, xhtml/css
Feb 13, 12:17 PM
A quick update on this lovely application I’ve been procuring. I will write more about this a little later!
— Katie O'Connor
the heights, jquery
Jan 31, 01:11 AM
I am currently developing a jQuery controlled fieldset that alters the height and width of a graphical CSS frame. Labels identify a set of dimensions that correspond with a radio button. When the gray button is clicked the selected radio button's height/width is fed into the CSS. The height and width of the frame can be altered by changing only one CSS element ".frame-container". Wire frames coming soon.
Originally I wanted the height and width to pull from a user submitted text field. Alas, I could not find any resources about using variables to change CSS in jQuery. Should look into ajax, I think. I hope I don't need server stuff.
In the future I want to insert user uploaded images into the frames! Fun. I hope I can design a few more ornate frames. This is a fun project. Eventually I will build out the completed "The Heights" homepage. Maybe I will actually supply some interesting literary articles! So much progress...
— Katie O'Connor
the heights, jquery
