    
|
|
|
UMBC is fortunate to have so many talented and dedicated Exempt and Non-Exempt staff working in support of our mission. We encourage administrators, faculty, and staff who are familiar with the contributions of our outstanding staff to nominate them for one of these prestigious awards:
Descriptions of the three different kinds of awards and the eligibility requirements for each, along with a nomination form, can be found on the UMBC Staff Awards website. The Staff Awards Committee (SAC) requires submission of only one nomination letter and completion of a brief nomination form, along with the nominee’s resume or job history form. Nominations should be forwarded to the attention of the SAC, in the Office of the Provost, by Sept. 16, 2013.
If you have questions about staff awards, please address them to Beth Wells, Assistant Vice Provost for Academic Affairs, at bwells@umbc.edu or 410-455-8907.
]]>Whether you are working alone or with a team of people, launching a new business will take lots of time and effort. Internet-based companies are somewhat easier because there are no requirements to handle physical products. Granted, physical products come into play if you are managing an e-commerce store. However creating digital products on the Internet provides a more lucrative method of launching and scaling quickly.
But what type of tools would be useful when just getting started? I have put together a collection of webapps and resources that you can use for any new project launch. There are often so many details to remember and it is easy to get lost in the myriad of choices. But you should make the time for testing these different tools and see which ones provide the most benefit to your workday.
The biggest problem I always run into is keeping everything organized. What needs to be done and what order should these to-dos be completed? The best way to keep yourself organized is by using a task management system. But there are countless solutions out there, so it’s tough deciding which is best. It all comes down to what you are personally looking for and how much functionality is required for yourself or a team.
The task management tool Asana works great for any type of company. Even if you are working alone by yourself, their interface is really simple for managing project tasks. Plus you can invite people into specific tasks as needed. I think it is a great place to start with a free account and see how you like the features.
Another free solution Teambox also puts a lot on the table. I am enticed by their backend interface features which allow for multiple project workspaces. This means you can organize tasks between different online products or even completely different companies. Also Teambox has a conversation feature where you can message other members on your team. It is definitely worth some consideration if you are looking for a free tool that’s also easy to learn.
To mention just one more resource Trello is a great webapp that comes attached with a free price tag. You can signup and invite team members to your projects forever on this free account. It does not offer as many features as you will find in other project management tools. The interface is a bit simpler and much more focused on tasks/projects rather than team collaboration. But if you like the interface then it is a wonderful solution for any new business.
Online cloud hosting platforms are often much more agile for sharing files between computers. It’s a different story when you consider web hosting and CDNs. But consider sharing a .zip of your latest website HTML with two co-workers located at different places around the world. It would be easiest to upload the zip archive onto a hosting client and then share your link with both people.
Dropbox is a powerful solution for keeping your files organized and sharing entire folders with other people. It also offers a free plan which does limit the amount of files you can host. But this storage space limitation can be upgraded by inviting new people onto the service. I really like their web interface because you can drag-and-drop files to upload into your account. Also you can download entire folders of content as .zip containers right from the website! It has a great system for collaborating with other teammates and I highly recommend that everyone should have a Dropbox account.
People often forget about Google Drive, which comes out-of-the-box offering 15GB of free storage space with every Google account. Drive is generally meant for handling online documents including spreadsheets and presentations. But you can also upload other types of media for sharing with your team members. For a free service run by Google it does provide a nice allotment of features. But just the document viewing & sharing functionality puts Drive well above many other competitors. Box.net is another similar webapp you might consider.
If you have a great product then you will likely want to create an online presence. Consider registering a new account on networks like Twitter, Pinterest, Facebook, and and others. It will boost your website’s visibility and help people find you quicker. But what kinds of tools are useful for managing all of these profiles?
This newer product GrabInbox has not been online for too long. It is a service which allows you to manage a set network of accounts from Twitter, Facebook, and LinkedIn. You can schedule messages to post at certain times while also checking user responses. Signup is free but for now it’s difficult to tell how the company will progress. If you like demoing these tools as an early adopter then I say go for it!
Now HootSuite is a much more professional solution which has been tried & tested by many other companies. Their free service is phenomenal when you don’t have money to pay for a pro or enterprise account. You can easily manage social profiles from Twitter, Facebook, Google+, and other common networks. I would recommend trying HootSuite and sticking to them if you like the service. It is simple to use and you’ll never be forced to upgrade from a free account.
Throughout the early phase of launching your product there will always tweaks worth making to the user interface. Nothing is perfect during its first inception, but how do you know exactly what needs to be retouched? There are plenty of tools online for testing various analytics and UX ideas. I want to share just a couple that may prove useful to a majority of Internet projects.
BrowserStack is not a free service but it does provide great support for browser testing. You can quickly generate screenshots from any web browser over the various Operating Systems. It will save time when squashing bugs if your site isn’t rendering properly for a certain browser version. Plus you can run tests on more complicated features like JavaScript or responsive CSS within legacy browsers.
One tool I can really get excited about is Visual Website Optimizer. This allows you to run A/B split testing on your website and track user analytics to learn from the results. I have been very impressed with the many case studies involving big-named corporations. When first getting started you may not have a need for A/B testing – or even understand why it’s helpful. But optimizing the user experience is crucial for obtaining the best results and delivering the best product out to your visitors.
If you are working with customers then it is best to have some type of support management application. Even if you are building a startup or webapp for people to use freely, it helps to garner feedback. Your audience knows what they like and what they don’t like. So with enough testing and great feedback you can fine-tune any project to be working as efficiently as possible.
Intercom is an online service for handling user support problems. This includes a typical web-based helpdesk along with customer relationship management tools. Intercom is a beautiful system for overseeing a project with clients or customers. Even a free social networking site may find Intercom useful for managing support questions. Their free plan is a great way to play around with the features and determine if Intercom can really benefit your project.
The web application UserVoice is perfect for handling more direct feedback. You can setup a tiny widget on your site where visitors may directly send messages to your account. It also works as a support system with organized backend tickets. This is a great all-around solution for handling feedback and support problems within a project. Their plans can range up to $100/month but you may also keep the free plan indefinitely for one account.
Lastly the startup TrackDuck is not known all too well, but it is a very powerful tool. You can setup a tiny box in the corner of your site where visitors can send feedback about the interface, potential bugs, and really anything they want. It can integrate with other applications like Basecamp for easily tracking user feedback. Plus there is even a free edition which provides all the basic services for one account! I would definitely recommend TrackDuck if you are just getting started with user feedback tools and want to test the waters.
There may be other categories of webapps and tools that can really help entrepreneurs manage their projects. I put together this collection of specific tools which really helped me, and I hope some of these tools will help others as well. But if you know about similar resources that I may have skipped please share with us in the comments discussion area.
The post Helpful Tools and Resources for Managing a New Internet Business appeared first on Treehouse Blog.
]]>The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a "postprocessor" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain.
Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed.
All you have to do is add it to your asset building tool (Grunt, for instance) and you can totally forget about CSS vendor prefixes. Just write regular CSS according to the latest W3C specifications without any prefixes. Like this:
a {
transition: transform 1s
}Autoprefixer uses a database with current browser popularity and properties support to apply prefixes for you:
a {
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}
Autoprefixer logo by Anton Lovchikov
We can, of course, write vendor CSS prefixes by hand, but it can be tedious and error-prone.
We can use services like Prefixr and text editor plugins, but it is still exhausting to work with big blocks of repeating code.
We can use mixin libraries with preproccesors like Compass for Sass or nib for Stylus. They solve a lot of problems, but create other problems instead. They force us to use a new syntax. They iterate much slower than modern browsers do, so a stable release can have a lot of unnecessary prefixes, and sometimes we need to create our own mixins.
And Compass does not really hide prefixes from you since you still need to decide on a lot of questions, for example: Do I need to write a mixin for border-radius? Do I need to split arguments for +transition by comma?
Lea Verou’s -prefix-free came closest to solving this problem, but using client side libraries is not such a good idea when you take end-user perfomance into account. To avoid doing the same job again and again, it is better to build CSS once: during asset building or project deployment.
Instead of being a preprocessor – such as Sass and Stylus – Autoprefixer is a postprocessor. It doesn’t use any specific syntax and works with common CSS. Autoprefixer can be easily integrated with Sass and Stylus, since it runs after CSS is already compiled.
Autoprefixer is based on Rework, a framework for writing your own CSS postproccesors. Rework parses CSS to useful JavaScript structure and exports it back to CSS after your manipulations.
Each version of Autoprefixer contains a copy of latest Can I Use data:
By default, Autoprefixer will support 2 latest versions of major browsers, much like Google does. But you can choose, what browsers are supported in your project, by name (like "ff 21") or by pattern:
Then Autoprefixer calculates which prefixes are required and which are outdated.
When Autoprefixer adds prefixes to your CSS, it doesn’t forget about fixing syntax differences. This way, CSS is produced according to the latest W3C specs:
a {
background: linear-gradient(to top, black, white);
display: flex
}
::placeholder {
color: #ccc
}compiles to:
a {
background: -webkit-linear-gradient(bottom, black, white);
background: linear-gradient(to top, black, white);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
:-ms-input-placeholder {
color: #ccc
}
::-moz-placeholder {
color: #ccc
}
::-webkit-input-placeholder {
color: #ccc
}
::placeholder {
color: #ccc
}Autoprefixer cleans outdated prefixes as well (from legacy code or CSS libraries like Bootstrap), so the following code:
a {
-webkit-border-radius: 5px;
border-radius: 5px
}compiles to:
a {
border-radius: 5px
}So after Autoprefixer, CSS will contain only actual vendor prefixes. After Fotorama switched from Compass to Autoprefixer, the CSS file size decreased by almost 20%.
If you still don’t use any kind of tool to automate the building of your assets, be sure to check out Grunt. I highly recommend to start using build tools. This can open you a whole new world of “sugar” syntaxes, time-saving mixin libraries and useful image processing tools. All of developers’ productivity methods to save a lot of nerves and time (the freedom to choose languages, code re-use, the ability to use third-party libraries) are available now for front-end programmers.
Let’s create a project directory and write simple CSS in style.css:
a { }For this example, we will use Grunt. First, we will need to install grunt-autoprefixer using npm:
npm install grunt-cli grunt-contrib-watch grunt-autoprefixerThen we should create Gruntfile.js and enable Autoprefixer:
module.exports = function (grunt) {
grunt.initConfig({
autoprefixer: {
dist: {
files: {
'build/style.css': 'style.css'
}
}
},
watch: {
styles: {
files: ['style.css'],
tasks: ['autoprefixer']
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
};This config enables the compilation of style.css to build/style.css using Autoprefixer. Also we will use grunt-contrib-watch to recompile build/style.css every time style.css changes.
Let’s start Grunt’s Watch:
./node_modules/.bin/grunt watchNow, we’ll add a CSS3 expression to style.css and save the file:
a {
width: calc(50% - 2em)
}The magic has just happened and now we have a build/style.css file. Grunt detected the change in style.css and launched the Autoprefixer task. Autoprefixer did find the calc() value unit, that needs a vendor prefix for Safari 6.
a {
width: -webkit-calc(50% - 2em);
width: calc(50% - 2em)
}Now we’ll add a little bit more complicated CSS3 to style.css and save the file:
a {
width: calc(50% - 2em);
transition: transform 1s
}Autoprefixer already knows that Chrome, Safari 6 and Opera 15 need prefixes for transition and transform. But IE 9 also needs a prefix for transform, which we used as value in transition.
a {
width: -webkit-calc(1% + 1em);
width: calc(1% + 1em);
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}Autoprefixer is designed to perform all the dirty work for you. It will check the Can I Use database, write all the prefixes needed and it does understand the difference between specifications as well. Welcome to the future of CSS3 — no more vendor prefixes!
Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way is a post from CSS-Tricks
]]>|
|
Do you find that many of your web design projects start with great energy and clarity, only to slow down and get hairy a few weeks in?
I will discuss the typical problems that arise in web design projects, common solutions many of us have tried, and what actually worked for my company after 8 years of business: the Action Register.
The Action Register is a spreadsheet that my web design company uses.
This simple spreadsheet is a listing of tasks that need to be done to complete a web design project.
For each task, the Action Register spreadsheet tells you:
You can download a template of the our Action Register spreadsheet here.
In my web design agency, we use the Action Register for clients down the street and across the planet.
It has kept our web design projects running smoothly, even when unexpected things happen.
Before you decide to use the Action Register, you probably want to learn about it first.
So, allow me to go over how the Action Register is going to save you time, money, and drama.
We will look at how the Action Register helps us prevent common web design project problems. Then we’ll pull it all together by showing you a simple process you can use to manage project execution and client meetings.
Projects depend on people taking actions in order to move the project forward.
When someone doesn’t do what they’re suppose to do on time, it can affect other project tasks, causing the whole project to stall.
We want to avoid that. As quickly as possible, we want to complete the project, have the client benefit from what we built, and get paid.
A regular web design project bottleneck is when the designer or developer is waiting on the client to provide certain things in order for his work to proceed.
Usually, clients are pretty excited to start the project at the kick-off meeting. It’s the weeks after the meeting that things tend to slow down or even stop.
Why? Did the client not understand what they needed to do? Not usually.
Clients get busy, and their day gets filled up quickly, just like ours.
A similar situation is when you’re working with a subcontractor who doesn’t take action on time. No one wants to be late, but it does happen.
At my company, we’ve tried a number of things to try and solve the issue of projects stalling because of the lack of action.
These things didn’t work well by themselves:
It’s one thing to verbally agree to do something at some date, but to have your name on a task with a clear deadline you’ve agreed to, is completely different — it motivates people tremendously to get the task done.
Everyone wants to save face and look good. We might as well work with human nature rather than against it.
Having a kick-off meeting that goes through the Action Register gets you and your client in sync from the get-go.
Related content: Read about how to get your web development projects off to a good start if you want to learn about kick-off meetings.
Come to your kick-off meeting with the tasks in the Action Register filled out as much as you can.
If you and the client have already agreed on a target completion date for the project, make a task for “Launch” or whatever the final task is, and assign it that date. Then, work your way backwards through the necessary tasks needed to get the project to this point.
Doing this with the client will not only show them that you care about the success of the project and about serving them well, but if they are part of this process, they will be more likely to buy into the website production plan and take ownership of the tasks they need to fulfill in order to complete the project.
Through this simple process, you may realize that there are a few other tasks that must be done in order to really complete the project. Now is the best time to identify those tasks and assign them to whomever should do them.
Should you use the Action Register to list what you need from the client?
Yes!
At my web design company, we put the items we need from the client into the Action Register as tasks that are assigned to the client.
It’s really clear what is needed, what has been provided, who needs to provide it, and when we should be expecting it from them.
Plus, we have minimized how many project management docs we have floating around.
At your kick-off meeting, you would review what needs to be done by going over the Action Register with your client.
Every client we have done this with has been impressed by our organization, attention to detail, and determination to make it a smooth experience by taking the time to set up this process.
You need to review every task item with the client and confirm who is doing what and by when.
The client may ask you to make a few adjustments if they are afraid of not being able to meet a task’s deadline. This is actually good. This means that the client is carefully considering how they can realistically make good on their commitments to you and the success of the project.
Once you’re in agreement on these tasks, you’re ready to start the work because you’ve laid the foundation that facilitates and promotes commitment for the rest of the project.
After the kick-off, you need a way to continue to manage expectations on the project execution.
Even though you worked on an initial schedule at kick-off, it probably becomes irrelevant as soon as something unexpected happens.
I will list out the different types of expectations and identify how the Action Register handles them for us.
Timeframe
Because the Action Register shows a Start Date and End Date for every task, it’s crystal clear when a task should start and when it should be completed by.
If something affects the start and end time of a task, it can be changed, with agreement from the client.
Priority
Every project has a limitation of resources — whether it’s money, time, people, a combination of a these things, whatever.
When it comes down to it, you need to prioritize tasks whenever unexpected events happen.
In the Action Register, you can easily adjust start and end dates to prioritize tasks.
You can also use the Actual Hours and the $ Amount columns to tally up how much work you already have, to show you and the client if or how to factor in a new task.
Scope
It’s inevitable that the client or your team will discover a need to add some new tasks beyond what has already been agreed upon and approved.
Related content: Do you want to know how to minimize the addition of new tasks in your projects (in project management terms: scope creep)? Read about how to avoid unscoped work from unreasonable clients.
By listing these as new line items in the Action Register, they become separate tasks to be handled. If you need approval from the client to do the task, you can put the Estimate in Hours (or $ Amount) in and set the status to “Needs Approval”, and make sure to review at your next meeting.
The client then has the opportunity to fully understand the effect of adding the new request.
We have had clients that have a tendency to add more and more tweaks to the project and expect the same deadline to happen.
Once we started putting in estimated hours and how much it would cost them for us to be able to complete the new tasks, our clients would make these requests more carefully since they saw how it could affect the project’s completion time, require them to do additional work, or add cost to the project.
Invoicing
Ever had a client say “I didn’t know I was going to be billed for this” or “I didn’t realize it would cost this much”.
It happens.
Maybe you weren’t clear.
Maybe the client doesn’t remember.
Whatever the case, you can avoid this — and we have — by using the Action Register as the backbone of the project execution and by reviewing it regularly with the client.
The Estimate in Hours and/or $ Amount columns make it totally clear what the cost will be.
The Status column makes it clear if something was approved or not.
Responsibility
Like we talked about above, by assigning every task to a person, it is clear who should do what.
There’s no more, “Well, I thought Jessica was doing that” and “I didn’t know I was suppose to do that.”
If someone isn’t doing their work or has left the team, their tasks can be reassigned to another person.
Tracking the Details
There is also a Comments column for adding details on the task items. Use this column for any additional details about what you and the client specifically agreed upon.
You can avoid or minimize the “I thought it would work differently” situations by adding clarifying comments to the Action Register.
Case in point: We have a few clients that are perfectionists. It’s easy for them to come up with a new idea to tweak something about their project without realizing these ideas may require plenty of hours of additional work.
That scenario happened frequently and it weighed us down.
Once we employed the Action Register into our weekly meetings, it became obvious to the client that these new tasks don’t always fit into the project agreement.
The client would then agree that some of their new requests weren’t really that important, or at least they would be OK with doing them later on.
What happened? By fleshing out all the desired tasks into the Action Register, we made it clear as day what was on the list to be done and as well as the needed resources to do them.
The client could plainly see when there’s a problem and offered a solution to prioritize some over others.
Related content: Learn how to decline new task requests by reading about the most powerful word known to mankind.
Using the Action Register really begins to help you when you use it to run your regular client meetings and schedule your work week.
Let’s go over a simple process which you can use to cater to your own situation and style.
On Monday, or whatever day of the week works best for you, block out time to sit down and review all your active tasks in your Action Register.
This is your time to fully understand the status of each of your projects.
If you or your team members are responsible for a particular task, get it on your/their calendars.
If you are unsure of the status of a task, now is the time to find out. You will save time by knowing for sure, rather than kinda thinking it’s done and then finding out later that it really isn’t.
Once you get into the habit of doing this weekly Action Register review, you will find that your head is much clearer and you won’t worry where you are in terms of the project’s progress.
As you and your project team members complete tasks throughout the week, update the Action Register.
If the task needs tweaks before really being complete, request the tweaks.
If a task is actually complete, update the appropriate task item with the Actual Hours and set the Status column to “Complete”.
Schedule regular meetings with your active clients.
Having a quick phone meeting every week or every other week can make projects go more smoothly.
These regular meetings have an agenda that goes like this:
You can save many back and forth emails by having the client bring observations, ideas, and questions to the meeting to discuss rather than emailing on a whim. Unless of course it’s something urgent.
Doesn’t it all just seem like common sense? Like with anything else, the more experienced we get, the more we see things in a simpler, more straightforward way.
The results of using the Action Register:
In the end, you’ll get to focus more time on the part of your work that you love the most: Building websites.
Steve Schmidt is the President and Web Strategist of Effect Web Agency. Since 2005, Effect Web Agency has been serving clients with web design, web development, website planning, SEO and empowering people to make smart web marketing decisions. Connect with Steve by heading over to Google+.
The post Manage Your Web Design Projects Better with an “Action Register” appeared first on Six Revisions.
]]>
 |
Today, we are pleased to introduce Type & Grids, a free responsive HTML5 template by Jeremiah Shoaf. It looks great on all devices, including desktops, laptops, tablets and phones. All of the content resides in a single HTML file, so setting it up is super-simple.
Its extensive customization options set Type & Grids apart from other templates out there. The template has 21 type themes and 29 color themes built in, giving you over 500 unique design combinations. Type theme number 21 is a bonus theme that Jeremiah has created exclusively for Smashing Magazine’s readers — it features the beautiful font Alegreya.
Each type theme is meticulously handcrafted, with attention paid to the smallest typographic details. The 16 thumbnail shape variations and 58 background textures that are included allow for a nearly endless combination of design styles — no two Type & Grids websites will look the same.
index.html, to add your own content.
Here’s what Jeremiah Shoaf has to say about his thinking behind the design:
“I created Type & Grids to use for my own design portfolio website. I’m the type of designer who is never happy with the final design, and I will just keep tweaking things forever. I’ll create one color scheme for a website and then get sick of it and create a new variation.
So, I decided to create “theme” CSS files for each color variation and for each typographic variation. This makes it easy to satisfy my need to constantly change things up. I ended up with 20 type themes and 29 color themes. When I turned Type & Grids into a template, my goal was to make it as simple to set up as possible. Other templates and themes out there seem to pack in so many features that the website ends up feeling bloated and difficult to use.
I tried to limit the features of Type & Grids to just the bare basics. So, I feel it’s a great solution for someone who wants to set up a simple website quickly. And the design customization options make it easy to make your website look unique and not at all like a template.”
Thanks for your fantastic work, Jeremiah!
(al) (ea)
© The Smashing Editorial for Smashing Magazine, 2013.
Cloud computing is one of the buzzwords in the web design and computing industry that seems to have a very simple definition, but a myriad of uses. It is a phrase used to define the use of the internet and remote servers to store and manage data.
A popular example is Google Docs. You can create and work on your document on the internet, and when you save it, the file is also saved on the internet. Of course, while downloading it to your computer is always an option, most of what happens is on Google’s server.
There are a number of benefits to this method of working.
You can assume that since you are using a company as large as Google that all of your documents will be safe, plus you have reduced hard drive usage and are using less resources to create the document.
Today I want to talk about two cloud computing applications: Amazon Simple Storage Services (S3) and Amazon CloudFront. What these two services do is save files from your website onto Amazon’s remote servers, and serve these files to your user from multiple locations in the world to optimize loading time and file delivery, respectively. Amazon CloudFront is what’s normally called a Content Delivery Network, or CDN for short. There are many services like these available, but due to the flexible pricing structures of each, and the reliability of Amazon, they seem to be a fan-favorite for cloud-based services.
Now that you have a little background on cloud computing and the Amazon services we are going to be focusing on, what exactly are we using them for? Well, I am going to show you the simplest way to upload all of your WordPress website files to Amazon S3, and then use CloudFront to deliver these files in the quickest way possible.
The first step to take is signing up for both Amazon S3 and CloudFront. You can do so by going to this page: http://aws.amazon.com/s3/, and once you sign up for one of the services, you will have all of them at your disposal. You only pay for what you use, which is what makes the services provided by Amazon so great. So once you’ve signed up, you can head on over to the Amazon Web Services (AWS) Management Console http://aws.amazon.com/console. Once you sign into the AWS Console, you can see all of the services that Amazon offers. The AWS Console is where you will manage any of the services you use, but for now we are just interested in S3, so go ahead and click that link.
The user interface is pretty minimal and is actually super easy to work with. We are first going to click on “Create Bucket” to create the bucket for our WordPress site. A bucket is effectively a container for all of your files. All it does is identify what website we are storing files for, and then holds them. You can name your bucket whatever you want, but your website or project name would probably make the most sense.
Now, we’ll stay in the AWS Console, but navigate to the CloudFront area by clicking “Services” in the top navigation.
Now, all we have to do is click on the “Create Distribution” button, and from the two options select “Download”, as it will use the S3 bucket that we created previously. Click “Continue” and you can select the “Origin Domain Name”, which will just be our S3 Bucket. Now click on “Create Distribution”. You should see the distribution show up on our CloudFront dashboard. Once the Status column says “Deployed” and State says “Enabled”, your website is moving from Amazon S3 to the CloudFront CDN.
Now that we have our bucket created, we have to set up our WordPress site to communicate with S3 and start to upload all of our files. We are going to be using a popular WordPress Plugin called W3 Total Cache because not only does the plugin have features for easily working with S3 (and any CDN for that matter), it does a great job of speeding up your website using the best caching techniques — describing the caching side of W3 Total Cache is outside the scope of this article, but you can find a great tutorial here.
Once we have the plugin installed and activated, we are going to navigate to the General Settings within the plugin options. Once there, scroll down until you see the options for CDN. Make sure you check enable, and for CDN Type, scroll down to Amazon CloudFront underneath Origin Pull/Mirror, and click “Save all settings”.
Once we’ve set CloudFront as our CDN, we can now navigate to the CDN page within the plugin options. Ignore the General options at the top, and scroll down to Configuration. Here we are going to enter in our Access key ID, Secret key, and tell the plugin what S3 bucket we want to store our files in. To find your Access key and Secret key, simply click your name when logged into the AWS Console, and click “Security Credentials” to receive the necessary information. Once you have that information in, your buckets should automatically come up, so just make sure the correct one you want to use is selected. Don’t mess with SSL support or CNAME for now, just click the “Test S3 upload” button. After a minute or so you should get a message that says “Test passed”. If you do not, you may have one of your keys wrong. Once you have passed the test save your settings and now we’ll start to work with the General settings on the same page.
Now that we have everything set up, it’s time to get to the exciting part. We are going to start uploading our files to Amazon S3 using W3 Total Cache. In the General settings for CDN, I recommend checking the following options and saving them:
This will host all of your attachments, theme, and WordPress core files on S3 so almost your entire site will be served from Amazon S3. We are going to go in reverse order as we will be uploading our theme files first, then our wp-includes files, and lastly our host attachments. Go ahead and click on “Upload theme files” and you will see a popup come up.
You will see the total number of files you have, and you can click Start. You will see progress as the files upload, and also identify any problems that may have occurred in the upload process. Uploading is usually pretty quick, and should only take a minute or two, depending on your internet connection, to upload the theme files. Next we will do the same thing for our wp-includes files and get those uploaded to S3.
I chose to do the Host attachments last because personally, that was the longest process of getting all of my files uploaded to Amazon S3. I have a large blog, with over 11,000 images. If you want to reduce the size of your images and consequently, the time it takes for them to upload to S3, I highly recommend checking out the WP Smush.it plugin. Now you can go ahead and upload all of your image attachments. It may take you a while depending on your internet connection and number of images. I had to let the service run for half a day just to get all of my images uploaded.
Congratulations, your website should now be hosted on Amazon’s S3 service, and all of the images on your website should be pulled from your Amazon CloudFront distribution; you can check by right-clicking an image and checking its location URL.
If you are more a fan of WP Super Cache, an alternative caching plugin for WordPress, you’re in luck: setting up Amazon S3 and CloudFront is just as simple as using the former plugin.
To start, you will need to install and activate the plugin. You activate the plugin by simply checking the “Caching On” radio button on the “Easy” tab of the WP Super Cache Settings. This will get the WP Super Cache plugin to start working.
Next, navigate over to the CDN tab, and make sure “Enable CDN Support” is checked, and then we will enter in our CloudFront URL. You can find this URL by navigating to the AWS Console and looking at the Distribution that you just created, and it will be under the “Domain Name” column. It should look something like xxxxxxxxxx.cloudfront.net. Don’t change any other settings, just click the “Save Changes” button.
Unfortunately, the WP Super Cache plugin does not include a way to automatically upload all of our WordPress files to our Amazon S3 bucket. This means we will have to install the CDN Sync Tool plugin for WordPress. Install the plugin as you normally would, then navigate to the options page.
We will first be working with the CDN Options tab, and fill in our Amazon S3 information. Make sure S3 is selected from the CDN dropdown menu. Next, type in your Amazon S3 domain name, for example domainname.s3.amazonaws.com, and type in your Access Key and Secret Key, which you can retrieve by clicking your name when logged into the AWS Console and then clicking “Security Credentials”, and type in the bucket name that you used earlier in this tutorial. Click the “Save and Test Changes” button.
Navigate to the Sync tab, and select whatever files you want uploaded to the CDN. Click on the “Sync” button and this process will happen for you.
Now all of your files should be synced up with your Amazon S3 bucket and the WP Super Cache plugin should be serving all of your files through CloudFront.
That’s it. Your website should now be hosting all of its files from Amazon’s Simple Storage Service and distributing them through the CloudFront content delivery network using your preferred WordPress caching plugin. If you are like me and don’t want to continue hosting those pesky media files anymore to save your VPS space, here are a couple of plugins you might want to check out:
Both of those plugins will upload files directly to S3 and make sure they don’t reside on your own server; be sure to read the description for both to see how they work.
Have you migrated your site to the cloud? What services did you choose to use? Let us know in the comments.
Featured image/thumbnail, cloud image via Shutterstock.
| Popular Port Font Family – Elegance With Modern Twist – only $24! |  |
|
|
|
|