Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Tom Bedford
Tom Bedford
15,645 Points
Posted by Tom Bedford
Tom Bedford
15,645 Points

ScreenView: take screenshots at different resolutions

Rainy Sunday afternoon here and I thought I would tinker with some of my recently acquired JavaScript knowledge.

I made a tool to display websites at specific resolutions so you can take screenshots to use in a portfolio to show off your responsive design skills.

It's not aesthetically pleasing but it works. I may pretty-it-up later.

Do have a look at ScreenView and let me know if you find it useful!

I also made an instructional video if you aren't don't want to press the buttons at random to discover how it works.

This is the first "tool" I have made so I felt rather proud. I'm sure one of you can link me to someone who has already made this years ago.

3 Answers

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

Super excited that you shared this! I'm sure someone has done something like this before but I think the fact you took what you learned and applied it is pretty great. Just save your work to github or CodePen and when applying for a job show it to them. I would polish it up though. :)

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Thanks Ricardo - it was super exciting to be able to make it!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's pretty awesome :smile:

Putting the screenshots together in a collage like http://ami.responsivedesign.is/ would be even more awesome

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I had seen that when I was searching for something that could do what I wanted! However I needed the windows at the actual resolution for taking nice screenshots and without the scrollbars. The idea is you can create a collage like that after getting all the shots be free to use any border you like. I had previously made shots for my portfolio which took ages and while working on revamping my site I wondered if I could make something to speed it up which lead to ScreenView.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Tom Bedford - that's really cool, I love the ability to be able to put an url in and boom it's there.

However, bug fix. If you put http://ultimategamingparadise.com in as an url, it clearly doesn't look good but if you look at UGP on the phone or tablet, it looks fine and very different.

What could be causing that issue? Something that needs working on or is this tool not meant to be that advanced?

I've got a viewport meta on my site that scales it down to 80% of original size for tablets and phones. Phone will be having their own design and CSS rules but for tablets, the scaling down 20% is the permanent fix cos it's quick, easy and works.

Just thought you might like to know?

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Matthew Campbell, thanks for the comments. ScreenView uses an iframe where you can change the size/viewport. This will trigger any media queries for those particular sizes. It is not meant to replace actual device testing as it will only render the page as the browser you are currently using would at that size.

i.e. if you run ScreenView in Chrome enter a url and pick "iPhone" it will show what Chrome would display if sized at 320x480.

If you open the website you mentioned in a normal tab (not in ScreenView) and shrink your browser you will see it collapses to appear as it does in ScreenView for smaller screens. It doesn't look like it has any mobile optimization and just displays a zoomed out version of the regular desktop site for phones/tablets.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Phone will be having their own design and CSS rules

If you are adding in styles for smaller screens then these should appear in ScreenView if triggered with media queries.