Responsive CSS3 devices for portfolio presentation – No more PSD Templates

How do you feel every-time you have to add a new portfolio item to your site? Bored? Hate it? Let me guess, you take screenshots, choose the ones you like the most, open Photoshop, fix the size, import file, export file, “oops something went wrong”, back in photoshop, “oooh I don’t like that “, back in Photoshop, and the nightmare goes on.

If the above reflect the process for updating your portfolio, then you should continue reading this article.

 

Research

While I was building my new portfolio I decide to build my own CSS flat devices. Yes, flat! All the Mockup PSD templates for designers that are out there made me wonder if your portfolio presentation is more important than your actual work. Ask yourself, do you really need to have a real smartphone image or a 3D smartphone on a diagonal position to display your work? Or maybe it’s all part of a cheap marketing trick? Or should I mention that the mock up PSD from the smartphone you where using last year it’s now OLD!

 

Build Your Own CSS Devices

Don’t use the existing ones, build your own, it’s easy! Set up your own dimensions that works for your project and create your transitions and animations you’d like to add. For my portfolio I wanted to create something full-width & centered, without a wrapper/width restriction around it. Something that will look good on large & small screens.

 

Build the custom options in the back-end

When I finished developing my own CSS devices i start implementing the code to the CMS. I’ve set up all the custom options that I needed with ACF Pro(Flexible Content) and I start exporting the data on the front-end.

Here is a s screenshot from the WP back-end with some ACF Pro Custom Options for the Thumbnails (2nd screenshot left) preview:

under-the-hood

 

Endless posibilites

The options you can build with CSS are endless, different device colors, different orientation for mobile devices, hover animation for the touch button, hover functionality for project description, custom CSS3 transition effects (scale, rotate, position etc.), you can even overlap images inside the device screen and display them with different order just with CSS.

Also you can build your own elements inside the screen to highlight some important features of the project. Do i mention you can use an animated gif and add it to the device, (the are many apps to achieve that) and all of that without even opening photoshop.

bluenigma-preloader2

Should I also mention the fact that you can use them as thumbnails inside the grid for the landing page? (2nd screenshot on your left) Basically all you need is to develop the mark-up & back-end functionality just once, and then you are good to go, no more PSD mockups.

Here is a screenshot with ACF Pro Custom Options for adding content to the project detail page using flexible content:

under-the-hood2

So are you sure that you still want to use 4-5 different Mockup PSD templates for your portfolio?

 

Fall in love with the process

Here is the current process for adding a project to my portfolio by using CSS devices:

  1. For my devices I need three types of screenshots: Desktop(1390X850) || Mobile(525×920) || Tablet(1145×835).
  2. Open three browser windows and make sure the dimensions above match the browser window. (You can use ruler or command+shift+4)
  3. Take the screenshots and rename them. I use command+shift+4. (If you want to make them more realistic in Photoshop go ahead.)
  4. Upload to the CMS.
  5. Set up the options and content in the back-end.
  6. You’re done! Enjoy…

 

If you want to find out more about the code & project:

View project on GitHub.

Comments

Leave a Reply