A Whole New Me

The brand-new, super-cool markvioli.com

Introducing the newly designed markvioli.com. With increased functionality, social integration and seamless blog, I expect this design to serve me well for at least the next couple years.

The “bones” of the site are very similar to the previous version. But the look was given a complete bottom-up overhaul. New content including updated photos and multi-media are more prevalent. But the biggest aspect of the redesign effort was seamlessly incorporating The Blog into the rest of the website. Because markvioli.com was around years before The Blog came along, it was easier at the time to simply build a blog on wordpress.org and link to it. This was fine but I really would’ve preferred full integration. When I could no longer stand the previous version of the website, I decided I would tackle the blog integration at the same time as the redesign.

The result is a seamless transition from website to blog and back again. See the following FOR GEEKS section to learn more about how I chose to do this.

I hope you enjoy the new markvioli.com; as always your comments are welcome.

FOR GEEKS

Without making this a full tutorial, here’s how I rebuild my website and integrated The Blog.

The website was previously (and remains) custom HTML and CSS. In order to more tightly integrate The Blog, I needed a way to break out of the wordpress.org blog set-up and move to hosting the WordPress software on my server. Installation of the WP software on my server was a snap.

Next problem: migrating content from old blog to new blog This content includes a bunch of material: posts (text), photos, comments and the associated directories and permissions for everything. Fortunately, WP makes exporting all this super-easy. You can export all this data in the form of a single XML file then upload that file into the new blog. Couldn’t be simpler.

Now my new blog was populated but it looked awful. I fooled around with several existing WP templates, attempting to match colors and styles; had I persisted I probably could’ve gotten The Blog and website to match pretty closely. But I also would’ve had to compromise quite a bit in the design of the website compensating for the template’s limitations. (This by the way, is the same reason early on I eliminated the idea of running the entire site inside WordPress.) What to do?

A custom WordPress template, you say? I tried to avoid it, I really did, but I ended up essentially making a new, custom WP template. I had virtually no idea how to do this. I couldn’t start with a blank page and try to code everything, so I endeavored to find a tutorial of some kind. I found one from someone who had a similar goal as mine. (Article here) They showed how to edit the famous, if obsolete, Twenty-Ten WP template to customize to your site. I was a bit disheartened to have to work with this old template that lacks many of the pre-installed bells & whistles of newer, slicker templates. But it turned out to be a blessing. Here is what it comes down to: You strip out the header and footer, replacing it with your own content while leaving the center (blog content area) to do its work as the content management beast it is. You can still use all of the WP functionality you could with an out-of-the-box template.

Integration. There are many ways this could’ve gone but I elected to use iframes for the header and footer linking to existing files used in the main site. That part was fairly easy. What was more complex and time-consuming was that, once completed, my blog looked completely awful because the style sheets did not match. The author warned me I may need to make a few adjustments but I pretty much had to rewrite the entire blog CSS. Anyone who has spend some time in CSS knows it is largely a trial and error process. But in the end, I had to make very few compromises mostly because the Twenty-Ten CSS I was working with was so flexible and lean to begin with. Any functionality I gave up I was able to replace by using various WP Tools and Widgets. These are small applications that add various and specific pieces of functionality to your WP blog.

A whole new me. With the blog now functioning and looking pretty good, I turned to the main website. I approached this like any other website redesign I would do. The site is still HTML and CSS though I had to do some pretty heavy editing to update the CSS to current standards. Other things I did were move all videos to YouTube for more consistent playback, I had new photography taken, updated my social & sharing options and I found a great new jquery tool called Fancybox to display multi-media. I also made a new slideshow element for the homepage; this displays in either HTML 5 or Flash depending on your system. This was developed in a great multi-media tool MotionComposer.

Finally, I edited CSS in both The Blog and main website to be sure they matched as closely as possible.

The results, I think, speak for themselves. I am really pleased with the look, content, load time and integration across the board.

If you have a question or comment, you know what to do.

Links to Reference

Tagged