Life's easy with Medialoot.

Unlimited access for only $14/mo.

3 Ways to Get your Website Designs Up and Running Faster

3 Ways to Get your Website Designs Up and Running Faster

We've all been there before. You've created a beautiful website and are really excited to make it live, but coding may not be your strong suit and you continue to bump into problems that set you back hours! There's no way around it, right? Wrong. There are a few ways you can drastically cut down on your site coding time and make your web design a reality much sooner.

1. Outsource the XHTML/CSS Slicing

This may seem like cheating, but having someone else slice your design into CSS and XHTML can save you a ton of time. Unless you’re a slicing wiz, hiring a freelancer or a company to slice your design for you can also save you from frustration. Generally it’s best to find someone whose specialty is slicing, because they’ll be the quickest.

Pros

proYou don’t have to slice the design yourself! You’ll save at least a few hours by having someone else slice the design for you, and you can use that saved time working on a new design or project altogether.

proGenerally the cost of having your design sliced into CSS and XHTML is pretty reasonable (about $100/page). I would bet that the time it takes you to slice the design yourself is worth significantly more than the amount of money you would spend on having it sliced for you.

Cons

proYou must give very specific instructions to the person/company who is slicing your design. Be sure to include active and hover styles if you want them, and specify every element you need to be styled. You also need to mention if there is a specific method or JavaScript library you want to use for any special effects. Don’t forget to mention if there are certain divs that need to be expandable both horizontally and vertically.

proIt may take a few days for your design to be sliced unless you want to pay for rush service. How does this save you time, you may ask? If you have other projects you can design while your previous design is being sliced, you’ll be able to take on more projects. In addition, if there’s a JavaScript element that you’re not used to implementing but know you need to use on your menu, or if you’re just not strong with CSS and XHTML, it may take you more than a few days to slice the design yourself, especially if you bump into any problems.

Tips

Even if you’re not sending your design to get sliced, following these tips will allow you to gather your thoughts about the design and prepare it for coding, which will undoubtedly speed up your own coding time.

  • Organize your web design into neat and understandable layers.
  • Create a specific layer that details hover styles, active styles, and any other comments you want to make on how the site is supposed to look or work.
  • Create a “standards sheet” that outlines your coding requirements for every web design you have sliced. Include items such as valid XHTML and CSS, must display properly in x, y, and z browsers, and any specific JavaScript libraries you want your slicer to use.
  • Get a recommendation from someone who has used a slicing company before. Make sure that there weren’t too many errors in the coding. Also check on the timeliness, communication, and whether or not they allow you to send the code back with corrections after its initial delivery.

2. Choose the Right CMS

content management systems
Often enough, designers choose a CMS and stick with it. It’s understandable too. Every CMS has its own template system and plug-ins to discover and figure out.

While WordPress if often the CMS of choice these days, there are tons of other CMS out there, and choosing the right CMS can drastically improve your integration time as well as make it easier for your clients to navigate their content.

Next time you have a new project, consider the different ways content will be added and adjusted in the site, and do some research on some new systems that you’re not too familiar with. ExpressionEngine is one of our favorites (it’s both extremely flexible and powerful and it’s easy to integrate, too!), but you may want to look into Magento for a powerful ecommerce store, Drupal, WordPress, Joomla, or any number of the other systems out there.

You may also want to consider excluding a CMS entirely. Some simpler websites that don’t require a lot of updating may be better suited to HTML with PHP includes so that you don’t have to edit the header, footer, and sidebar ten times after every change.

Pros

proLearning a new content management system will drastically improve your knowledge in areas you may not be very familiar with. In addition, by considering the content carefully, you’ll choose a content management system that’s better suited to the site and allows for easier editing and perhaps more features.

proYou may also increase your client base if you pick up a content management system that is in high-demand or a new CMS where you could become one of the early experts.

Cons

proIt’s going to take time to get to know the new template system and figure out exactly how powerful the CMS is and what it can do. Of course, it will be quicker to read some reviews on each CMS you’re considering and maybe even speaking with a colleague who’s familiar with the system before diving into the system itself.

proSometimes, the best CMS for your project isn’t open source. I list this as a con, but only after much debate. While there may be an up-front cost to these systems, they’re often better developed with less bugs and more support. Be sure to check out whether or not the CMS you’re choosing has a forum of developers who are actively discussing any challenges they run into. And you always want to make sure that the CMS is releasing new versions on a regular basis and addressing any bugs or security issues that pop up.

Tips

  • It’s probably a good idea to check with your client about whether or not they have a CMS preference. If they don’t have a preference, ask them what they’re looking for in their backend. Do they absolutely need a perfect WYSIWYG editor or are they alright working with some basic HTML? Do they expect a certain CMS, like WordPress? And if so, would they be willing to check out the backend of another CMS that may work better for their site?
  • Always check out how difficult the template system is. While WordPress has a pretty easy template system, ExpressionEngine is even easier, where as Magento’s system is not for the faint of heart.

3. Become an Integration Wizard — Get Organized

After your site is designed and coded, you still need to make it editable within a CMS (unless you’ve decided to forgo the CMS and use PHP includes instead). Organizing your materials ahead of time and creating some personal SOPs will really help speed up your site integration time.

To become an integration ninja, it’s important to fully understand the integration process for your CMS and have everything in order before you set it up. I have a quick 10 step to do list for all of the CMS’s I work with, and it really helps stay on track. It also prevents me from having to back peddle, which can sometimes happen if certain steps depend on others to be completed.

The biggest thing you’ll need to have organized is the content. I’m sure everyone’s experienced the awkward situation of being completely ready to add content to the site and make it live, but your client just hasn’t gotten all of the copywriting together or they’re trying to get the last few photos of their office together. You’re stuck waiting on last minute content pieces (and usually the final payment as well).

While you can’t have total control of when your client delivers the site content, you can help smooth this process along at the very beginning of a project. Usually, I work with the client during the design process to figure out exactly how many pages they need and all of the different pages that still require copywriting or photos or any other elements. When it looks like they’ve finalized the content plan, I’ll send then an email listing all of the different pages and what they need to deliver. I also kindly remind them that their site may be held up until they can deliver all of the content.

Pros

proOrganization and planning before integrating your site into a CMS can save you a ton of time! There’s nothing more frustrating than being in the middle of a task and realizing you can’t complete the task until you resolve another issue. You waste a ton of time back tracking.

proAnother fantastic side effect to being more organized is that your clients will really appreciate your communication and professionalism. It’s important to consider how you’re handling your clients, even when they may be the ones who aren’t providing information in a timely matter. By organizing their tasks and needed elements beforehand, you’ll smooth all communication with them throughout the entire project.

Cons

proThe only downside to becoming more organized when you’re integrating a website is that it takes some patience. I know how tempting it is to throw the HTML in there right away, but taking some time to get your ducks in a row will prevent you from making silly mistakes that cost you hours of problem solving.

proIt’s also possible that no matter how well you’ve planned out your site integration, there may be some last minute requests from clients or problems you bump into that you couldn’t have foreseen. It’s okay! Just take a deep breathe and try to learn from these experiences in the future.

Tips

  • Create a to do list for your website integration process and make sure it’s in the proper order. Also include a list “needed items” in each step so that you can gather all of your elements together beforehand.
  • Take notes throughout the design process on what content you will need for the final project, and send a list of needed items to your client as soon as you can (but definitely before you start the coding and integrating process).
  • Do your research. If you’re looking for a specific WordPress plug-in that works exactly so, or you’re not sure how to integrate a specific JavaScript element, do some reading and research before digging into the code. (I’m especially horrible at this tip, and should really follow it better myself!).
  • Take shortcuts! Use your experience from previous projects to anticipate what elements may take more time or might be a bit more stressful than others.
  • Take notes! At the end of the project, write down your thoughts on the project and any specific challenges or lessons you’ve learned. For future projects, you can refer to these notes to save you time and frustration.

Sit Back and Relax!

There’s no better feeling (in web implementation…) than finishing a project without stress and knowing that you’ve done a fantastic job. Even better, by getting a project completed quicker, you just might be able to take that much-deserved day off!

How do you get your website designs up and running faster? Any tricks or tips that make the process smoother? Please share in the comments :)


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    designfollow

    designfollow

    very useful, thank you very much for the great tips.

    Apr 29, 2010 at 11:20 pm
  • Reply »
    Stephen

    Stephen

    Nice article, I particularly like the small debate over the CMS OS vs. Commercial.  Not sure if a commercial CMS is a con, or why it couldn’t be both a con and pro, but then again an OS one can fit on both categories for different reasons aswell

    Apr 29, 2010 at 11:38 pm
  • Reply »
    Xuendas

    Xuendas

    Show de bola o layout do site!

    Apr 30, 2010 at 4:23 am
  • Reply »
    Tegan

    Tegan

    The 10 step to do list is an excellent and logical idea. Why didn’t I think if that?? Thanks for the helpful tips… I’m feeling motivated to get more organised :)

    Apr 30, 2010 at 11:39 am
  • Reply »
    Natalie Hipp

    Natalie Hipp

    Thanks everyone for the comments :)

    Apr 30, 2010 at 11:57 am
  • Reply »
    Chetan

    Chetan

    Very useful tips. I m a developer and was looking for something like this.

    Thank you

    Apr 30, 2010 at 3:23 pm
  • Reply »
    Chanel

    Chanel

    Very good read and useful information. Care you share your 10 steps of organization as your next post?

    May 1, 2010 at 11:50 am
  • Reply »
    George

    George

    Great stuff. Thanks again.

    May 2, 2010 at 10:19 pm
  • Reply »
    <a href=Bournemouth W" />

    Bournemouth W

    A good article, will look at some of those other CMS that I didn’t know existed as we always looking to improve our customers requirements.

    Thank you. :-)

    May 3, 2010 at 10:38 am
  • Reply »
    Beauchamp Web Design

    Beauchamp Web Design

    great article, thanks for the tips and advice

    Jun 28, 2010 at 4:08 pm
  • Reply »
    Digital Agency Bournemouth

    Digital Agency Bournemouth

    I’ve seen other articles about something similar – but this is really well written and has much more detail – Thanks for sharing! *bookmarked*

    Jul 21, 2010 at 9:51 am
  • Reply »
    Web Design Bournemouth

    Web Design Bournemouth

    I seldom see well-written, organized and detailed articles such as this. I’m not a techie nor a web designer and I don’t know how XHTML/CSS slicing technically works. I have a vague idea of CMS systems. The article contains little technical formulas and processes that a layman like me would not comprehend. And so, I had a grasp of how these 3 ways can get your website up and running and this would be good reading material for all those like me. This is an example of quality content that we so much talk about as being good for SEO and attracting traffic to your website. I’ll definitely come back to this site so better prepare for more Natalie.

    May 31, 2011 at 9:17 pm
  • Reply »
    Perth SEO Services

    Perth SEO Services

    I enjoyed reading your article even if I’m not technically savvy because you explained your points in a neat and orderly style. I’d like to comment though that outsourcing your XHTML/CSS Slicing has its downside. While you save on your own time, you run the risk of not being able to get what you want and what your client wants if you’re doing this for a client. What if the slicing company forgot a minor detail that would nevertheless affect the design and you missed to check on this in the frenzy of the additional projects you took on to make use of time you’ve saved on slicing? Your credibility is at stake here, not the slicing company’s. Anyway, thanks for a good read.

    Jun 6, 2011 at 9:25 pm
  • Reply »
    Recruitment Software

    Recruitment Software

    Thanks for the very useful tips not only applicable in web design but in everything that we do. I really need to get myself used to ‘to do’ lists because I sometimes am sloppy and things can become cluttered and confusing. It’s hard to organize your ideas and work if things get lost and procedures are missed. It’s also very stressful when you get stuck and do it all over again. It pays to get organized because you save a lot of time, be better able to focus on your work and accomplish a lot more work. I’m bookmarking this so I have a reminder.

    Jun 6, 2011 at 10:29 pm
  • Reply »
    Bournemouth Logo Design

    Bournemouth Logo Design

    Great article, thanks for the tips.

    Jul 19, 2012 at 4:19 am
  • Reply »
    Frankie 4 Fingers

    Frankie 4 Fingers

    I seldom see well-written, organized and detailed articles such as this. I’m not a techie nor a web designer and I don’t know how XHTML/CSS slicing technically works. I have a vague idea of CMS systems. The article contains little technical formulas and processes that a layman like me would not comprehend. And so, I had a grasp of how these 3 ways can get your website up and running and this would be good reading material for all those like me. This is an example of quality content that we so much talk about as being good for SEO and attracting traffic to your website. I’ll definitely come back to this site so better prepare for more Natalie.

    Jul 30, 2013 at 9:54 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all