Introducing PSD To Responsive HTML

Leave Comments

With Mobile Web Browsing growing at a “stunning” rate and new platforms (and screen sizes) increasing virtually by the month, it can be harder and harder to design a site that looks great while remaining easy to use for every single visitor.  That is, of course, until A List Apart’s Ethan Marcotte  introduced the concept of Responsive Web Design back in May of 2010.

Responsive Websites

Responsive websites respond to the platform being used to view them.

In case you’re a designer and you aren’t familiar with the wonders (and best practices) of responsive web design, shame on you!  That said, Wikipedia is a great place to start.

We’ve been working on responsive web designs for well over a year now, but we’ve finally gotten to the point where we’re happy to offer PSD To Responsive HTML right on our order page … at a great price to boot!

Here’s how it works:

Step 1: Work your magic designing a kick-ass responsive creative for your client.  In case you’ve never done it before and are wondering how to design a responsive website vs a regular one, here’s a great place to start.  Hint: Focus more on designing elements and less on layouts.

Step 2: Determine how many different layouts you’ll need for your design to work flawlessly across as many platforms as possible.  For most designs, we recommend 4 layouts:

1.  Phone Portrait View:  0-519 pixels

2.  Phone Landscape View:  520-759 pixels

3.  Tablet Portrait View:   760-959 pixels

4.  Desktop / Tablet Landscape View:  960+ pixels

*Remember that these are general guidelines and not true for all designs.  Some designs may not require all of these to perform optimally.  Others may require more – especially as more platform sizes come out.  For best results, we urge you to try out different pixel sizes before deciding on a number of layouts.

Step 3: Submit an order with us and under the “Customize Your Order” section of our order page, expand the “Responsive Design Options” section and select how many layouts you’d like to include in the order.

Image of PSD To Responsive HTML options

Step 4: Submit your order … duh.

Step 5: Log into our Client Portal, download your completed files, and voilà!  Your site is ready to respond to any and all platforms visitors can throw at it.

Simple as that.

Sorry to tell you, there is now officially no reason for you not to be designing with responsiveness first and foremost in your minds.

Got any questions?  Shoot us an email, we’d love help you out!

Leave a Reply