Wicked Webmaster's Workshop: A Twisted Toolbox
Whether you’re building sites for friends once in a while or generating an income, being organized and taking the time to understand all the tools available to you is worth it. This blog contains a few suggestions for creating your own webmaster’s toolbox. Many times, just like with Joomla and WordPress, you’ll only need a web browser because many useful applications are online and if you find the right mix of applications there will be more than enough features to get the job done.
Starting at Square One: Selecting a Web Browser
As you develop websites, it’s always best to conduct cross-browser testing, but chances are strong that you’ll settle on one browser where you do most of your work. Windows users typically start out with Internet Explorer and eventually move onto something else like Mozilla Firefox, Opera or Google Chrome. Mac users will find Safari included with the MacOS, and Linux users will usually find Mozilla Firefox with the default install. The web browser you use most often is up to you, so get something you are familiar and comfortable with.
Communication & Collaboration are Key
The next thing we should talk about is talking. Having a discussion about a project over the phone or in a meeting with the mandatory cup of coffee is great, but that won’t get you very far if you’re not taking notes and creating a tangible plan. The good news is that there are many collaboration tools (both commercial and noncommercial) that are web based and available through a mobile or desktop application.
If you’re project is complicated, requires planning, has deadlines, involves testing or marking milestones, you’ll need something pretty sophisticated. If that’s not the case, usually a shared spreadsheet or document will do. In any case, you should absolutely, positively be aware of Google Apps for Work. Not only does Google Apps include GMail, you also have a Google Drive that allows you to easily share documents, spreadsheets, drawings and collaborate in real time with your associates.
Your Google Drive is a so-called “cloud-storage system” because everything you create is stored on Google’s servers and it saves automatically so you never have to worry about backing up a file on your machine or losing a file if your machine crashes. Speaking of cloud storage, there are other providers like Dropbox, Copy.com and OneDrive that allow file and folder sharing. One downfall of these is that the other user has to subscribe to these services as well. I started using Goolge Apps because it keeps a revision history of your documents but also because it allows anonymous access for non-registered users. Visit this list popular cloud storage systems to learn about more service providers.
On the other hand, if you’re in need of something more sophisticated, you may want to consider a project management software. The vast majority of good project management systems are commercial, but they’re usually worth it especially if you have multiple people working on a project. Notable systems we’ve worked with include Basecamp and Teamwork. I won’t go into too many specifics, but these systems allow for time tracking, reporting, assigning tasks, milestones and deadlines. There is a learning curve to understand the features, but once you get the hang of it and get into habits, working on and managing projects is much easier.
Is Time on Your Side?: Time Management Tools
If you’ve got a web-based business, chances are strong that you’ll be working with people in different time zones and it will be helpful to use sites like everytimezone, thetimenow (also for the sight-impaired), worldimebuddy, or timeanddate, but only if you don’t want to wake someone up at 3 a.m. to ask a question about font size.
Content is King: Selecting a Content Management System
Once you have a basic structure for the project it’s time to get to work. You’ll need two hands, a set of eyes, a brain, a comfortable seat and a lot of coffee. You’ll also need a content management system (CMS). (Because we’re a CMS-oriented hosting company, I’m working from the assumption that your project will work with WordPress or Joomla in some significant way.)
This is a little bit of a shameless plug, but just in case you’re unfamiliar with our platform, we offer free Joomla and WordPress hosting. You can launch a site for free, and it will stay active indefinitely as long as you renew the site in your Cloud Control Panel™(CCP). Go ahead, launch a free site, play with it, break it, reset it, break it again - that’s what they’re meant for. If you need more site resources, some help from our support team, or a custom domain name you can always upgrade to one of our hosting & support packages.
It’d be silly if we didn’t acknowledge that there is a learning curve for every CMS, but we’ve created a lot of training resources to help you learn Joomla or WordPress. We’ve got a multi-part video tutorial series for new Joomla and WordPress users and we’ve got a number of free & live upcoming webinars and recorded webinars on a variety of topics. If you are a new user, explore both Joomla and WordPress to see which CMS suites you and your clients better.
Learn your Template, Know your Template, Love your Template
The best thing about Joomla, WordPress, or any other CMS is that they are extensible. After selecting the CMS that you’d like to use, you’ll want to start shopping for a template that has a look, feel and layout that matches your site. A template provides a framework that ties together features of the CMS (menus, articles, posts, modules, etc).
Choosing the Right Template: All Things Considered
Recommended 3rd Party Joomla Template Providers
The key point is to know what you are using. It will take a few tries to really get the hang of your template, but when you find your favorite template, you’ll be able to unlock it’s true potential and that’s when the real fun begins.
Understanding Extensions & Plugins
Just like Lego blocks, you can build upon your site by adding templates, themes, extensions or plugins to increase the site’s functionality. Regardless of which CMS you’re using, there are so many choices out there to extend the site. Here are a few links to useful pieces of information that have helped our clients a great deal:
Joomla Extensions Explained: Types & Tips for Finding the Right Extension
Tutorial: Using WordPress Plugins
Looking Under the Hood - Using File Transfer Protocol
You may, from time to time, need to look under the hood of your site and modify site files. To do this you’ll need some type of file transfer protocol (FTP) client, which will help you connect to the site on the server level. There are many FTP clients available including WinSCP (Windows), Transmit (Mac OS X) and FileZilla (all platforms). I prefer FileZilla because it’s open source, for all platforms, and it works great when I need to upload many files, like a directory full of photos.
Accessing a site file in FTP can be really convenient if you need to need to make a small fix in a CSS or PHP file, but it’s important to note that you really shouldn’t be messing around with core site files unless you’re at least a little familiar with the code. I’ve included a section below on CSS Modifications that will help if you’re just learning.
Images Tell a Thousand Words: Stock Photos & Photo Editing Tools
Speaking of photos, finding and editing imagery for your project will probably be really important. Uploading images
directly from your 8+ megapixel camera is a big no no. These images are usually way too big and, if uploaded to a site, usually slow down page loading times tenfold. Instead, resize the image to a more website-friendly format using tools like picresize,webresizer, resizeyourimage, or shrinkpictures. These tools allow you to resize and/or crop images so they look good on your site and don’t eat up the bandwidth both for your site and on the visitor’s end.
If you need to adjust brightness or add different effects to imagery, that’s not a problem. There are other great resources to consider including pixlr, befunky and FotoFlexer. If you’re using any of these applications, they may save you from downloading GIMP or buying Photoshop, but they do come with some limitations which eventually might force you to switch to their desktop counterparts.
Sometimes you’ll need a generic image for a background or something eye pleasing for a large chunk of text, but you just don’t have a good picture of your own. In that case, a stock image would work well. Fortunately, along with paid sites like Shutterstock and iStock, you’ll find sites that literally give away good quality photos under a creative commons license. These free services are usually intended for individual use, but in many cases they can be used for commercial use as well. Here are three different blogs to help locate free stock photos:
14 Amazing Sites With Breathtaking Free Stock Photos
16 Places to Find the Best Free Stock Photos
50+ Sites to Get Original Free Stock Pictures for Your Designs
When talking about imagery, another really important tool is the markup tool. Some web browsers have plugins that can help you create markups. Notable browser plugins include Jing and the Firefox Quick Markup add-on and there is also an online tool called Szoter. These can be really useful to capture screenshots and add notes to images so everyone knows exactly what you’re referring to when it comes to a misspelling or a 1-pixel border on a site that just doesn’t look good.
The Devil’s in the Details - Creating Favicons
To really make a site look customized and professional, you’ll want to consider adding a favicon - that’s the little image on the browser tab right next to the site’s name. Usually favicons feature the company’s logo or some other type of relative image. It’s a small image that needs to be prepared in a specific format. Our favorite tool that makes creating a favicon very easy is favicon.cc. Once you’ve created the favicon.ico file, learn how to upload the file to your site using FTP.
CSS Modifications, Text Formatting & HTML Tweaking
With the favicon in place, you can take care of that 1 pixel border that is not matching anything else on the page. modifying the CSS code can take care of small things like this. Minor CSS changes can make the website pretty. To change the code, you’ll need to know where it exactly is. Typically speaking, a Joomla template’s main CSS file is more than 1 thousand lines long, so you may need a little help finding the line that you need to edit. The Firebug addon for Firefox, the Google Chrome DevTools or the “inspect element” feature built into other browsers can help. Simply right-click the area that you are interested in editing, click on “inspect element” and you’ll get the filename and the exact line where the styling is defined.
Using these tools and a simple text editor that’s included with just about every operating system, you’ll be ready to create some CSS magic. Try some minor changes at first; change a color shade here, remove a border there, and after awhile you’ll notice that you can change anything you need.
CSS modifications are great, but what about styling the written content of the site? Joomla articles and WordPress posts and pages do “listen” to the CSS styling, but not always. This is especially true when you paste some text with rich formatting, like something from another website or a Microsoft Word document.
Tutorial: Text Formatting in Joomla 3
Tutorial: Text Formatting in WordPress
Most editors feature a “toggle editor” feature enabling you to see and change the HTML code. If you’re unfamiliar with HTML, it may look a little confusing at first, but with some help from W3schools you’ll be able to decipher the code, and hopefully, fix the styling by removing the unnecessary tags. Using the HTML version of the article is also a great way to embed a YouTube video, and people love YouTube, don’t they?
Tutorial: Embedding a YouTube Video
What’s it All Mean?
If you’ve gotten this far through my post I hope you’ve given some serious consideration to the toolbox that you want to assemble. The whole point of this blog is to let you know that it’s easy to build websites. We encourage you to get started today. We’re here to help, so please let us know if you have any questions.
