My Responsive, WordPress Adventure

Up until about a month or so ago I had been working on local WordPress sites with the help of  a fantastic little program called xampp. This program simply installs Apache, PHP, MySQL and PHP MyAdmin control panel automatically. For whatever reason just as I was about to embark on the adventure of making the Pakkisteam.com site responsive, that is to say use media queries to adjust the stylesheet for different sized devices, xampp died on me and my way to work on WordPress sites locally was gone. I don’t remember the exact issues I was facing but I do know I had trouble getting my phone to view files from the Xampp server over wifi which was sort of main thing I needed to do.

I attempted in vain to repair, reinstall, find a different version of Xampp and finally called it a dead issue. I think part of the problem was that as Xampp installs on your computer as a service the act of fully removing it and all of its components is quite difficult. So whatever was wrong was going to stay wrong and I was going to move on to my own install of Apache, PHP and MySQL. Had I done this before? No. Was I ready for a challenge? With Google at my side, Yes.

I started with Apache and this tutorial Learn How to Install Apache, PHP, MySQL, and PHPmyAdmin. Things went hit or miss and needless to say I had to do a lot of googleing for the little quirks that came up. I also ran into another tutorial, mixing and matching and comparing a bit betweent he two helped a lot Tutorial : Installing Apache 2.2.11, PHP 5.3, MySQL 5.1.36 & PhpMyAdmin 3.2 in Windows 7/Vista/XP. The trouble with these tutorials is they are never fully up to date with the newest version of the programs and neither of them expressly cover windows 7, no one wants to. So I am working off of old tutorials on a system that has already had some apache files on it from the time of Xampp. Granted no one can have a full tutorial for all the specific issues I had. I did learn a couple of things however.

Skype. Skype is a perpetual stealer of port 80, the same port set up to use apache on. There are a few things to do about this. Skype has a setting to change to port to some other obscure number, or when installing apache you can choose your own port like I did, I went with 8080. Now my local server is http://localhost:8080. It seems minuscule, but it makes a big difference.

Regedit.exe Windows registry editor is your friend for removing an already installed service such as Xampp’s apache. There are directions available for removing services, be care what you do in here, but, there is really no other way to remove a service in a sane way.

Moving on to WordPress

So finally I had an Apache, PHP, MySQL, phpMyAdmin system set up and was ready to start making something responsive happen with WordPress. I go to my phone browser and type in my local IP address, at the time it was http://192.168.1.101:8080/. That should have been my web server and from there the various WordPress site I was working on. It turns out I could see the site from my phone however without the attached stylesheets and other associated files.

WordPress General Settings Panel

The answer to this problem was the general settings panel (above) in WordPress admin control panel. Here, there are two fields where you can enter the url of the site. By default these will be set to localhost. The quick fix is to change this to the adress via your local ip address followed by the post number and then the name of the directory you installed wordpress to. In this case http://192.168.1.101:8080/pakkisteam.com/.

There is a better way to do it, as you will find, changing this in the WordPress settings works like a charm, until your local ip changes. In this instance you may find yourself locked out of your own WordPress admin panel unable to make any changes. The solution is to edit your wp-config.php file. At the top of that file just below <?php add these two lines:

define('WP_HOME','http://192.168.1.101:8080/pakkisteam.com');
define('WP_SITEURL','http://192.168.1.101:8080/pakkisteam.com');

Here you can set your directory to override the configuration you specified in your WordPress admin panel under general settings. This is my preferred way to edit the sites location as it just eliminates the chance of problems. Now you should be able to open your site up via your wifi enabled handheld device.

Responsive styles (and you!)

Now, I am not intending to teach you how to use responsive styles here, but I will get you on the right track. I first heard about responsive style sheets from Ethan Marcotte at An Event Apart Minneapolis, 2010. As one might have had to be there to get the gist his speech I would point you first to his article at A List Apart simply titled Responsive Web Design. Once you get started on them you will find the code is the easy part and learning how to design a site to be adaptable might be completely foreign, hard to grasp or throw your sense of design control into tilt.

For me, responsive web design using CSS3 Media Queries (by the way, I recommend you read that as well) is the only thing that makes website make sense anymore. With a world of people discovering your website on new android, iphone and other mobile and handheld devices, you can hardly ignore the importance of a site that adapts itself for different screen sizes.

The one thing no one likes to mention is how to get your phone to recieve the styles via media query and display the text at the right size too. Let’s put it this way, if you want responsive styles or really, any styles to look right on your mobile device (mine is an droid) try adding this META tag into the head of your HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

From there I think you might have a bit more success with your site displaying correctly on your mobile device. It took me quite some time to find that answer so you’re welcome if you find this before you get started.

Those links provided above, the little bits of wisdom I have found were what got me started on getting my WordPress sites to stop being old fixed with fuddy-duddies and on to progressive, cross-platform behemoths. You can check it out for yourself at Pakkisteam.com

Just wait, next time I’m going to be working on an HTML5 responsive site and I’ll share my trials, errors and results. Thanks!

Typekit problems and solutions

If anyone is keeping up with my progress on this site in the trial/soft-launch period of the new davidsiegfried.com here is what I have learned this evening.

typekit.com

I have been having some problems with typekit and the problems were two-fold.

First, in case you are unaware of typekit, it is a web application that specializes in helping web designers bring great fonts to the modern web. Essentially I can choose from their screen approved, impressively sized gallery of great fonts and through a little javascript and more importantly some great CSS3 techniques you see renderings of text you have never seen in your browser unless it was a painful and tedious image (or flash). The main reason for using typekit is I don’t have to worry about the legality of which fonts are approved for this process and which aren’t. Typekit has handled that for me. Thank goodness.

The technology, namely CSS3, as I understand it does something along the lines of caching a font file on the users computer and then that font file does the work just as a normal font file installed on your computer. This means any browser that supports the CSS3 @font-face rule gets essentially native fonts the likes of which were not possible before. So for you Safari, Chrome and Firefox users, you are enjoying ‘Brevia medium-italic’ right now and I hope it pleases you as it does for me.

The problems occurred when I set up typekit with ‘Brevia light-italic’ aimed at my site without really understanding how it worked. In Firefox, where I do my development the fonts rendered perfectly and at this point I am largely unsure why, but, Firefox will occasionally do a little intuition work and make things that are broken look a-okay. Well, Chrome and Safari were having none of it and they refused to give me any ‘light’ or ‘italic’ and were presenting boring old ‘Brevia normal’. Lame indeed.

With a little help from some speedy tech support I was directed to this page where I learned that I can’t just expect typekit to do all my work for me, I had to specify the lightness and italics in my stylesheet just like a normal font. So I added some really basic CSS properties like this:

p{
  font-weight: 200; /* for lightness */
  font-style: italic; /* for italics */
}

All of a sudden things started working across all browsers and WHAMMY! (like the sports guy in anchorman) everything came together for me.

A typekit problem that wasn’t my fault

So, feeling fairly happy with the new results I went to try to solve my other typekit problem. I was using a script font for my headers called ‘Bistro Script Web’. Honestly it was the best script font I had ever seen. However, it seemed to render about 15 pixels lower than where I wanted it if I was viewing it on a mac. I wasn’t sure what the problem was so, I sent a support email to typekit support and got this response:

“Bistro Script Web, the font, looks like it has some problems in that it is spaced inconsistently across browsers. We’re going to address this eventually, starting with a blog post in the near future that will explain why fonts are sometimes spaced so. Meanwhile, I’m sorry for the inconvenience.”

So, I went ahead an replaced that font with a similar font called ”Adage Script’. It has some of the same scriptyness in some ways but it is a little less forceful in its stroke and makes me a little less happy. Still, considering there isn’t another good option I am pretty happy with the results. Also, a big thank you to A.J. Laventure for the assist with how things looked on the mac.

With typekit under control I did some other minor updating but, for now the site remains in many ways unfinished. On my short list for the week is:

  • Correct links for the right sidebar on the about page.
  • Addition of social media icons on the contact page.
  • Small social media icons for the footer and some text like: friend, follow or stalk?
  • I’m not totally sure I am done with the twitter flickr sections on the about page and they may separate themselves and appear on other pages in addition to the about page.
  • I have to dig up some blog posts I wrote a while back about facebook taking over the web (a little dated but fun) and a css project in easy cross-browser builds (even for ie6).
  • I still need to resolve the “share with friends” links on the blog page.
  • Improvements to the ie8 stylesheet.

Plenty of work to do, but I am feeling better about people coming by and taking a look at my site now that some of the main problems have been taken care of.