6 Replies Latest reply on Sep 29, 2013 7:37 PM by dreamweaver70

    Responsive Images


      I have a 900x300 images(s) on a JQuery Cycle 2 Image Slider. They look pretty good in desk view. When I switch to mobile view, they look bad, (small  image-flat with little height.) I assume part of reason is becuase of the size of image (elongated), but thinking I have to somehow change image for mobile view, and/or use media queries.


      Is it possible to make a long 900x300 banner type image look good (not so flat and long) in mobile view? Seems there is nothing Photoshop can do (crop, resize) to make this look good in mobile view?


      I am still learning CSS, HTML, and now this 'mobile first' design method--which kinda confuses me. I find myself trying to develop in desk view first, seems more logical, easier?  Seems like whenever I say for example, change the image source in mobile to another image to replace a larger image from desk view, the new mobile image I insert then changes the desktop image.


      Does it make any difference when building a responsive page, whether I insert the image for a particular platform, in a particular order?


      My best experince with responsive images is: making a div on desktop to my desired %width. Inseting a 480x300 image ( image larger than the div). The picture fills the div with a given % great on desktop, and expands appropriately to full image 480x300 on mobile?--Seems to work good, with no need to swap images?


      Are there any general rules / advice/ simplifications or best methods for dealing with responsive design and images?


      I still have not grasped how / when / where to swap images in responsive design.


      How do most designers deal with responsive images and multiple platforms?


      Thanks for any help

        • 1. Re: Responsive Images
          Nancy OShea Adobe Community Professional & MVP

          I do not specify any height or width attributes for the images themselves.  I use the CSS property of :

               img {max-width: 100%}  


          Can we see your Cycle slideshow page where you're having problems?  Your container width might be ill-defined. Ordinarily, Cycle2 is friendly to responsive layouts.




          Nancy O.

          • 2. Re: Responsive Images
            dreamweaver70 Level 1

            Thanks . I don't define any image properties (I don't think), I just creat/alter them in Photosop in Pixels, and insert into Dreamweaver?


            I will load my page to te web now, should be there within 10 min. Any advice is appreciated. (Regarding anything), although I think I am not going through with this large images design--images maybe to 'ad-like', althoug I am trying to promote certain sites.


            Your QQuery Cycle 2 advice on image and text on slider worked Perfect!! Very smart.. I am back to the full image slider though, I'm not sure, but I when I went to add options (pager, and others), it would duplicate (x4) the option (16 pager bullets, number slides, etc)--I think it had something to do with the code /css we put together.

            I am still trying to decide whether to use : full image slider, image and text slider, or none at all (at least have a pause)--slideshows are kinda aggravating as user, but does give good way presenting more info?


            My Jquery Horiz Drop Menu is looking pretty good.-- I just need to get the z-ondex on slider or menu right again. Try to fix that by next time, so you can get a better idea of bar.


            Also it seems, atleast in Chrome, that I have to refresh the page in order to get the image slider to work? Tried Chrome a min ago, and had to refresh, looks/works fine on Explore and Safari, then back to Chrome, and works fine. (Chrome may be a lil tempermental?)

            • 3. Re: Responsive Images
              Nancy OShea Adobe Community Professional & MVP

              Change this:


              <!--JQuery Cycle 2-->

              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

              <script src="http://malsup.github.com/jquery.cycle2.js"></script>

              <!--Optional JQuery Cycle 2 Script-->

              <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>



              to this:


              <!--JQuery Core Library-->

              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

              <script src="http://malsup.github.com/jquery.cycle2.js"></script>

              <!--Cycle 2 plugin-->

              <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>



              Github is not a CDN.  It's a script download repository.  The scripts on their servers do not contain proper headers and will fail to work with some browsers, firewalls & proxy servers.  So don't link directly to Github. Also, you don't need TWO Cycle2 plugins.  One is all that's required.




              Nancy O.


              1 person found this helpful
              • 4. Re: Responsive Images
                dreamweaver70 Level 1

                Great, thanks I will try later tonight. I figured more link srcs to online depositories (CDN's?) would ensure the slider wouldn't fail, incase problems with a server getting info source from? I will try removing link to Github, and let you know what I find. I don't know how you learn all this, but I learn alot from you and your post--Thanks.


                Any advice, suggestions, best metods/practices, on my site (www.dothopper.com), my code, structure, future design (and practices of), workflow implementation--(How do most designers generally go about a designing a site), etc.. please let me know.



                • 5. Re: Responsive Images
                  Nancy OShea Adobe Community Professional & MVP

                  I can't speak for everyone, but I make a rough pencil sketch of what I want the mobile, tablet and desktop layouts to look like.  Sometimes I use Photoshop to create a comp but often I don't. 


                  Next I create some HTML tags and add some Lorem ipsum (dummy text) to the page.  This acts as a skeleton for my  CSS code to grab onto.


                  Once the layout tests well & performs exactly right, then I begin adding, menus, type styles, widgets, etc... 


                  I estimate that 80% of my time goes into planning, designing and coding the main layout.   This acts as my foundation or template.  If done correctly, the rest of the stuff fits into place without problems.   However if the foundation is broken, nothing else will work.  So it's really important to get this right.



                  Nancy O.

                  1 person found this helpful
                  • 6. Re: Responsive Images
                    dreamweaver70 Level 1

                    Thanks very much, great advice. Insightful. I know(assume) everyone approaches this different. Interesting to hear what others do and how they approach. I like what you say a bout straigh HTML, and then style etc, widgets last. For me, a beginner, I've found the widgets can mess up a HTML pages sometimes for whatever reasons, throwing divs outside container, etc, so I try to get the harder stuff widgets) out of way first. I might try your way of HTMl first, then style, I usually do both together. Thanks again for great advice.