Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
Like Tree3Likes
  • 1 Post By dwp
  • 1 Post By Vapr_Arts
  • 1 Post By TheGAME1264

Thread: In a web of responsive confusion...help!

  1. #1
    Junior Member
    Join Date
    Sep 2014
    Posts
    1
    Member #
    40166

    In a web of responsive confusion...help!

    And it keeps spinning around me....

    I'm a freelance web designer who's starting to get more into responsive website design and design for retina and there are some things that I'm not entirely clear on when it comes to setting up PSDs, particularly with regard to screen size and resolution.

    I've been mostly working with already designed PSDs (just helping out the lead designers by updating their already designed pages) - but as I'm working on these I'm finding that each project seems to be different in that some of them are designed at a really high dpi and screen size while others are just a standard 72 dpi .) and I'm presuming are just being saved out / sized up for the developer at 2x (200%).

    Could someone settle this for me once and for and tell me what the best and most current / correct dimensions and dpi to set my PSDs up to?

    Any help would be super appreciated!

  2.  

  3. #2
    dwp
    dwp is offline
    Junior Member
    Join Date
    Sep 2014
    Posts
    2
    Member #
    40272
    Liked
    1 times
    Bump - this is why I joined the forum and would love to know this as well. For a responsive design, what is the largest size we would anticipate needing? 1920x1200?

  4. #3
    dwp
    dwp is offline
    Junior Member
    Join Date
    Sep 2014
    Posts
    2
    Member #
    40272
    Liked
    1 times
    DMayer likes this.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,923
    Member #
    37412
    Liked
    544 times
    Sorry but i dont see how a responsive site could be created in photoshop..

    Responsive is referring to the ability to respond to the size of the window of the browser.. A psd cannot be responsive therefore a responsive site cannot be made with photoshop.

    I COULD BE WRONG! but i doubt it.. Ive never used photoshop to code a site (im assuming ur using the ability to export css from Ps?) i prefer to code it myself by hand. I can guess most people on the forum are the same and this is why you havent gotten a response.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    DMayer likes this.

  6. #5
    Junior Member DMayer's Avatar
    Join Date
    Sep 2014
    Location
    Oregon
    Posts
    11
    Member #
    40241
    Liked
    2 times
    Quote Originally Posted by Vapr_Arts View Post
    Sorry but i dont see how a responsive site could be created in photoshop..

    Responsive is referring to the ability to respond to the size of the window of the browser.. A psd cannot be responsive therefore a responsive site cannot be made with photoshop.

    I COULD BE WRONG! but i doubt it.. Ive never used photoshop to code a site (im assuming ur using the ability to export css from Ps?) i prefer to code it myself by hand. I can guess most people on the forum are the same and this is why you havent gotten a response.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    Exactly. If you want a truly responsive design you would need to code it by hand or use a template. Building a web site in photoshop should be done only for concept and graphic content preservation-- and is the first step in the process. After doing this you then need to code the rest in CSS and HTML/PHP or export the web design over to dreamweaver and hand code some things there to make it responsive.

    If you have already been doing it in photoshop then I would suggest adding some php code to your existing design that detects a user agent and redirects them to another non responsive mobile version of your website built specifically for those particular devices.

    Something like:
    PHP Code:
    <!--?php <br ?-->   $iphone strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
       
    $android strpos($_SERVER['HTTP_USER_AGENT'],"Android");
       
    $berry strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
       
    $ipod strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
       if (
    $iphone || $android || $palmpre || $ipod || $berry == true)
       {
          echo 
    "<script>// <![CDATA[
    window.location='http://www.website.com/mobile'
    // ]]></script>"
    ;
     }
    ?> 
    where as http://www.website.com/mobile is your domain and mobile website location.

    You can read more on how to achieve this here: Redirecting Mobile Users

  7. #6
    Junior Member DMayer's Avatar
    Join Date
    Sep 2014
    Location
    Oregon
    Posts
    11
    Member #
    40241
    Liked
    2 times
    Thanks for the share, seems like a nice reference for device screen sizes and I have bookmarked this now. Could come in handy.

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Pixellator View Post
    I've been mostly working with already designed PSDs (just helping out the lead designers by updating their already designed pages) - but as I'm working on these I'm finding that each project seems to be different in that some of them are designed at a really high dpi and screen size while others are just a standard 72 dpi .) and I'm presuming are just being saved out / sized up for the developer at 2x (200%).
    2 things:
    1. They're likely sizing them up at double resolution because the pixel density of Retina is 2x. You need to add the images at double size and shrink them down with CSS.
    2. It may be time to update how your company is doing things. PSDs, as others on this thread have mentioned cannot inherently be responsive. However, if the designers and front end code monkeys are different people, you have to mock up somehow. That, or pair with a designer and work exclusively together as you go, which would drive any sane coder crazy. If the design is to be responsive, and PSDs are the way you're going to go, you need mock ups that show the design in its various forms of responsiveness.

    Quote Originally Posted by dwp View Post
    For a responsive design, what is the largest size we would anticipate needing? 1920x1200?
    You're going to hate this answer, but: "all of them". Maybe today the largest is 1920x1200 (which it isn't. 4K is becoming a thing), but it won't be tomorrow. Maybe 320x480 is the smallest, but that'll change tomorrow too. You have to design in a way that adapts to all resolutions.

    Quote Originally Posted by Vapr_Arts View Post
    Sorry but i dont see how a responsive site could be created in photoshop..

    Responsive is referring to the ability to respond to the size of the window of the browser.. A psd cannot be responsive therefore a responsive site cannot be made with photoshop.

    I COULD BE WRONG! but i doubt it.. Ive never used photoshop to code a site (im assuming ur using the ability to export css from Ps?) i prefer to code it myself by hand.
    There's no way to make PS spit out responsive code, let alone usable code. That said, many teams separate designers from front end coders, so mocking up is a necessity for them.

    Quote Originally Posted by DMayer View Post
    Exactly. If you want a truly responsive design you would need to code it by hand or use a template. Building a web site in photoshop should be done only for concept and graphic content preservation-- and is the first step in the process. After doing this you then need to code the rest in CSS and HTML/PHP or export the web design over to dreamweaver and hand code some things there to make it responsive.

    If you have already been doing it in photoshop then I would suggest adding some php code to your existing design that detects a user agent and redirects them to another non responsive mobile version of your website built specifically for those particular devices.
    There are a lot of differing opinions on this. I'm in the no separate site camp. From a usability standpoint, I find it frustrates a lot of users.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Junior Member DMayer's Avatar
    Join Date
    Sep 2014
    Location
    Oregon
    Posts
    11
    Member #
    40241
    Liked
    2 times
    Quote Originally Posted by Ronald Roe View Post
    There are a lot of differing opinions on this. I'm in the no separate site camp. From a usability standpoint, I find it frustrates a lot of users.
    Yeah. I'm a responsive guy myself. However, to save them the efforts of a complete redesign it might be the best option for them. Creating several different websites for the same site isn't really productive when there are so many options for responsive design these days.

    I would really suggest them doing a full blown responsive design that works on all resolutions going forward. I.E. Starting now on all other upcoming projects.

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    Here's the only responsive design argument anyone ever needs...Google prefers it. Not only does Google prefer it, they have openly stated that they prefer it and encourage developers at conferences to use it. They even have a partner that will help you make your site mobile-friendly...I think they're called DudaMobile or something.

    Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites <-- don't take my word on this, though. Take it right from the horse's mouth. Google is almost never this clear.
    DMayer likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    273
    Member #
    40099
    Liked
    47 times
    Just to complement discussion
    Size for screen images are measured in pixels. It doesn't matter what dpi you enter.
    Dpi (dots per inch) has sense only if you want to prepare images for printing, as paper size is measured in inches or centimeters (in my country). For good printing quality a photo will need at least 225 dots per inch (or ppi - pixels per inch), and better 300 or 600 dpi (for b&w graphics). That means the photo width of 10 inches will have 300 dots x 10 inches = 3000 pixels in width.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com