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!

HTML5 for Web Designers Review

I waited the full ten days for the shipping of A Book Apart’s first “brief book” HTML5 for Web Designers by Jeremy Keith. A Book Apart is a joint venture by Jeffery Zeldman, Mandy Brown and Jason Santa Maria dedicated to making short books, 90 pages in this case, for the folks on the front lines creating websites for a living. Because I match this target audience I thought I could weigh in on the book and the direction A Book Apart is taking.

I decided to just get my thoughts out on the book, the scope, depth and the idea of these short focused books.

The Format

The idea of a shorter more digestible book format is a winner for me, but it has its certain trade-offs. I think a book that I could read in just an hour and a half or so has a lot of worth because it is very obtainable for busy people. I generally group web design/development books into either ‘hammock readers’ and ‘desk readers’, where the desk readers are books I have to work my way through lesson by lesson at my computer and hammock readers are those I read here and there in my free time but can take a few weeks reading at leisure. I think HTML5 for Web Designers has to be a part of a new subset. Even with a very short attention span you can set a couple hours and a simple goal of finishing the book while sipping some ice tea and taking it easy and be done before you know it. The book might not have all the examples you want, all the background info you might be curious for, but it gets you the basics and tells you where else you can look if you still need more information. And honestly, the fact that it is in print makes a difference for me, I don’t have he capital for an Ereader and sitting at the computer reading a pdf is a real drag.

For reiteration sake I think the format works, quick, to the point and something I can tackle in a couple hours without loosing focus.

Jeremy Keith

I have read a book by Mr. Keith before, I am actually currently working through his Dom Scripting book to reiterate my knowledge of the DOM and JavaScript to much success. Jeremy has a clear precise and very thorough approach to topics whilst maintaining a dually practical and theoretical viewpoint on the subject. For this book you can tell at times he had to cut himself off a little and leave a few things for further investigation, that being the point of a shorter book however, it seems to have went just fine and he even snuck in at least one bit of “whimsy”, a word that floats around the A Book Apart webpage, that made me laugh. I think they did get the right guy for this book.

The Book, Apart?

Trying to deal with the topic that as is pointed out covers a spec that is 900 full pdf pages in one tiny little book is a daunting premise, but, as the scope is directed at someone just on the design/front-end development end of things it becomes a bit more manageable. Like everyone I have seen a lot of HTML5 hub-ub around the blogosphere and even seeping into the higher traffic spaces like youtube but there were things of which I still had little understanding.  I had read about the semantics of HTML5 spec (of which there is an entire chapter dedicated) in some detail and have been using class names to simulate semantics like article, section, and hgroup for the last year or so. However things like canvas and all its potential are still a little lost on me. Jeremy gave me a little better grounding but it seems like something like canvas really needs its own book. I understand the basic intentions but I would not be sure after reading even how to begin working with it. Jeremy does have a chapter dedicated to using HTML5 today, but, I am not sure after reading this that I am really in any hurry to do anything but play with HTML5 right now. As things solidify towards 2012 and what sounds like the first version of implementation of the language I am sure I will be ready to make the move, but, I wont be using it for client projects until that time, at least, I don’t believe I will.

This book, though brief and at times missing some detail I’d like was high level and written with a standards compliment front-end developer in mind. More importantly has me very excited for HTML to become the norm on the web.

Favorites/Final Thoughts

My two favorite sections of the book were surprisingly the history of HTML section and the semantics section. I am a sucker for history and semantic mark-up so this might lead to a bit of a bias but I feel these areas were well flushed out and really contributed to my understanding of the goals of HTML5. It is not just a new language for the sake of a new language or to kill flash or any such nonsense, it is a new language to improve the internet for all users in many ways.

My last point is on the clarity I am finding in the web world this week and is only half related to my new understanding of HTML5 provided by this book. On Thursday on The Big Web Show I watched Nicole Sullivan explaining that a good stylesheet is made out of many reusable widgets or pieces. So basically, if I have a certain type of arrangement of content I could potentially copy that and move it into another page in a different place on the page and not have to restyle based on its movement. There was a place in the semantics section of Jeremy Keiths book where I got that same idea in my head. HTML5 is working to create documents that are chunks of code that can exist anywhere in a web document and not have to be recoded or restyled. Clearly the Web is moving this way from everything I have been seeing and it is a result of content management systems and a whole host of really smart designers/developers who understand the potential power and flexibility the web STILL has as a medium (plenty of potential is, as of yet, unrealized). Personally the prospect (and practice) of this idea is a thrilling one.

Great job to everyone involved on this book, it was an enlightening experience in many ways and I look forward to more.