Previous Page

Published on November 30th, 2011

Featured Image

Intro

Do you spend time in tools like the WordPress administrator or other web based WYSIWYG tools experimenting with ideas or layouts?  Do you download plugins only to find out that despite its awesome functionally it just doesn’t look good in your site?   

Have you swapped out images only to download yet another new one, because you can’t quite make up your mind on this one or that one?  Only to repeat the process over and over again!

Logging in and out, uploading, deleting, renaming then trying to space perfectly only to change your mind again.  These small work-flow processes can eat up lots of time when repeated over and over.  If this is you, then log out of your back-end administrator tool because there is a faster and easier way.

In this article and video I’ll demonstrate some rapid prototyping techniques that I use to get ideas for how I want an article or web page to look.  I’ll show how to use some tools to edit your site without ever hitting save or refreshing your browser to get you performing fast website layouts.

Overview

Real Time Success

For you to effectively layout your content rapidly and with visual appeal you have be be able to prototype your site without editing and saving HTML directly or messing around with a slow WYSIWYG web editor that tries to output the HTML.

Web based WYSIWYG tools have come a long way but they should not be used for prototyping your ideas until your ready for the final result.

The process of tweaking HTML, navigating to a style sheet and changing a few properties. Then moving images around inside a div or a table and tweaking everything down to precision just to get an idea takes way to long. Whether your using a tool or manipulating the markup directly this really is not a good use of your time.

Even if your an HTML/CSS Ninja you still can take other approaches to layout that will help you get the fundamental feel of what your ultimately trying to create, without messing around in the markup or a WYSIWYG web tool.  

Let’s face it we tend to spend serious amounts of time trying to tweak the look of our content when we should be spending the time writing the content.  Don’t let technology slow you down, just re-shift your thinking a little bit and create a digital scrapbook of your ideas before you actually build them.

Screen Capture Scrap-Booking

Screen capture tools have gotten very high tech and can save significant amounts of time, when your just trying to get a feel for what a widget or even an image might look like on your site.  

You can use screen capture tools to rapidly create ideas and layouts that otherwise would consume all kinds of time by downloads and editing files directly.  Learning to cut pieces of your existing site and pieces of other sites or images so you can easily craft out a general feel for your layout is critical to rapid prototyping.

For example say you see a widget on a site that you like, simply screen capture it and paste it on another screen capture of your site and you’ll see really quickly if this is something you like.  If not then you wasted absolutely no time trying to install a piece of software on our site or upload an image.  Because in the end lets be honest, if it doesn’t look good we probably won’t keep it!

Harness the Power of the DOM

The DOM stands for the Document Object Model and is the foundation of every web-page. With powerful tools like Chromes Developers tools you can tap into the force of the DOM and become a Jedi moving Master.

So lets get into all these techniques by checking out the video below!  We’ll run through how you can move your site around and change things without ever refreshing your browser, and we will get you going with the basics of screen capture prototyping.

Resources

Snagit Editor
Chrome Developer Tools

What do you think?

32 thoughts on “Fast Website Layouts”

  1. The tips on Chrome Developer Tools were great – especially about moving elements around on the fly.
    You inspired me to go back to Balsamiq Mockups to use as a pasteboard for screen captures and lay out draft designs.
    I have become too caught up with in browser development and forgot the need to keep it simple and focus on concepts, ideas and planning first.
    Thank you!

    1. Hey Richard,

      I know what you mean about getting lost in the code. I really have to work to stay away from trying ‘ideas’ in code. The Balsamiq Mockups tools look really nice! I’ll have to give them a try…

      Cheers

        1. Hey Richard,

          Thanks for stopping by… I’ll have to do some research on how to make the fix, thanks for the update!

  2. Great article and video explanation was crystal clear. This was just the info I needed. Have been struggling figuring out how to use Chrome’s Developer Tools.

    And you’re use of screen captures added just the right tweak to what I’d been trying to do.

    Thanks so much!

    BTW, I’m also a Dragon user. Came hear after reading about you in its latest newsletter.

    Kat
    at 56 Vibes

    1. Hey Kat,

      Glad you enjoyed it! Yeah Dragon is definitely a nice piece of software, it’s amazing how far it has come.

      Cheers

  3. Hey Cory,

    Thank you so much for all the wisdom you share on this site.
    This is really great, I am going to use Chrome for sure now.

    Have a great weekend.

    Maarten

    1. Hi Maarten,

      Thanks for the kind words! Yeah Chrome has really done some amazing things over the past 2-3 years. Its amazing what they have done with the browser. So many people I have a talked with are moving over to Chrome. It will be interesting where the browser wars stand in about 2-3 years from now…

      Cheers

  4. anonymous coward

    As an English teacher can I just say that your site would have a more professional feel to many people if you’d take a minute to remember the difference between ‘your’ and ‘you’re’.

    Your posts are informative and you’re doing a great job!

    http://tinyurl.com/7rmvslu

    1. Hey anonymous coward!

      Will try to keep the English teachers happy in the up coming posts 😉

  5. You just made my morning with this awesome video, thanks! I am starting a new mock up for a new customer, this is going to save me a ton of time! I’ve been using Firebug, I will have to check out Chrome’s web developer tools. Now back to work moving a site with your Duplicator plugin.

  6. kudos Cory.

    indeed.

    serendipitously found my way here from linked-in group post, and have enjoyed everything I’ve seen. I too use chromes developers tools religiously, but discovered a few tricks watching your visual.

    I’ll be adding you to my list of folk with whom to connect (presumably that will keep the English teacher happy. [grin] )

    Thanks again for your gracious sharing of the wealth. I hope I can return your pay-it-forward attitude in the future.

    1. Hey Michael,

      Thanks for the feedback. Glad you were able to take away a few ideas and tricks!

      Cheers!

  7. Lovely one here Corey,
    I’ve been using Snagit for a about 2 years but never to get a quick look & feel – genius.
    I’ve also been using Firebug more than the Chrome version, merely because I didn’t know of the magnifying class functionality – sorry Firebug, your time has ended!
    Thanks again.
    Riaan

    1. Hey Riaan,

      I like Firebug but the Chrome team has done so well with it’s dev tools that its hard not to use them if you know what I mean 🙂

      Cheers!

  8. Hi Corey,
    I think I found my way here the same way as Michael. 🙂 Thanks so much for the wonderful ideas and how-tos. I have spent untold HOURS trying to get a feel for changes visually by coding. I love Chrome but hadn’t really investigated the developer tools and I had no idea what I was missing out on!

    I will for certain be coming back for more.

    Thank you!

    1. Hey Nicole,

      Glad you found life in the grid, good to have you in the threads!! Yeah Chrome has come a long way for sure and anything I can do to cut down on dev time is always worth it…

      Cheers!

  9. I agree with you, I love love the Inspect in Chrome. It has absolutely revolutionized how I develop. You taught me one thing, which is cool–how to move divs around in inspect. THAT, I will be using from now on.

    Thanks a bunch.

    1. Hey Brenda,

      Yeah I definitely agree that feature is pretty nice! Real-time editing can really cut-down on development time that is for sure 🙂

  10. Great tip and tutorial! Super practical technique, I came back to this page just to say thank you after downloading and watching that video. This will definitely speed up my design process. I’ve been teaching myself web development for 6 months now, and this process fits perfectly with my iterative get-it-done approach. Cheers for a great blog!

    1. Hey Mike,

      Thanks for stopping by… I’m glad you liked the video. Hope to get more out soon…

  11. Hey man…

    Again great stuff on this. I hadn’t thought of he screen capture idea to see how thinks look like, even though I use screen capture for many things.
    I use Safari as my primary browser, and the Developer tools in there are pretty similar, if not identical to Chrome’s, though I didn’t quite know you could drag diva around to see how they look. I will try it out in Safari to see if it can be done, since I’m not too keen in changing browsers alkaline the time..thank you for the ideas..respect..!

    1. Hey Josh,

      Yeah moving the DOM around like that is really slick, I use it quite often…

  12. A great article, the video is very well done, I did not know you can move DIV around, that is really neat. Thanks for sharing.

  13. I use the development tools in Firefox in the same way but I also use them to discover CSS tags on other sites. When I find something i like and want to see how it was done from a design point of view. I can then just cut and paste the elements CSS and use it in a site. I know some would probable say this was stealing but in my mind we are a community where everything is open source.
    Just a technique I have used for years even before working in wordpress. It is also a great way to see how things are done and learn.

Comments are closed.