Screen resolution to set up photoshop file for edge reflow

hi :
i'm learning responsive design along with edge reflow. I'm designing a web site that works responsively for all devices. I'm starting with a psd layout.  I set up my photoshop at of 960x1136 currently. 
my edge reflow breaking point for mobile is 768px currently. Perhaps i should modify my psd file to 768 width as well. but before i do that i have the following problem to resolve. When i view this on my iphone thru edge inpect. it's displaying a width of prob. 320 viewport width. which makes all the fonts and images look too big and of course the layouts are in disarray b/c there isn't a corresponding layout for that view port size.
i understand the difference btw viewport size and screen size. But   I'm confused re: the size to set up my photoshop file.
should i have set up my photoshop file based on "viewport " size rather than screen density?? (ie. 320x480 viewport for the smaller iphone rather than 640x960 which is the actual screen pixels) and create high res images separately for retina displays??
what i'd like to have is to have corresponding font sizes and box sizes btw the edge flow file and photoshop psd. so if pick 1.5 em font  in edge reflow, the same font in photoshop file is also 1.5 em. and perhaps saving images as smart object so the images can have higher resolution?
please advice.
thx
grace

Maybe I'm wrong, but the best option would be to work with percentages, not pixels.
You can see examples in this Adobe links:
CSS Percentage vs. Pixels - Re: How can convert the em,px,pt and % in css - CSS Width percentage layout issues - Re: DW CC Fluid grid layout how to change px width for desktop layout
I hope it has been helpful
sorry, I forgot this link in Adobe site: Ten things you need to know about responsive design | Adobe Developer Connection
See you,
Masters and MBA

Similar Messages

  • Why won't Photoshop generate an Edge Reflow Project?

    Hello
    I've been trying to import my photoshop file to edge reflow, just as it's been stated in the videos but when I click generate reflow project nothing happens. There's no file created. Also, Edge reflow can't doesn't connect to Photoshop CC. I have both the latest versions of both, and they're up to date. Any help as to why is this happening would be appreciated. Thank you.

    You need to install the reflow plugin for PS CC. After that you nee to rename some layers to e.g "Layer1.jpg" and enable the file --> generate --> image asset option.
    Finally under the same menue you are now offered the new "edge reflow project" option.
    Switch back to reflow and hit the PS Button on the right. Now that reflow has a sync on ps you may import the current psd to a new page.
    http://adobe.com/go/reflowpsplugin_win64

  • Message says "screen resolution problem" and says to set higher than 1020 x 600. My screen resolution is set higher. Why am I getting this message all the time I use firefox?

    when I go on to Firefox I keep getting the message that there is a screen resolution problem and it says I should set it higher a than 1020 X 600. But my screen resolution is set higher. It is set at 1360 x 768. Why am I getting this message continuously?

    I've had the problem too... for at least a month or more. It would happen when logging into yahoo mail. But it happens only with firefox... not explorer. I contacted yahoo and he had me first disable add ons... no change... and since it didn't happen with explorer, they said to contact firefox. So I followed the advice of cor-el's post (on this page) and made the text on my page smaller... It did fix the issue.... but, I liked the size of the text the way I had it. So, how do I get it back to that size, and not have that annoying message any longer? thanks!!

  • How can I set a default file for JFileChooser

    Hi. I am developing a p2p chat application and I have to unrelated questions.
    1. How can I set a default file name for JFileChooser, to save a completly new file?
    2. I have a JTextArea that I append recieved messages. But when a message is appended, the whole desktop screen refreshes. How can I prevent that?
    Hope I was clear. Thanks in advance.

    Thank you for the first answer, it solved my problem. Here is the code for 2nd question, I've trimmed it a lot, hope I didn't cut off any critical code
    public class ConversationWindow extends JFrame implements KeyListener,MessageArrivedListener,ActionListener,IOnlineUsrComp{
         private TextArea incomingArea;
         private Conversation conversation;
         private JTextField outgoingField;
         private JScrollPane incomingTextScroller;
         private String userName;
         private JButton inviteButton;
         private JButton sendFileButton;
         private JFileChooser fileChooser;
         private FontMetrics fontMetrics;
         private HashMap<String, String> onlineUserMap;
         public void MessageArrived(MessageArrivedEvent e) {
              showMessage(e.getArrivedMessage());
         public ConversationWindow(Conversation conversation)
              this.conversation=conversation;
              userName=User.getInstance().getUserName();
              sendFileButton=new JButton("Dosya G�nder");
              sendFileButton.addActionListener(this);
              inviteButton=new JButton("Davet et");
              inviteButton.addActionListener(this);
              incomingArea=new TextArea();
              incomingArea.setEditable(false);
              incomingArea.setFont(new Font("Verdana",Font.PLAIN,12));
              fontMetrics =incomingArea.getFontMetrics(incomingArea.getFont());
              incomingArea.setPreferredSize(new Dimension(300,300));
              outgoingField=new JTextField();
              outgoingField.addKeyListener(this);
              incomingTextScroller=new JScrollPane(incomingArea);          
              JPanel panel=new JPanel();
              panel.setLayout(new BoxLayout(panel,BoxLayout.PAGE_AXIS));
              panel.add(inviteButton);
              panel.add(sendFileButton);
              panel.add(incomingTextScroller);
              panel.add(outgoingField);
              add(panel);
              pack();
              setTitle("Ki&#351;iler:");
              setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
              setLocationRelativeTo(null);
              addWindowListener(new CloseAdapter());
         //Sends the message to other end
         public void keyPressed(KeyEvent e) {
              if(e.getKeyCode()==KeyEvent.VK_ENTER && e.getSource()==outgoingField)
                   String message=outgoingField.getText();
                   if(message.equals("")) return;
                   showMessage(userName+": "+message);
                   conversation.sendMessages(userName+": "+message);
                   outgoingField.setText("");     
         //Displays the recieved message
         public void showMessage(String message)
              if(fontMetrics.stringWidth(message)>incomingArea.getWidth())
                   int mid=message.length()/2;
                   StringBuilder sbld=new StringBuilder(message);
                   for(;mid<message.length();mid++)
                        if(message.charAt(mid)==' ')
                             sbld.setCharAt(mid, '\n');
                             message=sbld.toString();
                             break;
              incomingArea.append("\n"+message);
    }

  • Using CS4 - in the past PS set up a file for images saved for "web

    I am using PS and Dreamweaver CS4. In the past, when saving an image for "web and devices", PS set up a separate file for saved images which then showed up in Dreamweaver. I have somehow lost PS in Dreamweaver. Instead, Photoshop puts the saved image back into the original file.PS is grayed out in Dreamweaver so cannot connect back to any images from Dreamweaver either. How do I get back to preferences I originally set up for saving images for web and devices. I have Windows XP Professional.

    Save For Web is an Export, not a Save. That distinction means it saves out a copy, leaving the original as it was. The export destination is set in the SFW dialog, and is sticky. The next time it exports to the same location unless you change it again.
    So you just need to point Dreamweaver to where your SFW exports go. That's all.
    (Disclaimer - I don't use DW, but I assume it works like any other software).

  • What size photoshop file for 16:9?

    This is a great site and I've been doing alot of searching/reading and trying to get some info. Maybe I've misunderstood some of the answers but I'd just like someone to confirm my suspicion:
    What pixel dimensions do my photoshop files need to be if my project will be viewed NTSC 16:9? If they decide to go HD what are the pixel dimensions staying in the same aspect ratio?
    Cheers,
    D
    G-5 dual processor   Mac OS X (10.3.9)  
    G-5 dual processor   Mac OS X (10.3.9)  

    What version of Photoshop are you using?
    I'm still using Photoshop 7 it's 864x480 preset (I believe it is labeled a DV Widescreen or something) for 16:9 work.
    Just prior to finishing, I save the file as a copy, then resize the image to 720x480. (I could let FCP do the resizing, but I find that PS is a little better at it, quality wise)
    As far as HD, that really depends on what flavor of HD - 720? 1080? - and, more specifically the codec you're using in FCP. (DVCProHD 720? HDV 1080i?)
    And welcome to the forum, knuckledragger.

  • What screen resolution are all of you designing for?

    I realize a liquid layout is ideal, but even liquid layouts have an "ideal" resolution the design is built around.
    What minimum width are you guys designing for? (ie, 960px for 1024px resolutions)

    BobLevine wrote:
    Depending on the design I use anywhere from 950 to 1000 pixel widths.
    Bob
    Thanks for your answer. Mind if I pick your brain regarding these choices?
    By my calculations (using latest Windows + latest IE, which represent the majority) the window border occupies 8px on each side.I just measured it a few seconds ago.
    The scrollbar occupies an additional 17 pixels on the right side.
    Total : 33px of the horizontal viewable area is taken up by the browser.
    This would mean that when catering to 1024 screens - which you clearly are - the sweet spot would be 1024 - 33 = 991 pixels max with a borderless design (ie, margin:0 on the body).
    Knowing this, why would you ever use 1000px wide? If you were catering to 1280, then you'd want 1280 - 33 = 1247 pixels max. Or are you referring to centered designs that don't scroll?
    Is there a conscious and calculated reason why you'd limit yourself to 950px when you've got 40 more to work with, or why you'd unnecessarily force a horizontal scrollbar on all 1024 screen resolutions by designing @ 1000px?

  • Set DAQ default file for DAQmx

    Is it possible to load a DAQmx file (*.nce) on MAX programmaticaly in
    LabView 7? I know it's work for tradionnal DAQ file (*.daq) with "Set
    DAQ default file.vi" but this vi don't work for DAQmx file.

    Hello FrankyD,
    Thank you for contacting National Instruments.
    It is possible to programmatically load a DAQmx file, but not with a
    single VI. You will have to:
    1 - Programmatically open MAX
    2 - Move the window to the front
    3 - Then simulate the necessary keystrokes to navigate to the import
    window.
    I have attached an example VI to help you get started. Currently, the
    VI will work as long as there are no symbols (: \ / ) in the file path
    string. To input symbols, you will have to map the correct code to
    the Simulate Keyboard VI. The ASCII codes for keys can be found at:
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/winui/WinUI/WindowsUserInterface/UserInput/VirtualKeyCodes.asp
    You will have to convert the ASCII to U8 number before
    you can send it
    to the Simulate Keyboard VI.
    I hope this helps,
    Sean C.
    Applications Engineer
    National Instruments
    Attachments:
    Import_MAX.zip ‏171 KB

  • How set auto growth file for 500 GB Database

    Hi
    We have 500 GB database every day its grow by 18 GB.
    can you please advice me how Can I set auto growth file in MB or percentages?
    Thanks in advance.

    How to set it - Check this link -
    https://www.simple-talk.com/sql/database-administration/sql-server-database-growth-and-autogrowth-settings/
    First - Never rely on Autogrowth for growing the file sizes. This has to be a manual process where you increase the size depending on the growth before hand. Autogrowth should only be relied on for last case/unfortunate scenarios
    Second - Dont set Autogrowth in Percentages . Always set it in MB's.
    You cant start with say 500 MB and monitor. You need to set this in such a way that increasing this amount does not take up too much time and cause slowness.
    Check if you have Instant File Initialization enabled - This will reduce the time taken for initializing DATA files considerably. Check this link -
    http://blogs.msdn.com/b/sql_pfe_blog/archive/2009/12/23/how-and-why-to-enable-instant-file-initialization.aspx
    Regards, Ashwin Menon My Blog - http:\\sqllearnings.com

  • Upload javascript files for edge animate banner to work in  Content Management System (was: how do upload...)

    how do upload the javascript files for the html edge animate banner to work in my Content Management System module. At present, the html cannot function because the reference javascript files are missing.

    I am not very sure how the CMS manage their content but basically the javascript files need to be in the same folder as the HTML file for Animate content to play.

  • Is it possible to import dreamweaver files and muse files to edge reflow and vice versa?

    Hi there are certain things that I can do using edge reflow such as making a mobile and tablet site.
    There are certain things I can do with dreamweaver such as making a form with a drop down box.
    And there are certain things I can do with muse such as inserting a google maps and paypal widget.
    Is it possible to interchange files with these 3 software?

    For Muse you can make a mobile/Tablet/Desktop version, it just won't be responsive. So you can't directly pull in HTML from Reflow as page structure. If it has to be responsive use Reflow or Dreamweaver.
    Regarding sharing elements between the three you get the very vague answer of "are you good with code?"
    As a general rule forget about doing anything with Muse files in any other piece of software. Where you have the cross-over is in the raw generated HTML.

  • Layered Photoshop file for Titles not lining up

    I've created a set of subtitles by making a layered PS doc, and setting a line of text on each layer. The text is all set against a guide-line in Photoshop, so I know it is always on the same baseline.
    I the use Scripts-->Export Layers to File to create a separate PSD for each title, with the exact same measurements. I bring these into Final Cut, and use the PSDs as my subtitles. When I edit each into the sequence, I would expect them all to line up exactly the same as they did in Photoshop (the FCP sequence has the same specs as the PSD), but when each title comes in some of them are set a few points below the rest. I'm just dragging them right out of the bin into an OVerwrite edit - no other manipulation going on. Why wouldn't these images line up exactly? What's a better way to get PSD layers into Final Cut so they are easy to individually drop into a sequence? Why do only some of the layers land in the wrong place? This is weird, I could use some help-

    It would appear I've resolved my issues - I originally transgerred all my files (about 60GB) from a windows 2000 server onto the G5, none of the files' icons would appear correctly. So having spent a few hours wondering what the **** was going on, I decided to try transferring them again, but in smaller chunks - several folders at a time as opposed to all of it. Now everything is working "mighty fine". All icons show up properly and launch first time.

  • N73 ME setting an MP3 file for sms alert tone

    how can we set an mp3 or mid or other music format for sms alert tone?
    Nokia N79 4GB
    SW Version: 32.001 RM-348 MEA

    04-Apr-200709:33 PM
    petrib wrote:
    Put your MP3s, MIDI files, etc., in \Nokia\Sounds\Digital in phone memory or \Sounds\Digital on a memory card (or the microdrive on the N91).
    If that fails, go to the file manager, select the mp3 file and under options select 'set as ring tone'

  • Size of Photoshop files for FC.

    Greetings.
    I am scanning some photos that I am going to use to make a slide show in FC. I will probably be doing a lot of panning and zoom-ins very close. These will all be either .psd or tiff files.
    My thinking is that a PS image around 4000x2600 @ 72dpi (little over 30MB) should be fine.
    Some people have said this is good and maybe even larger scan sizes, while others have said that is far to big.
    My plan would be to use these in an HD timeline, 1080 or 720. Not sure if that matters.
    Any thoughts on my photo size issue?
    Thanks.
    Jonathan

    I believe FCP and motion have a limit of image size depending on your video card.
    Most don;t like bigger then 2k; around 2000 pixels each way.
    But personally I would scan as high as I can go, like really as high as I can optically go (none of that extra interpolation crap!).
    Then resize in Photoshop to either HD size, or 2k size and do moves e.t.c on your images.
    But seriously try to scan as optically big as you can, and resize and fix in Photoshop.

  • How do I set up photoshop elements for my bamboo?

    How do I set up my photoshop elements that is supposed to have come with my bamboo?

    Which version of Photoshop Elements?
    Did it come with a serial number?

Maybe you are looking for