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 trialJacob Thomson
757 PointsHTML + 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!
5 Answers
Stefan Osorio
16,419 PointsSlicing 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
6,672 PointsYou 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!
Ryan Duchene
Courses Plus Student 46,022 PointsAbout 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.
Christopher Palacios
3,110 PointsNot 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.
Ryan Duchene
Courses Plus Student 46,022 PointsBam. You hit the nail on the head with that one. :)
Jacob Thomson
757 PointsThanks 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
16,419 PointsTrue. 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.
Ryan Duchene
Courses Plus Student 46,022 PointsAgreed. 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.
Christopher Palacios
3,110 PointsJacob. 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
757 PointsThank 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
Ryan Duchene
Courses Plus Student 46,022 PointsRyan Duchene
Courses Plus Student 46,022 PointsRetagging this as design. Congrats, by the way! :)