Up until now i have been designing fixed width websites, designing in photoshop then building it. Instead of designing a different version for each device the site may be viewed on, it definitely seems a much better idea to build responsive sites… Does anyone have any good tuts that make it easy to understand for a complete beginner to responsive design? Im also guessing the photoshop design stage becomes obsolete in responsive design?
Is it possible to build responsive wordpress websites??
One point to understand is that responsive designs go hand in hand with fluid layouts.
So instead of coding to a specific set of widths (e.g 320px, 640px, 960px, 1600px), you have a layout which will naturally adapt to different width (without media queries) first and you then set breakpoints where the layout will change.
For example a horizontal menu might work when the screen width is above 600px, and below that stacking the links into two columns works better.
@media screen and (max-width: 600px) {
nav li {float: left; display: block; width: 50%;}
}
In my opinion the Photoshop concept is not obsolete, but it needs to be thought about in a different context. It stops being an accurate painting of how the design will always appear, and becomes more of a guide to the look and feel. In many cases it will be accurate (desktop browsing), but as the context changes (tablet, phone) it adapts further.
Depending on the audience for the PS concepts you could produce multiple designs, or it may suffice to just understand yourself how you’re planning for the layout to change at different sizes. Regardless no one should expect a static concept to fully demonstrate how a live layout will look and work.
WordPress’ default theme is responsive. Custom themes can also be responsive, it’s the CSS and media queries which respond. In the case of non-supporting browsers respond.js is a good JS fallback to enable the media queries.
Thanks for the reply 
definitely something im going to have to look into. The 2 big things on my to-do list are cms powered websites (esp with custom designs) and responsive design. Fixed design and development is probably ok for now since ive only been doing it for about 7 months, but since being a web designer is what i want to do in the long term i think i should have a good understanding of all of this kind of stuff before i think about getting into it as a money maker. Do you know of any good beginner tutorials for responsive design? Also, for cms powered custom websites, would you recommend learning drupal or wordpress? Ive set up wordpress sites before but no custom designs as of yet, before i go down that route of learning (say if someone wanted a cms site) i would just like to know which is the better option? We will be covering wordpress in my college course and using it as a cms but does drupal have any major advantages? Thanks
As a starting point you should definitely look at this post by Ethan Marcotte on A list Apart. You might also like to take a look at his article about [URL=“http://www.alistapart.com/articles/fluidgrids/”]Fluid Grids too if you work with grid designs. Have a good read of these articles, although long, they’re very informative and helpful.
I would say stick to Photoshop if you’re comfortable doing it this way. I’m just getting into responsive web design as well and still create my first concept (after paperwork) in Photoshop. With regards to Responsive web design, many designers go for mobile first, so it’s worth looking into that as well.
As a CMS, I believe Wordpress is easier and a more entry-level system than Drupal. It really depends on what you’re doing and the scope provided by your clients. If you’re learning Wordpress in your course, you can either a) be a step up on everyone and learn Wordpress or b) learn Drupal and have more of a variety in your knowledge. However in saying that it’s often good to focus on one CMS before you start another. Learning Drupal at home while learning Wordpress in class could confuse you immensely.
For creating Wordpress themes, I would get a simple theme for you to play around with first and adjust how you like. Then you can start to get a grasp of how things work and how the php is implemented. As for tutorials, take a look at wptuts+ - this whole site is a great resource and starting point.
The book Responsive Web Design from A Book Apart could be worth buying.
As for the CMS — start with WordPress. It has a much shallower learning curve than Drupal and will let you build a lot of the websites you’ll need to to be productive for a while. When it’s familiar and you’re more experienced (and you feel the need) take on Drupal.
Also, step 1 to looking like a WordPress pro is to spell it with the capital P. It’s a subtle sign to those in the know.
Wordpress works great for responsive web design. There’s lots of themes out there.
You’re correct that the old photoshop workflow needs to change, but I wouldn’t say abandoning design in graphic software is dead. It’s more like you try to get to coding as soon as you can. Imagince a 10 page site with 5 breakpoints = 50 creative concepts to maintain. (which is very impractical)
I liked the smashing intro article as started read.
Then check out this article by some of the team involved in the boston globe. I’m on the fence about if I agree with Indesign as the tool of responsive web design but it talks to their design process which is useful regardless of the software used.
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Oh and get and read Ethan’s Marcote’s book ASAP also there’s “Adaptive Web Design” which focuses more on the javascript side of things. Both books are good.