4 Replies Latest reply: Jun 18, 2013 7:58 PM by emilycornfield RSS

    When page is reduced elements are "pushed" out of place

    emilycornfield Community Member

      When I reduce the my page size when viewing in a browser, elements get "pushed" out of place and one line text can flow into a second line. How do I fix this?

       

      Attached is the site at 100%, then 2 reductions

      100%.png

       

      First reduction.png

      Second reduction, text reflow.png

       

      http://ati001.businesscatalyst.com

       

      Thanks for your help!

        • 1. Re: When page is reduced elements are "pushed" out of place
          Titus Community Member

          No worries... this is  a typical thing. Your text relows to adjust to the difference in screen size within their predefined "text frame". This is a good thing However, a solution to your problem may be to adjust the parameters of your text frame (such as width, height, padding, centering text, and so on). That can be a hit or miss in regards to what you may want to achieve. Sooooo.... here's a better solution for you Emily Get rid of web fonts! Simple as that! When you use a "system font" Muse turns it into an image, so the text doesn't reflow, as shown in the below images. As shown in the below images, the text on the left ("test text one" and the paragraph below it) was created using the Arial web font. The text on the right ("text text two" and the paragraph below that one) was created using the Arial "system font".

           

          Taken at 100% (Google Chrome)

          Screen Shot 2013-06-17 at 3.23.57 PM.png

          Taken at 50% and 33% (Google Chrome)

          Screen Shot 2013-06-17 at 3.25.42 PM.png

          Screen Shot 2013-06-17 at 3.25.28 PM.png

          See the difference? If you use "system fonts" Muse treats them  as an image and they do not relow and maintain their intended visual look. But be warned! When you have a page that uses both web and system fonts, when the page is resized, the system fonts (produced as images) will scale down in size, as shown above. The web fonts will maintain their size, but may lose the desire visual look you may be aiming for. So you may end up with a page comprising, visually, different font sizes if the end-user resizes the page. However, you can do a bit of creative magic to combat this

           

          Now system fonts are just fonts you have on you computer (such as download fonts, fonts already on your computer, etc.). Muse provides the use of web fonts wherein, mostly everyone uses them. However, you do not have to because I am quite sure you may be able to find the desktop version of those fonts. Moreover, and someone correct me if I am wrong, but Adobe is bringing all their fonts to the desktop in addition to web fonts!!! I believe I nearly screamed while watching MAX

           

          I love Adobe.

           

          Regards,

           

          Titus

          • 2. Re: When page is reduced elements are "pushed" out of place
            emilycornfield Community Member

            Thanks for this info Titus.

             

            Search engines can't read text as an image, and my clients need to be found by the search engines, to improve their rankings and searchability on the web.

             

            Is there any other way around this without making text into an image?

             

            I'm not sure what you mean by Adobe bringing all their fonts to the desktop...unless everyone has them installed that won't help, if I understand you correctly.

             

            Please clarify.

            • 3. Re: When page is reduced elements are "pushed" out of place
              Titus Community Member

              nooooo, my bad if I didn't adequately explain. Muse comes with built in SEO features By turning text into images will not negatively impact your client's SEO endeavors. For example, go to a page in Muse, right click, select page properties, and then metadata (this is what google and other search engines use to crawl a site).

               

              Screen Shot 2013-06-17 at 7.08.16 PM.png

              So you're safe to use the method I explained above without it impacting SEO. Matter of fact, I just found (luckily mind you) a complete guid to search engine optimzation by Muse Team

               

              Muse SEO or www.adobekb.com/strategies_for_seo.html#top21

               

              Oh, and I when I mentioned the fonts being on the desktop, I was referring to the notion that some web fonts may not be currently available for the desktop. Therefore, one may not be able to use the same solution without changing the fonts around a bit.

               

              Regards,

               

              Titus

              • 4. Re: When page is reduced elements are "pushed" out of place
                emilycornfield Community Member

                I think that while your solution to make all the text into an image could help hold the elements together when reducing a page, using metadata does not replace the value of live text, it is just ONE of the ways the search engines search, but that live text is very important.

                 

                This is from the SEO article you recommended yesterday:

                 

                "Search engines often perform full-text indexing, which means that they parse the entire text content on the page. The text that is placed in header tags (h1, h2, h3, etc.) is deemed especially important because headers generally summarize the information being displayed. Using paragraph styles, you can define paragraph tag containers, to create a page that uses an h1 header for the top title in the text content, an h2 header for a subhead title, and an h3 header as a sub subhead title. Text formatting indicates the importance of the header text at each level to search engines. Defining styles to use paragraph tags and applying them to header text enables you to create well-formed HTML code—which search engine crawlers find especially easy to navigate."

                 

                Also, the Lynda.com tutorial on Muse states that having text as images is a bad idea for accessibility, SEO, etc.

                 

                So while it was a creative solution, I think that there must be better ways without sacrificng SEO.

                 

                Anybody have any further feedback on avoiding this "falling apart" when reducing text?