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)
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.
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?
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.
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?
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.
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?
Also it would be nice to have the option to turn off the menu and have no menu show up on certain pages.
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!