Last night I spent some time in PhotoShop Elements mapping out my next new CSS layout. As I finished up my rough layout, I began questioning – for the first time in a year or so – where I would begin for my CSS. For the past few designs, I have started off with a great three column layout that has worked very well for me. It is now officially time to make my own master layout that I can use and reuse for multiple designs to come. Stay tuned for my first new web site design with this new CSS. My goal: flexibility, compatibility, optimization, and the use of W3C standards. Jappler.com will not be the first site I redo with the new CSS, but it will be redone in the next few months. Change is good. Being obsessed with browser compatibility is better. 😉
[tags]CSS, W3C standards, browser compatibility[/tags]
You know the drill…one link leads to another and then to another until I stumbled onto Scott Johnson’s blog. One of his blog posts mentioned wanting some resumes for some CSS contract work so since I have some extra time, I decided to send him a copy of my resume and portfolio…and I am happy to say that I will be helping out with his newest startup: Ookles. If you have not heard of Ookles yet, I encourage you to sign up on the Ookles web site so you will be notified when the the company is out of stealth mode. Exciting stuff ahead!
On another note, I have begun rethinking and mentally re-arranging jappler.com. Time to take my personal web site to the next step and use some really cool technology. First up: the sections. I am planning on combining some and adding others. I also need to make the home page more portal like instead of having static content that no one really cares about. I also have some minor interface tweaks in mind (time to learn and implemet some AJAX goodies. Stay tuned!
It is that time of year…when I start looking around at my web sites and figuring out what I can do to improve them. First stop: new or cool CSS techniques. I have been gathering helpful bookmarks for the last few months and thought I would pass all my top 6 CSS recent bookmarks onto everyone. Why 6? That is what I had – back off…I told you this site was random. Not using CSS yet? Please…consider it as a New Year’s Resolution. The table was so 1999. New development: CSS.
- Mini-Tab Shapes
- CSS Tabs
- In search of the One True Layout
- 24 ways to impress your friends
- Somone’s top 12 CSS articles
PS. Happy birthday Ben!
Well. A good calendar solution is always needed for business and/or personal needs. I just happened to stumble on a really cool PHP/CSS/AJAX solution: Monket Calendar. Check out the demo. As of now, it is still in beta testing, but it looks promising. (Especially since it supports RSS and iCal…as well as used AJAX. I need some more AJAX in my life.
[tags]Monket Calendar, AJAX[/tags]
The last few days I became obsessed with optimizing jappler.com. It was loading slower and slower with what seemed to be every passing day. Since I had originally designed my web site for an earlier version of WordPress, I figured it was about time for a tune up. I went to the ever-so-helpful codex, to help me figure out what was going on. I went through a number of different steps to troubleshoot the problem and I thought the steps I took might be helpful to others.
- Is it my host or my site? At first I thought it was a slow host. I had friends from around the country access my web site, and confirm the problem existed for everyone. From all the feedback, I confirmed something was going on. Now it was time to take it to the next step. Was my host slow or was my web site slow? To check this, I grabbed a recent backup and restored it to my desktop to check it out. Once I had everything in place, I hit my web site and it still seemed slow, so I asked Ken to give it a try. He confirmed it was still slow. It was not the host that was slow.
- Is it my template/XHTML/CSS/graphics that is slow?
Now it was time to revalidate my XHTML and CSS via W3C. I caught a few errors, but nothing major. I also took a look at my graphics’ sizes…nothing too hideous. I even had a few graphics (Get FireFox, etc) that were being pulled from a remote location…I put an end to that. I then reconfirmed that the site was still slow so I decided to turn to my favorite part about FireFox the Web Developer extension. Under the tools menu, I viewed my site’s speed report via http://www.websiteoptimization.com. I was able to look at everything that was loading from my site, make sure CSS decisions (break up my CSS into a few different files, and then do some minor changes to reduce my HTTP requests from 63 to 36. How? This is where I started getting into some database optimization.
- MySQL issues? Since everything is page is created dynamically, it was time to shift the focus on the database.
- Table optimization.
- Slow queries. I found out that MySQL has the ability to log slow queries by adding
log-slow-queries=/var/log/mysql/mysql-slow.logand then defining the slow query variable
set-variable = long_query_time=2in the
/etc/my.conf file. (This is not created by default.) Once you have made changes to the my.conf file, you will need to stop/start MySQL. Now to look at the slow queries…simply
tail -f your log. (for me:
tail -f /var/log/mysql/slow-queries.log) Once again, with some testing (browsing) of my web site, I did not find any queries that stood out.
I first read about the option to optimize tables, so I logged into phpMyAdmin and optimized all my WordPress tables. I once again did some more performance testing on my site and yet again, no luck…it was still slow. Time for my next hypothesis.
- Back to the jappler template: One div at a time. Back to the codex I went searching for tips, examples, etc. What else could be the problem? Time to go through what I know.
- I have ruled out a slow host.
- My XHTML and CSS validate (or have only a minor issue with one of my IE tricks, but when I use the default WP theme my pages load fine.
- I have stripped out the right hand column and the footer to localize the problem to the main part of the page so those parts of the pages are fine.
- I have disabled and then re-enabled all the WP plugins one at a time (and deleted a number of them)
- I have optimized my MySQL tables. I have looked at slow queries coming from my theme.
At this point I did not see too many options other than recreating my templates over one div at a time. Div by div I recreated and tested my web site. (header loads ok…time to add the menu….menu loads ok with header…time to add content. Eventually through enough testing (and some wild plugins) I tracked down the problem…more like problems and started testing multiple templates.
- What’s left as of today? I still need to work on my index.php to make it load a little quicker. Something is still not happy there. I also need to figure out what is not happy with the news page. Other than that…even though it was a stressful few weeks, I can walk away happy because I learned a lot.
- When issues arise, try to pinpoint the problem as much as possible by asking yourself questions.
- Validate your HTML/XHTML/CSS. Clean code is a good thing.
- If you are using themes/templates, try a default template.
- Make use of the Web Developer extension for FireFox.
- Take a look at your site’s speed report via http://www.websiteoptimization.com.
- Back up often!! (I just had to slip this in)
- Be on the lookout for rogue plugins and watch your queries.
- Don’t give up!
After completely moving towards tabless designs, it is hard to look at the cluttered code of tables in code. I have probably put in 15 hours of playing with XOOPs now, a few of these hours stripping code down to be more CSS driven. I am all about clean code these days, but boy do I have my work cut outr for me. I am having problems giving up complete control with layout with a lot of what I am working on, but I have to stay focused on the prize: added functionality without a lot of effort. Last night I upgraded my install to XOOPs 2.2 from 2.13. The upgrade was painless, but some of the modules I want to use are not compatible with the new version. I will wait. Ideally I would some day produce my own CMS, and this idea is why I have been looking at several CMS packages. I would like to take the best from what I have worked with and put it all together. I am at least a year away from doing this, but it is something I am looking towards. I chose XOOPs for several reasons, but one of the main reasons was because it uses Smarty, and I am curious how it handles these templates on a large scale. I am learning a lot about seperating my content from my php code and layout. It is a bit confusing sometimes because of old habits, but it is coming together nicely. I am hoping to have something to show everyone after another 10 or so hours this weekend. I could have easily used one of the layout that comes with XOOPs, but if you know me, you know I could easily spend several hours trying to figure out how to get everything perfectly lined up to the exact pixel, so a custom layout was certainly needed…and a complete CSS driven layout of course. Overall, my work with XOOPs has been pretty positive. Version 2.2 really cleaned up the admin interface which I greatly appreciate. My only complaint so far is that I have to wait a few days/weeks for my choice modules to be updated. OK, I do have one more…the screen refreshes when you authenticate. I would like to go to the page, not refresh to include new content…but I am trying to read up about that…perhaps I can do something about that. Everything is customizable, right? 😉
Time to take things to the next level…my love for (Mac OS X 10.4 + Web Development) = Dashboard widget creation time. When I first got my hands on
Mac OS X 10.4, I was not too crazy about Dashboard, but after WWDC I started to like it more and more. I wanted to start off with a simple widget, so I decided that it would be cool to have a widget that would display the past 10 jappler.com posts while also having the option to search old posts/pages. I have a few other plans in mind for other widgets, but until then, check out my very own widget: Jappler.com Dashboard widget.
Disclaimer: Use the jappler.com dashboard widget at your own risk. I am not responsible for any data loss, productivity loss, global warming, etc that this widget might cause.
Well, yesterday after hours of frustration and CSS style sheet number three, I started thinking that what I wanted was not possible…not even close. Thoughts entered my mind like : “maybe I will forward all IE users to a nice web site on standards” and “maybe I could pdf my web site and make users do that.” These thoughts were the desperation speaking. I dreamt all night about CSS classes, divs, and elements and woke up determined to find something that would work. Enter my new hero: Tonico Strasser who authored an awesome layout which I based my design on. I have learned so much about CSS…and this experience has been an education. I am still not a fan of IE, but it is something we have to deal with and I have dealt with it. I have a few spacing issues with IE still, but everything looks pretty good. Sixty plus hours worth it? Yes. Standards are important.
Well well. Who says you should settle? I decided to completely re-write my style sheet and I have almost everything down for both IE and Netscape (FireFox, Safari, Netscape) browsers. Some things I still need to look at are the bulleted lists on the right (blog) and some other details. I again feel like I have taken CSS to another level.
So why did I switch style sheets? I went over to a friend’s house last night and saw the horror of my web site in IE for Windows. I came home and made some adjustments, but then got frustrated and knew there had to be another way…here I am.
What I have learned…well for one, IE is not pleasant to work with, time to get a “get Firefox” logo for this web site. IE does not play nice in so many ways, but the killer is it does not like min/max-width, and that is very important to this design. All other browsers that I have tested obey the min/max-width, but not IE…this was the major reason I had to start from scratch again. I decided that being able to stretch it for IE was better than the absolute mess I saw before. I am hoping I can find a fix somewhere, but for now I am ok with that…I suppose.
Other than that, this whole design has been a great learning opportunity and I am excited to figure out these last few bugs so I can enjoy the design instead of working on it…well at least for a few weeks. So, if you see something weird, believe me, I am aware of it…and am on the case.
Oh my. Well, by blog was getting ugly with all of my leftover CSS problems, so I decided to sit down and figure this out. I have 95% of all this figured out, still some problems with Firefox and the li dots. I am not happy with the word/letter spacing, but who knows. All this CSS work makes me want to redesign my site…again, but I need a break, and I need to focus on making my current one better. So many things that I like. Well, I am burned out. CSS…