Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Jacob Thomson
Jacob Thomson
757 Points

HTML + CSS

I have been given a website to develop, and it is a psd file. Is the easiest way to develop a website from a psd, to slice it up and save it as a html file? The design is a desktop design aswell, would that be even more difficult to apply breakpoints to make a responsive mobile site? What is the downside to creating a sub-domain for a mobile site, so it recognizes when someone is on a mobile and redirects them to the mobile site.

I'm confusing myself with all this! It would be great if someone could give me some advice :) Thanks!

Retagging this as design. Congrats, by the way! :)

5 Answers

Stefan Osorio
Stefan Osorio
16,419 Points

Slicing is dead, Nick explained it quite well on the Treehouse Blog I recommend you go through the Web Design Track - a lot of things should be a lot clearer after that :)

Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points

You don't save the psd slices as html. You save them as images in your img folder inside your project folder with your html, css, and javascript. In my opinion slicing sucks, drag the images into a new project on Photoshop one by one and delete the background layer if you're saving as a png. To make that site responsive you're going to have to figure out what specific break points to use and start using your css to make it all work, I wouldn't create a separate site for mobile unless its for a large company. Remember to use the viewport tag in your HTML!

About the mobile site: If you're developing a site, you should try not to develop a separate mobile site. It might seem at first like an easy way out of adapting your desktop site for mobile, but it will require maintaining two completely separate codebases (HTML and CSS), and every time you make change the content of one site, you have to change the other as well. On top of that, your desktop and mobile sites would share the majority of the site styling--same colors, same typography, similar layout--so you'd be repeating yourself an awful lot.

Not to mention it sort of defeats the purpose of building a responsive site to begin with. The point of responsive site design is that it adapts to desktop and whatever screen sizes you specify. If designed with all your target users in mind you will have no need for separate development site.

Bam. You hit the nail on the head with that one. :)

Jacob Thomson
Jacob Thomson
757 Points

Thanks for all the feedback. I have only been given a desktop design, and i have heard it is easier to start the mobile version first. What are your thoughts on that, Ryan Duchene

Stefan Osorio
Stefan Osorio
16,419 Points

True. Also, i regularly get enraged when someone shares a link (from mobile) to a mobile version of a site which doesn't automatically switch to the desktop version when viewed on desktop (so i have to remove the "m." in the url by hand).

Even worse: Sites wich don't offer the full functionality on mobile, but force everyone viewing on mobile to use the mobile version.

Agreed. Mobile-specific sites are waaaay more trouble than they're worth. Adding a few media queries right in development will make all the difference later.

Jacob. Since you've been given the desktop site you should plan for building responsive website period. It is unlikely that you will be given a mock-up or layered photoshop files of the various screens you'll need your site to respond to. Your in the big time, baby. This is your job and the task you've been selected to problem solve. It's a beautiful thing to be able to adapt as a designer to the conditions of media. Whether you begin the mobile version first or scale down the desktop version, it is likely that you will have to do a little of both at the same time. I reccomend beginning with a pen and paper; sketch to think through your problem. It's a great that you are bringing this project to the forum but I think you'll likely gather more information from your client about it's users. Why spin your wheels designing for screens that your client may not have a use for. Find out more about who will be using the site.

Good luck to you and please do keep me posted of the progress as I'd like to see how you resolve the task you've been charged with. Congratulations!

Jacob Thomson
Jacob Thomson
757 Points

Thank you for the advice, Christopher Palacios! I have a lot to learn, and i hope i can get my head around it all to finish it. I'll keep you posted. Thanks again