Show Off Your Website with a Screenshot

show your website with print screen

If you are working hard at your business or organization, you are probably working hard on your website as well. Whether you build your website on your own or pay a professional to build it for you, you will want people to see and appreciate what you have done.

Websites are generally meant to be appreciated as viewed in the browser (and if the site is responsive web design, on a mobile phone or an iPad). However, once the site is built, if you are sharing on social media or by an email newsletter, you can’t put your whole browser in your sharing medium. If you want to see what I mean, try pinning a beautiful web design unto Pinterest. You will only get a selection of the images, not the page as a whole. Likewise, if you share your home page on Facebook, Facebook will select one tiny image to include with your FB posting.

So what you want to do is take a print screen of the website page. Print screen can be achieved with ctrl-PrtScrn on Windows or Apple key ⌘ + Shift + 3 on a Mac. You then open your favorite photo editor and paste the image (you can even use Pixlr, the online photo editor discussed in this post on creating images – I just tried it).

As an example, here is a site I recently re-built that uses responsive web design:
CCW home page Connelly Campion Wright Insurance Agency

I had to make choices on what to show in the print screen – there is so much more on the actual site. But such is the nature of taking a snapshot of a website. CCW, the insurance agency of the site, handles many types of insurance including coastal insurance. They wanted to highlight their services without clutter on the home page, and thus the home page presents six easy-to-read boxes.

This is another example, work by my friend Marina Golikova, graphic designer:
clicknowledge website design by marina golikova

She posted this on Facebook, and I wanted to include it on this post as another example of a print screen of a website. You can learn more about Marina’s talents on her website.

Your Turn, Please

Have you seen any lovely websites presented as a graphic? Any simple designed websites shown as one image? Would you be more likely to visit a site if the presentation is appealing? Have you ever taken a website screenshot?

Update on Screenshot Tools:
Snapito works beautifully as a screenshot tool, although it currently only works for one browser size (see comments by Neil Ellis). Abduction, a Firefox addon that Steve Hippel mentions in the comments, seems to work for some people, but my screenshots came out dark and had green lines on the side.


Related Posts:


12 Responses to “Show Off Your Website with a Screenshot”

  1. Steve Hippel says:

    Hi Leora.
    It feels like an eternity since I have been round to visit my favourite blogs and catch up. This one just popped up in my reader and grabbed my attention, so I thought I would pop over while having a cup of tea.

    After reading that you had to make choices about what to show in your print screen, I just wanted to share a tool with you and your readers.

    There is a FireFox add-on called abduction that allows you to capture the whole web page or any element of it as an image.

    After installation, you just right click on the screen that you want to capture and select save page as image.
    You then get some options in the top right of the screen to save all or part of the page.
    It’s a handy tool for capturing those parts of the page that are outside of the viewport.
    Steve Hippel´s last blog post ..WordPress Plugins For SEO

    • Leora Wenger says:

      Steve,

      Well, then, I’m glad I decided to publish a post today!
      “FireFox add-on called abduction” – sounds interesting. I will have to check it out. When I was looking up how to do print screen on a Mac, I noticed that the Mac has several options for print screens (as opposed to measly old one for Windows).

  2. Hajra says:

    Hey Leora,

    This is so interesting!I haven’t been to any graphically strong blog or website. Not that I can remember any I guess.

    I like websites that are visually appealing. I mean we all are a slave of the visual attraction and that works perfectly well for websites. I like Brankica’s blog (Blog Like a Star); she constantly works on the look and it is clean and so clear. Also, she has the right color featured there!

    Thanks for this! :)
    Hajra´s last blog post ..Will they call you over for a Bloggers Party?

  3. Neil Ellis says:

    Hey Leora

    If it helps at all we have a website to help people do this at http://snapito.com we’re very new and would love to see how we can help people more. We’re looking at ways people can get quick simple feedback on their designs too, anyway we’d love feedback on how we can help.

    All the beat
    Neil

    • Leora Wenger says:

      Fascinating, Neil, that you found my post so quickly.

      I just tried your website, and it indeed did a fabulous job! Except the browser size was narrower than I would have liked. Maybe you can make it so one could set the browser size wider?

      – Leora

  4. Neil Ellis says:

    Thanks Leora I was very pleased to find your site and follow with my personal account now :)

    Absolutely we will support custom sizes in the near future. That is definitely a popular request.

    One thing to consider though is most folk snapshot to that size . So if you want to look good in a thumbnail (say on Pinterest) it’s better to support 1024px width devices. It also means you’ll look fab on an iPad too.

    All the best
    Neil

    • Leora Wenger says:

      Good points about browser width, Neil! Thanks.

      I could see value in allowing different screenshot sizes in the development process, Neil. For example, I could then easily send the screenshots to the client and say, here’s how it looks on an iPad, for example.

  5. Adrienne says:

    Hi Leora,

    What I specifically do with my blog is if I share my posts on Facebook, I have a plug-in that will automatically pull the photo I want associated with that post. I don’t have to worry about it pulling in whatever.

    There are some sites though like the blogging networks that will pull in that photo but not size it properly so although mine is set up that way on my blog, I think a lot of it has to do with certain sites.

    I’m a print screen fool actually and I have been playing around in Pixlr. I love that program now and once you get use to it, it’s fun.

    Thanks for sharing this because you are right. At least set it up properly and pray that the majority of the sites will pull the photo in at the right size.

    Have a great weekend.

    ~Adrienne
    Adrienne´s last blog post ..Why You Should Go For No

    • Leora Wenger says:

      Adrienne,

      What I love about blogging is one can write a blog post and learn even more on the topic from the commentators. Thanks for leaving your own comment, Adrienne.

      – Leora

  6. Leora,

    These are great examples of screenshots to display your portfolio on Pinterest! I had not thought of doing that until you visited my blog and left a link to this article. Pinning some client sites on a new board is definitely on my to-do list now.

    I’m going to have to check out the abduction add-on for FireFox that Steve mentioned. I use a freeware application called MWSnap. It’s only for Windows but it’s simple and powerful.
    Sherryl Perry´s last blog post ..Piquing Interest with Pinterest: Selling your Small Business

Leave a Reply

CommentLuv badge