    
|
|
|
In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.
Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.
We’ll also be discussing the advantages of rearranging and resizing responsive elements in a flash, and what that means for your next project’s workflow. At this rate, we’ll hopefully be seeing the back of those pesky clearfixes in the near future!
Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.
Featured image/thumbnail, flexible image via Shutterstock.
| 1000+ Royalty Free Vectors + 50 Free Textures – only $17! |
 |
In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.
Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.
We’ll also be discussing the advantages of rearranging and resizing responsive elements in a flash, and what that means for your next project’s workflow. At this rate, we’ll hopefully be seeing the back of those pesky clearfixes in the near future!
Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.
Featured image/thumbnail, flexible image via Shutterstock.
| 1000+ Royalty Free Vectors + 50 Free Textures – only $17! | |
|
|
Dean John Jeffries is retiring at the end of June after forty years of service to UMBC. In recognition of his profound impact on UMBC, we are delighted to announce the establishment of the John Jeffries International Fellowship.
The Fellowship fund honors John’s commitment to building a strong and distinctive undergraduate curriculum and to educating students to become informed and engaged global citizens. The Fellowship will provide faculty with resources to create, or redesign, and teach a course in their fields in order to add or enhance an explicit international or transnational focus. Our expectation is that the resulting courses will be taught regularly and will broaden the intellectual scope of the curriculum in the College of Arts, Humanities, and Social Sciences.
In a matter of weeks, current and former Department Chairs, Program Directors, and Associate Deans in the College of Arts, Humanities, and Social Sciences, and other members of the UMBC community have contributed more than $25,000 to endow the John Jeffries Fellowship. Since then, others have contributed towards the goal of $200,000, which will enable the campus to support two Jeffries Fellows each year.
If you are interested in making a gift to the John Jeffries International Fellowship Program, click here and list “John Jeffries Fellowship” as the “other designation.”
 |
Now powering over 17% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user. But what about websites built with an outdated CMS or without a CMS at all? Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website? Nope!
Migrating a website (including the design) over to WordPress is actually easier than you might think. In this guide, we’ll outline the migration process and work through the steps with a sample project. We’ll also cover some of the challenges you might encounter and review the solutions.
Before we get to work, let’s establish some context. First, this guide was written primarily with beginners in mind and will be most helpful for basic websites. Some of you will likely encounter advanced aspects of WordPress migration, but they are beyond the scope of this guide. If you’re tackling an advanced migration and get stuck, feel free to share your difficulty in the comments below.
The objective of this guide is to help you with the following:
I assume you have basic familiarity with WordPress. Previous development experience with WordPress would be helpful, but not necessary. I also assume you have an existing website and design that you want to migrate to WordPress.
Here are the basic steps that I recommend you follow for a typical WordPress migration:
With this outline in mind, let’s work through each step in detail.
The key to a successful migration is to carefully evaluate your current website. You need to figure out how to import and structure the content in WordPress before carrying over the design.
While the principles are the same across migration projects, the details often vary. So, below are two lists of questions to ask as you work out a plan.
My brother, Joshua Wold, has volunteered a website to serve as an example; it’s for a side project of his in which he sells posters and postcards of a Vegan Food Pyramid. He built the website in plain HTML, with some basic PHP includes for the header and footer. Below is a screencast of me evaluating the website to give you a sense of how the process will work. Enjoy!
Before importing the content, we need to get WordPress ready to go. If you’re just experimenting or if you prefer offline development, start with a local installation of WordPress. Otherwise, the next step is to install WordPress with your current hosting provider; or you could use the migration process as a great opportunity to move to a new host.
Once WordPress is up and running, you’re ready for action!
For our example, we’ve installed WordPress with the same host, setting it up in a /wp directory for the duration of the migration process.
With WordPress installed, we’ll make a few minor adjustments:
Settings → Permalinks to make changes. In most cases, I’ll switch to “postname”-style permalinks.Depending on the needs of the project, we might have to preinstall plugins. Here are the major categories of plugins:
With WordPress up and running, it’s time to bring over all of your content.
If your old website has a CMS, an importing tool might be available. Start by viewing the list of content-importing scripts in the Codex. If there’s a match, great! Follow the instructions and get to work. If all goes well, you’ll have migrated the content over without any trouble.
If your old CMS is not in the list or you don’t have a CMS at all and you’ve got fewer than 100 pages, then manual migration is probably the way to go. Copy and paste the contents, noting the old URLs as you go (tracking the migration in a spreadsheet is a good idea).
If you’ve got a custom CMS or a database of records without an importing tool and a high volume of content, then you might want to bring in a specialist to move the content over before continuing. The higher the volume of content, the higher the chance of human error and the more important automating it becomes.
For our project, I’ve migrated the content manually and replaced the existing navigation with a WordPress menu. You can watch the process in this next screencast:
With our content in WordPress, it’s time to bring over the design. Incidentally, if you’re considering a new design, then now is a great time to look at the many excellent WordPress themes out there, both in the official repository and in third-party marketplaces such as ThemeForest and Creative Market. For our purpose, I’ll assume that you’re happy with your design.
Evaluate the source code of a prospective design as best you can before tackling the migration. If the code is table-based or more complex than you’re comfortable with, then migrating the design might not be worth the effort. While anything is possible (I’ve migrated some complex table-based designs in my time), not everything is practical.
In my experience, the easiest way to migrate is to work directly with the source code in the browser. While having access to the original hosting environment can be helpful (especially when working with a lot of images and downloadable files), the ways that websites are built vary so widely that you’ll often have to reverse-engineer the original architecture in order to derive anything useful.
Going directly to the source code in your browser of choice will save a lot of time and, barring any important “behind the scenes” functionality, give you everything you need. Google Chrome is currently my browser of choice, and I’ve pulled our source-code samples directly from the browser. (In Chrome, go to Menu → Tools → View Source, or just right-click to bring up the contextual menu.)
If you’re new to them, learn about using themes in the Codex. For the migration process, you can either build a new WordPress theme from the ground up or modify an existing theme to meet your needs. I recommend the latter.
Most of my migration projects have started with the latest version of WordPress’ default theme (currently Twenty Twelve). Recently, I stripped down the default theme to create my own migration starter theme, which I’ll use in our example and which you’re welcome to use yourself. (Feel free to suggest improvements!) Let’s get to work.
Download a copy (ZIP) of the migration starter theme or follow along in your own theme of choice as we work through the relevant theme files.
Our first step is to bring over the styles from the old website. In most cases, this is as simple as searching the source code for references to .css and then copying and pasting the contents from those style sheet(s) into our own style.css. Let’s get to it.
style.css.As you migrate the style sheet(s), search for and update any references to images. In general, I like to keep all images in an /images/ folder within the theme’s directory. More often than not, changing the locations of images referenced in the original CSS is necessary, and I make sure to update all references in the style sheet and templates accordingly.
The next step is to create the header for our new theme. Our objective here is to merge the structure of the current code base with WordPress’ templates. Here’s what we’re going to do:
title tag and leave the wp_head hook in place.Let’s get into the code!
<!DOCTYPE HTML>
<html>
<head>
<title>Vegan Food Pyramid posters, postcards and wallpapers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="google-site-verification" content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" />
<script type="text/javascript" src="//use.typekit.net/tty6xpj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<a href="http://veganfoodpyramid.com"><h1 id="logo">Vegan Food Pyramid</h1></a>
<ul class="menu">
<li><a class="active" href="http://veganfoodpyramid.com">Products</a></li>
<li><a href="http://veganfoodpyramid.com/wallpaper.php">Wallpaper</a></li>
<li><a href="http://veganfoodpyramid.com/about.php">About</a></li>
<li><a href="http://veganfoodpyramid.com/contact.php">Contact</a></li>
</ul>
<!DOCTYPE html>
<html>
<head>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="google-site-verification" content="PO3bWDpUEh4O6XXwnmfyfxrKRDf8JsRrNIcGdzv3POs" />
<link rel="shortcut icon" href="http://www.veganfoodpyramid.com/favicon.ico?v=2" />
<script type="text/javascript" src="//use.typekit.net/tty6xpj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<a href="http://veganfoodpyramid.com"><h1 id="logo">Vegan Food Pyramid</h1></a>
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'menu'
) ); ?>
</header>
One of the challenges of migration is deciding whether to improve code as you go along. Our project has a few areas that could be improved, but Joshua and I agreed to leave them as is. Most of you will be tackling the migration of a design that hasn’t been coded to current best practices (although, in fairness to the original coder, they may have been best practices at the time).
If time and opportunity allow, I encourage you to improve on the code. Otherwise, take comfort in the fact that, with the website now on WordPress, improvements will be a whole lot easier down the road.
Let’s work through the changes we’ve made!
wp_enqueue_style in the functions.php file.wp_enqueue_script. If you’re up for the challenge, I recommend doing it this way. (Check out a tutorial on enqueuing TypeKit the right way.)<?php wp_head(); ?> at the bottom of the </head> tag in the merged header file. WordPress uses wp_head, among other things, to enqueue scripts and style sheets that are referenced in the theme (usually in functions.php) and in plugins that you’ve installed. Without wp_head in place, most front-end plugins won’t work.<?php body_class(); ?> tag. WordPress uses this to provide a series of helpful classes to the <body> tag depending on the page being viewed. In our example, the <body> classes weren’t being used. Yours might have unique IDs or classes on each page, in which case you can create a custom function using conditional tags to add the appropriate classes to the corresponding pages. Have a look at the Codex for some examples.active class (generated via PHP) to indicate which page the visitor is viewing. The wp_nav_menu function is highly flexible and offers built-in functionality to handle the current state of an element in the menu. I’ve updated the references in the style sheet to the active class and changed them to use the equivalent generated by wp_nav_menu, which is current-menu-item. Watch the screencast on importing content to see how I’ve set up the menu for our example.And that’s a wrap! Let’s move on to the next piece.
The footer is usually the most uneventful template in the migration process. As with the header, our objective is to merge the relevant parts of the original source code. Let’s get to it!
<div id="footer"><p>© 2013 VeganFoodPyramid.com</p></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
<div id="footer"><p>© <?php echo date('Y'); ?> VeganFoodPyramid.com</p></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6992755-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<?php wp_footer(); ?>
</body>
</html>
Some footers are hard to migrate (such as ones with complex menus and widgets), but most are simple. In this case, we’ve merged the HTML with our footer template, making sure to preserve our reference to the wp_footer hook. We’ve also changed the date reference to use PHP, ensuring that it updates with each year.
One of the challenges of a migration is that there are so many different ways to get the job done. The home page is a good illustration of this because it tends to be the most different from the rest of the website. Adopting the simplest method is usually best. I’ve opted to put all of the home page’s content directly in the template. Changes will be rare and can easily be made by editing the template.
Let’s look at the code, excluding the header and footer, which we’ve already covered.
<div id="content">
<div id="poster">
<a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg" /></a>
<div class="description">
<h2>Poster</h2>
<p>A 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.</p>
<h3>$30 each</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2FKQT879CXYYG">Buy</a>
</div>
</div>
<div id="postcard">
<a href="http://veganfoodpyramid.com/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="http://veganfoodpyramid.com/images/postcard-splash.jpg" alt="Postcard Splash" /></a>
<div class="description">
<h2>Postcards</h2>
<p>Beautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!</p>
<h3>$50 for 50</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EN387WHNSSFMW">Buy</a>
</div>
</div>
</div> <!-- end content -->
<?php
/**
* Template Name: Front Page Template
*/
get_header(); ?>
<div id="content">
<div id="poster">
<a href="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg" /></a>
<div class="description">
<h2>Poster</h2>
<p>A 30×20-inch poster illustrating over 125 vegan food items as an alternative to the traditional food pyramid. This poster will catch people’s attention and serve as a suggestion for food ideas.</p>
<h3>$30 each</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2FKQT879CXYYG">Buy</a>
</div>
</div>
<div id="postcard">
<a href="<?php echo get_stylesheet_directory_uri(); ?>/images/Vegan-Food-Pyramid-New.jpg"><img class="product-img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/postcard-splash.jpg" alt="Postcard Splash" /></a>
<div class="description">
<h2>Postcards</h2>
<p>Beautiful 4×6 postcards that can be mailed and shared with friends and family. Hand them out at events. Post them on walls. Share the vegan love!</p>
<h3>$50 for 50</h3>
<p>Includes free shipping worldwide</p>
<a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EN387WHNSSFMW">Buy</a>
</div>
</div>
</div> <!-- end #content -->
<?php get_footer(); ?>
The front-page.php template begins and ends with a reference to the header and footer that we’ve just prepared. In between, we’ll merge the rest of the HTML, and we’ll use the get_stylesheet_directory_uri function, which will dynamically generate references to the images folder in our new theme.
With the header and footer done, the standard templates are usually quite easy. For brevity’s sake, we’ll go directly to the merged templates.
<?php
/**
* The template for displaying all pages.
*/
get_header(); ?>
<div id="content">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
<?php
/**
* The template used for displaying page content in page.php
*/
?>
<article <?php post_class(); ?>>
<?php the_content(); ?>
</article>
There are several items to point out here:
#content container might look intimidating. The “loop” is code used by WordPress to display a post’s content. You can learn more about the loop in the Codex. Meanwhile, just make sure that it’s in there, or else the content you save in WordPress won’t show up.get_template_part function, which is a great way to keep content organized, especially in complex projects. Our website is simple enough not to warrant it, but I left it in just to show you.<article> (with the corresponding post_class function) to make further customization of the design easier.Although not illustrated in the screencast, the design includes a full-width template for use on the “Wallpaper” page, while the standard page template is changed to a narrow width.
Let’s have a look.
<?php
/**
* Template Name: Full-Width Template
*/
get_header(); ?>
<div id="content" class="full-width">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
With the template created, all that remains is to assign it to a page. From the “Edit Page” interface, find the “Page Attributes” box (usually right below the “Publish” box) and select “Full-Width Template” from the “Templates” dropdown menu.
Now let’s tackle some of the “extras” that sometimes come up as challenges during a WordPress migration.
Now that we’ve wrapped up work on the theme, it’s time for a review. Work carefully through the pages on the migrated website. For a large website, focus on the different templates. As you review, here are some things to watch out for:
If your link structure has changed (and it usually will, even if only slightly), make sure that visitors are redirected from the old pages to the new. For small amounts of content, one of the easiest ways to set up redirects is by adding them to the .htaccess file.
Open the .htaccess file in the WordPress directory. If you don’t see it, set your FTP client to show hidden files. Now, create redirect rules for each of the old pages. Be sure to put these rules after WordPress’ block of rules.
Here are the rewrite rules for our links:
Redirect 301 /wallpaper.php http://veganfoodpyramid.com/wallpaper/
Redirect 301 /about.php http://veganfoodpyramid.com/about/
Redirect 301 /contact.php http://veganfoodpyramid.com/contact/
Redirect 301 /contactthanks.php http://veganfoodpyramid.com/contact/thanks/
If editing your .htaccess file is not an option or if you’re dealing with a lot of redirects, then have a look at Redirection (free).
Advanced tip: If the volume of redirects is very high (which is likely with a large-scale migration and a custom importing process), then consider building a function that hooks into template_redirect, compares a generated list of cases, and then uses the wp_redirect function to redirect any matches.
Going live with a website usually involves one of two tasks:
If you set up WordPress in a subfolder (as we did), then going live involves a few simple steps. Follow the guide to using a pre-existing subdirectory installation.
Once you’ve made the change, check immediately for any broken links that you may have missed in the final review.
If you set up WordPress on a new server, then you probably used a temporary domain. Accordingly, remove references to the temporary domain before pointing the domain to the new server.
Also, if you’re planning to update the name servers for your domain, then first resolve any dependencies in the current DNS records (such as hosted email and third-party services). I usually go live with a domain by updating the A records, leaving the name servers in place.
And there you have it! A successful WordPress migration is all about the details, and while this guide is by no means comprehensive, you now have a good outline of the process and a sense of some of the challenges you’ll encounter, along with ideas for solving them. If you run into challenges along the way, share them in the comments below. Now get migrating!
(al)
© Jonathan Wold for Smashing Magazine, 2013.
]]>Breaking its own restrictions, Google will show developers how to build any kind of app for Google Glass.
Google has set plenty of restrictions on the functionality of apps for Glass, the head-mounted display it is now shipping out to early adopters. At the company’s annual developer conference, I/O, which kicks off today, it will show app creators how to break those rules.
]]> |
| "Take a Bite Out of Stress!" - The Spring 2013 Shark Week-Themed Stress Free Zone T-Shirt |
In this follow-up to the the Create an Static HTML5 Web Project in Eclipse article, Rob Gravelle explains how to use Eclipse Juno's auto-complete feature, the WYSIWYG (What You See Is What You Get) Editor, and how to create your own HTML5 templates.
]]>