Need Some Advice - PSD to Wordpress Responsive - Battle Plan Inside

Get Started
1

Hey Guys and Gals

I’m trying to learn how to convert a PSD to Wordpress Responsive Design. I have tried a few times in the past and recall getting stumped as the tutorials I found seemed to be lacking a good explanation for a beginner to intermediate coders.

I thought I would mention I’m pretty good with HTML and CSS - I’ve built around 40 standard HTML sites over the years. I’ve sort of dabbled with making my own Word-Press themes, so I know a little about that process but I’m not an expert by any means. I know just enough to tinker with Java & PHP and realize I suck at it and need another year of study in that department.

My problem is I don’t have much free time, so I’ve been seriously considering trying out one of those online PSD to Wordpress choppers as a way to not only get this project done fast but supplement and speed up my learning process as well. However I have certain needs that I will try to explain below that may go beyond what PSD chopper can provide.

I was thinking by reverse engineering what a PSD / Wordpress Responsive theme chopper would do to my PSD may help me learn quicker too; though I would like to learn about the frameworks they are using and make sure I’m on the same page with them before I go that route.

My biggest hope is that I could get some advice from yall about what existing specific frameworks would be good a good match for me and my PSD as well as width and design of my proposed responsive site.

Details, Info & Some Questions About What I Need Done: (see reference pictures of my current PSD)

  1. I have seen responsive sites that were much wider than the norm 960px and auto-sized down nicely to smaller devices and looked great. So I modeled my PSD after them, with a width of 1350px. Is this a problem?
    Side Note: I think I need a 2 page design.

  2. As you can see in my ref pic, the YouTube video is a promo of my company that should always be on the home page (page 1). I need the YouTube video to be responsive and auto-size to different screen sizes without breaking my design. By looking at my design you can see that the sidebar opt-in form is connected to the size of the YouTube video and for my design to not break, I would need it to scale too. Is this a problem?

Related Side Note: I have found youtube videos with a size of 853x480 and this seems to fill out my page pretty good, so that’s what I built this design around. Is that a problem?

  1. I need a slider (the same size as the YouTube video) to highlight and feature my post, to be on the Blog Post only (page 2). How would I go about doing this? That’s a loaded one I know but it’s what I’m up against and any tips would help.

  2. I don’t know exactly how this would be done, as I’m not a WordPress pro coder or developer for that matter. I was thinking that maybe the pages would be the Youtube video layout and the post would be the slider layout.
    Could that work? Or what would you recommend?

  3. Also would there be a way to turn off the slider on the individual post?

I’m guess the following question is a separate issue about Wordpress Development and beyond what a PSD chopper can provide for an affordable price.

  1. How will I update the header-logo area and the header Ad area? Would I just replace the image in the images folder via ftp? Is there a way to have this done within the Wordpress theme options, so it’s much more user- friendly or is this above and beyond what a PSD / wordpress chopper would do? How do I learn how to add these features within Wordpress as opposed to me editing the html and css manually?

  2. Also it would be nice to have the option to turn off the menu and have no menu show up on certain pages.

  3. Last question is; when wordpress 4.0 comes out, if I update Wordpress would it break my theme? Would I have to hire the chopper to update my theme every time Wordpress has big updates?

More details about my design for reference

Header (with logo on left half and ad on right half) 1359x237px
Menu (would be nice to able to put my own images on the buttons or change the colors of the buttons easily)
Featured Youtube Video
YouTube Video 853x480 (with responsive design that does not break my design)
Opt-in Form 437x 482 (would be great if I can replace with my background image of choice & enter auto responder details)
Main Content / Article Area with an image of main product
Sidebar – Popular, Recent, Comments, Archive
7 Recent post etc… that pull images (72x70 thumbnails)
Sidebar Featured Ad
A Sticky Featured Subscribe 1359x378 (right above footer attached sticky)
A Sticky Footer (5 columns) 1359x213

I know that for you guys to answer some these questions is probably beyond the scope of replying with a short reply lol – I guess my best reason for posting this thread and as much detail as possible is that I have high hopes that you can point me in the best direction possible based on the info I gave.

In hopes of learning I think I should separate 2 cans of worms here. At 1st focus on getting the new site built via PSD / to Wordpress responsive theme chopping - wrap my brain around that at 1st. For the sake of making things easier on me I think separating the Wordpress Development part and just editing the theme manually via code initially will make this a little less complicated overall.

Then Later down the road I can see if I can learn the Wordpress Development needed to make things like changing the logo and ads via Wordpress dashboard – user friendly etc… I’ll cross that road later.

So what do you think - look into some PSD choppers or try and bang my head against the wall for a month or 2 and figure this responsive design thing out without it? The only problem is my deadline is fast approaching.

Last question; Is there a course or a tutorial that would work well for my particular PSD that anyone is aware of?

Any feedback or help on this project would be greatly appreciated.

Thanks for reading!

Chris

1 Like
2

Welcome to the forums!

Writing CSS rules “responsive” to make a flexible layout you need to read up on “media queries”, it’s one to get your head around but long term well worth investing the time.

As you said you haven’t got much time then yes outsourcing template development to a Wordpress specialist makes sense, though be prepared for some compromises on your “design” just in case.

  1. I have seen responsive sites that were much wider than the norm 960px and auto-sized down nicely to smaller devices and looked great. So I modeled my PSD after them, with a width of 1350px. Is this a problem?
    Side Note: I think I need a 2 page design.
  • the actual maximum width doesn’t really matter, the important this is that the site adapts for the device it’s being viewed on, and keeping the document easy to follow and read.
  1. As you can see in my ref pic, the YouTube video is a promo of my company that should always be on the home page (page 1). I need the YouTube video to be responsive and auto-size to different screen sizes without breaking my design. By looking at my design you can see that the sidebar opt-in form is connected to the size of the YouTube video and for my design to not break, I would need it to scale too. Is this a problem?

Related Side Note: I have found youtube videos with a size of 853x480 and this seems to fill out my page pretty good, so that’s what I built this design around. Is that a problem?

  • video containers can be made responsive using a little CSS
  • actual video YT size isn’t important since it would resize to fit it’s container anyway
  • your video sidebar form is really just associated content which can scale/resize along with the video, again just CSS rules to tell the browser what to do at whatever device with it’s being viewed on
  1. I need a slider (the same size as the YouTube video) to highlight and feature my post, to be on the Blog Post only (page 2). How would I go about doing this? That’s a loaded one I know but it’s what I’m up against and any tips would help.
  • this is really down to content/template settings in Wordpress (I’m no WP expert) but the process is the same for any site, if there is content show it, otherwise do nothing
  1. I don’t know exactly how this would be done, as I’m not a WordPress pro coder or developer for that matter. I was thinking that maybe the pages would be the Youtube video layout and the post would be the slider layout.
    Could that work? Or what would you recommend?
  • yes that could work, it’s really up to you how you want to present structured content in the document
  1. Also would there be a way to turn off the slider on the individual post?
  • again that’s really Wordpress content/template settings

I’m guess the following question is a separate issue about Wordpress Development and beyond what a PSD chopper can provide for an affordable price.

  1. How will I update the header-logo area and the header Ad area? Would I just replace the image in the images folder via ftp? Is there a way to have this done within the Wordpress theme options, so it’s much more user- friendly or is this above and beyond what a PSD /wordpress chopper would do? How do I learn how to add these features within Wordpress as opposed to me editing the html and css manually?
  • there are many ways, yes you could simply replace the image, have a setting in WP admin to update it, change it with CSS
  • best bet if you’re using a WP expert is to tell them what sort of workflow you want for the logo and let them provide you with some options
  1. Also it would be nice to have the option to turn off the menu and have no menu show up on certain pages.
  • again that’s really Wordpress content/template settings
  1. Last question is; when wordpress 4.0 comes out, if I update Wordpress would it break my theme? Would I have to hire the chopper to update my theme every time Wordpress has big updates?
  • no-one knows!
3

thanks for the reply every bit helps so I appreciate it. I been looking for PSD choppers all day wow there a ton of them.

Does anyone know of any tutorials free or paid that are done really well that would help me out step by step?

4

Yep, there are quite a few video tutorials on www.newthinktank.com I have been helped by some of the wordpress theme and html layout tutorials

5

I searched that site but did not find any tutorials on responsive wordpress theme design

6

Ok, now that I think of it I’m not sure it was responsive. However the responsiveness is in the css so I think the html part of it is still valid. It think it was called “How to layout a website” and the follow up was “create a wordpress theme”.

As I was saying I think the main difference is using % measurements and max-width measurements instead of hard widths a lot of the time. This makes all the boxes more fluid so they reposition themselves as the browser window is narrowed by dragging the browser right edge inwards via the mouse.

The other school of thought, that I’ve only been introduced to on sitepoint, is the effective creation of seperate stylesheets for both formats which are seperated out by media queries. However my personal taste is to keep media queries usage to a minimum. It also seems to me that it would be more work. I’ve never liked having to maintain multiple css files.