5 Replies Latest reply on Nov 22, 2011 6:33 AM by datastride

    Best Resolution for Layout

    dclark2263

      I am wondering what the best minimum resolution is for developing new solutions. I have been using 1024 x 768 for several years now as that seemed to be the standard at the time. Just wondering with bigger monitors for desktops and better resolutions for laptops is there a new standard.

       

      Thanks

        • 1. Re: Best Resolution for Layout
          RayCologon

          Hi dclark2263,

           

          I don't believe there's a new standard as such - it really depends on the organisation or user-base. There are some companies that still have a smattering of 1024x768 monitors, though not too many have smaller formats these days.

           

          If you are working on a solution that would benefit from a larger screen area (some don't), then I suggest you take a survey of the computers in the orgnanization(s) where it will be used and work out a reasonable minimum for the specific context.

           

          ...and don't forget that with the advent of FileMaker Go, a lot of solutions will end up being accessed on devices with still smaller screens - so in that sense, screen sizes are more varied than ever!

           

          Regards,

          Ray

          ------------------------------------------------

          R J Cologon, Ph.D.

          FileMaker Certified Developer

          Author, FileMaker Pro 10 Bible

          NightWing Enterprises, Melbourne, Australia

          http://www.nightwingenterprises.com

          ------------------------------------------------

          • 2. Re: Best Resolution for Layout
            Karsten

            Hi dclark

             

            There are several approaches. Your fixed window size still might be a valid approach, depending on the hardware your customers use. Some customers have small screens, bad hardware, and no good graphic support.

             

            The following works quite well for me for standard solutions:

            1024px width and maximum screen height.

             

            I design the pages on 1024x768 if possible. Some elements have a flexible size, and can adapt to the height of the screen. When opening a window, I will set it to 1024px width and maximum screen height. Portals and the like will have only a few rows in the smallest 1024x768 layout, but depending on the screen resolution of the user, it will automatically adjust to maximum height. The same applies to the width of the screen. As a result, a better screen resolution will lead to a better user experience.

             

            Regards

            Karsten

            • 3. Re: Best Resolution for Layout
              Karsten

              Hi Pixi

               

              The dock will automatically be left out. One also could limit the size like (screenheight - 100px) or anything like this.

               

              Regards

              Karsten

              • 4. Re: Best Resolution for Layout
                datastride

                I have bitten the bullet and decided that multiple screens sizes are inevitable, in all organizations. Even if most of the desktops in one client’s environment are a given screen resolution, there will be some outliers … and the boss will almost always have a laptop with a different resolution. So just as we now take for granted that we have to design size-specific layouts for iPhone and iPads, I now make multiple versions of most layouts targeted for desktops and laptops.

                 

                I now use these dimensions as the design criteria for screen layouts:

                 

                Monitor HMonitor WSize NameDesign WDesign HMargin WMargin H
                1024768Small10006702498
                1280768Small-Wide12156706598
                1440900Medium137578065120
                16801050Large161593065120
                19201080HD185096070120

                 

                These sizes leave room for a dock (Mac OS) or the Windows Taskbar.

                  

                I first design a layout for the “Small” dimensions. This way I have a “base” layout that will fit on any size monitor. I then design one or more additional layouts, taking advantage of the additional screen real estate to show more info, reduce the number of tab panels, add additional portals, etc., appending the text “_Small”, “_Small_Wide”, “_Medium”, “_Large”, “_HD” to the name of each layout, indicating for what screen size it was designed. Again, a screen designed for the “Medium” dimensions will also work on a monitor of “Large” resolution, so I stop designing larger and larger layouts when I reach the point of diminishing return.

                 

                I’ve developed a couple of custom functions to help with this approach: One determines the size of the users screen (called from start-up script, storing results in a global variable), and one selects the appropriate layout for the current user. To use the second custom function, I pass it a base layout name (e.g. “Contacts_Form_View”) and it looks at which sizes of this layout I’ve designed so far (let’s say I’ve designed “Contacts_Form_View_Small”, “Contacts_Form_View_Medium”, and “Contacts_Form_View_HD” so far). It then selects the largest existing design that will fit on the current user’s monitor. Kind of like the game show The Price Is Right” … The custom functions finds the largest size layout without going over … So for a “Small”  or “_Small_Wide” resolution user/monitor, it will select the “Contacts_Form_View_Small” layout (since I haven’t designed a “_Small_Wide” version yet), for a “Medium” or “Large” monitor, it will select the “Contacts_Form_View_Medium” layout (since I haven’t designed a “_Large” version yet). This approach lets me start with just “_Small” layouts to get the app up and running, and then as I have time to design additional layout sizes, my app automatically uses the largest size available that fits on the current user’s monitor.

                 

                Now I don’t always find I have to design a different layout for each of the possible screen sizes. Sometimes FileMaker’s anchoring/re-sizing, when properly applied to a well-designed layout, will stretch without looking ridiculous. An invoice layout, for example, can just expand the width of the description of line items and expand the number of line items (in a portal), and then a “_Small” design will look reasonably decent on even an “HD” size monitor. But some layouts just beg to be customized for multiple screen sizes. With my approach I can invest my layout-design time where it makes sense and provides the most payback. For example, I have one customer with lots of “HD” size monitors (iMacs) in the customer service department, so for many of the layouts used by these folks I designed a “_Small” version and an “_HD” version. That way the customer service people have a size-specific layout tailored to their needs (for maximum info display and thus maximum productivity), but when the boss logs in from home using his MacBook, he can still comfortably perform the same customer-service functions using the “_Small” versions of the layouts. (The "_Small" vesion will present all the same data, typically thru the use of more tabs, sometimes multi-lvel tabs, and possibly protals where several of the fields are allocated less width but which can be displayed as needed by clicking into the field.)

                 

                Anyway, I hope this helps. Obviously there are many schemes for addressing this issue … Maybe my explanation can serve as an inspiration for you to come up with a much better one.

                 

                Oh, and by the way, my scheme has now been expanded to add “_iPad”, “_iPhone3”, and “_iPhone4” suffixes to the logic that determines which layout to use.

                 

                Peace, love & brown rice,

                Morgan Jones

                 

                FileMaker + Web:  Design, Develop & Deploy

                Certifications: FileMaker 9, 10 & 11

                One Part Harmony  <http://www.onepartharmony.com/>

                Austin, Texas • USA

                512-422-0611

                • 5. Re: Best Resolution for Layout
                  datastride

                  I’ve updated my reply on the web to make the table of screen sizes and design resolutions more readable. Sorry for the unformatted version that was mangled because I responded via email the first time …

                   

                   

                   

                  Peace, love & brown rice,

                   

                  Morgan Jones

                   

                   

                   

                  FileMaker + Web:  Design, Develop & Deploy

                   

                  Certifications: FileMaker 9, 10 & 11

                   

                  <http://www.onepartharmony.com/> One Part Harmony 

                   

                  Austin, Texas • USA

                   

                  512-422-0611