FreewayTalk

35 replies to this thread. Most Recent

sonjanna

11 Nov 2014, 8:07 am

[Pro] Size background picture in responsive design

I wonder which would be the best file size (px and kb) to serve screens to mobiles in order not to overload mobile connections, but to present sharp pictures as well? A client likes to have a full background picture in his design.

I simply search for an average. 1000px or 1200px width or more?

What would you recommend?

Thanks a lot!

german web/designer

Andries Kuipers

11 Nov 2014, 8:24 am

Hi, perhaps this will help? http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

grtz, Andries

sonjanna

11 Nov 2014, 8:38 am

Thanks, Andries, but I have hoped for a solution or an average in FW 7 itself from someone who has done it already.

I know that there are many other ways, but I am looking first for the most simple solution, before going into “external” coding.

The background supersizer action is in my testing a very good action when I keep the layout in mind and till now has very good performances with iPhone 5 and 6 even in slow connections.

I still hope for other comments :)

german web/designer

Tim Plumb

11 Nov 2014, 10:05 am

If you want the background image to animate then the Background Supersizer Action is fine (although I think your pages may get a little bulky with all of that JavaScript on the page).

If you just want the images to fit the page (or item) background then you can use CSS to size the image to the container. Here’s a simple example; https://dl.dropboxusercontent.com/u/795566/test/Responsive%20background%20images/Site%20Folder/index.html and the Freeway 7 file; https://dl.dropboxusercontent.com/u/795566/test/Responsive%20background%20images/responsive-background-images-fw7.zip

The trick is to add a style to the background image to tell the browser to cover the item with the image. In this example take a look in Page > Extended for the extra CSS markup.

I’ve also added different sized images to the page at different breakpoints so mobile users (for example) will only ever load in an image big enough for their device. I’ve also made sure that the images (apart from the biggest one for the ‘default’ view) are twice the pixel size of the breakpoint so they look reasonable on retina screens.

Although this solution isn’t ideal (if a user has already downloaded a larger image then we shouldn’t really be loading a smaller version to replace it) it should cover most use cases for you. Regards, Tim.

On 11 Nov 2014, at 09:38, sonjanna wrote:

The background supersizer action is in my testing a very good action when I keep the layout in mind and till now has very good performances with iPhone 5 and 6 even in slow connections.


Experienced Freeway designer for hire - http://www.freewayactions.com

Tim Plumb - Experienced Freeway designer for hire

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro

sonjanna

11 Nov 2014, 11:07 am

Tim, this is exactly what I was hoping for! ( No animation. The background image should size the page.)

To see it online and in the FW 7 file is more than helpful for me. Honestly, I cannot express my gratidude!

It’s a steep learning curve to FW7 and “responsive”. I have to change many workarounds which have been reliable for many years in clients projects. Suppose I am not the only one ;).

As far as I can see in a quick test it works perfect!

Thanks a lot!

german web/designer

sonjanna

11 Nov 2014, 11:52 am

Tim, in iPhone 3 and iPhonesimulator 5 + 6 the background fotos do not fill the whole screen / page as in background super sizer. Nor in portrait neither in landscape.

Link

But this is exactly what the client is asking for.

Did I miss something? Can we fix this?

german web/designer

Tim Plumb

11 Nov 2014, 1:07 pm

Try removing the markup item that displays the browser size. It looks like it may be upsetting your page layout. Regards, Tim.

On 11 Nov 2014, at 12:52, sonjanna wrote:

Can we fix this?


Experienced Freeway designer for hire - http://www.freewayactions.com

Tim Plumb - Experienced Freeway designer for hire

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro

sonjanna

11 Nov 2014, 1:26 pm

Thanks Tim, I am afraid it does not solve the problem.

I am still testing if a setting is wrong, but till now without success….

german web/designer

sonjanna

11 Nov 2014, 2:07 pm

BTW at the testpage are links to HOME and VIDEO. On both pages the background supersizer action is used. It works perfect with the layout.

Can`t still find a clue why the layout breaks on ALTERNATIVE with your method Tim.

german web/designer

Tim Plumb

11 Nov 2014, 8:52 pm

I’m only just getting back to this after a busy day. I’ve just updated the demo and the Freeway file. I just needed to clearfix the body tag to prevent the background image getting chopped off.

Same links as before. Here’s the example; https://dl.dropboxusercontent.com/u/795566/test/Responsive%20background%20images/Site%20Folder/index.html and the Freeway 7 file; https://dl.dropboxusercontent.com/u/795566/test/Responsive%20background%20images/responsive-background-images-fw7.zip

See the Edit > Styles dialog for the clearFix style which is applied to the page body itself. Regards, Tim.

On 11 Nov 2014, at 15:07, sonjanna wrote:

Can`t still find a clue why the layout breaks on ALTERNATIVE with your method Tim.


Experienced Freeway designer for hire - http://www.freewayactions.com

Tim Plumb - Experienced Freeway designer for hire

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro

sonjanna

12 Nov 2014, 6:21 am

Good Morning.

Thanks a lot Tim, for your effort! I am afraid it still does not work though. Pitty.

LINK

By the way it concerns not only mobile/tablets but desctop browsers too.

I am sure there is a solution!

All the best, Hanna

german web/designer

Tim Plumb

12 Nov 2014, 10:16 am

Hi Hanna, Uncheck the “Background scrolls” checkbox in the Inspector for each breakpoint. This will prevent the image scrolling with the page and should stop the gaps appearing. I’ve tested it here on my iPhone, Android phone and tablet and it appears OK on all of them. Regards, Tim.

On 12 Nov 2014, at 07:21, sonjanna wrote:

I am afraid it still does not work though. Pitty.

LINK


Experienced Freeway designer for hire - http://www.freewayactions.com

Tim Plumb - Experienced Freeway designer for hire

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro

sonjanna

12 Nov 2014, 12:01 pm

Thank you very much Tim, in a way it does it now. In a desktop browser the background picture scales, but in iPhone Simulator and iPhone 3 the background picture does not scale unfortunately. Displayed is just a section of the picture and pixelated.

You see the difference when you jump to HOME (with background supersizer action and background scroll checkbox on) and scrolls a bit down. This is the way my client likes to see his background pictures.

You have done already a lot for me and I cannot ask for more!!!

So I address the whole audience now. How can I solve this without having to create several FW7 files for mobiles, tablets and desktops and to make alternative routings in code. Or fall back to supersizer action and one background picture for all devices.

Tim`s solution is so brilliant and easy to set up. Just this little hiccup!

There must be a way to provide it in one FW file. I am sure, I am not the only one who needs a solution for this. Now and in future….

Thanks again!

german web/designer

Andries Kuipers

12 Nov 2014, 12:25 pm

Just for the records: you want a background image which scales to all screendimensions? Fluently or adaptive? And the supersizeraction did his work correct? But then you have one big picture what could be to heavy for mobile… Am I correct so far? Op 12 nov. 2014 14:01 schreef “sonjanna” <[email protected]>:

Thank you very much Tim, in a way it does it now. In a desktop browser the background picture scales, but in iPhone Simulator and iPhone 3 the background picture does not scale unfortunately. Displayed is just a section of the picture and pixelated.

You see the difference when you jump to HOME (with background supersizer action and background scroll checkbox on) and scrolls a bit down. This is the way my client likes to see his background pictures.

You have done already a lot for me and I cannot ask for more!!!

So I address the whole audience now. How can I solve this without having to create several FW7 files for mobiles, tablets and desktops and to make alternative routings in code. Or fall back to supersizer action and one background picture for all devices.

Tim`s solution is so brilliant and easy to set up. Just this little hiccup!

There must be a way to provide it in one FW file. I am sure, I am not the only one who needs a solution for this. Now and in future….

Thanks again!

Tim Plumb

12 Nov 2014, 12:51 pm

The example I originally posted uses a background image of 640 x 480 pixels for the 320 breakpoint. The CSS is scaling the image to the overall page width or height which, for an image of this size, will cause the image to scale up. If the page is taller than 480 pixels you’ll see the background image start to degrade in quality as the image scales up. The solution I would think is just to drop the 640 x 480 image at the 320 breakpoint or use a larger image. You’ll need to look at the overall height of your longest page and use an image that comfortably large enough to cover the screen without it scaling up. I hope this helps. Regards, Tim.

On 12 Nov 2014, at 13:01, sonjanna wrote:

You see the difference when you jump to HOME (with background supersizer action and background scroll checkbox on) and scrolls a bit down. This is the way my client likes to see his background pictures.


Experienced Freeway designer for hire - http://www.freewayactions.com

Tim Plumb - Experienced Freeway designer for hire

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro

sonjanna

12 Nov 2014, 3:39 pm
  • ANDRIES

You got that right. The background supersizer action makes a perfect layout job, exactly what my client wants in all devices.

SEE HOME - In this testwebsite is a 1000px width background picture that worked surprisingly well at mobile connection even at iPhone 3.

But possibly a 1200 px width picture or bigger is a bit to big for mobile connections but to small for a wider screens?

  • MY ORIGIN QUESTION WAS TO ASK FOR AN AVERAGE SIZE.

Than Tims solution popped up. SEE ALTERNATIVE

That means at very breakpoint another background file / size + a bit of code.

Here is the problem that the background pictures do not scale properly like in the background supersizer action modus, a blank white space at the bottom appears.

  • TIM

I hope I understand your suggestion, but I am not sure if this is a practical workaround. First I have to experiment in every page + media width tabs the right size of the background picture. What an amount ;) if I have only 8-10 pages x 4 media width… Every time the client changes textsizes/pagesizes I need to find out again and open PS, resize the picture, export, import…

But I try this later today….

german web/designer

Andries Kuipers

12 Nov 2014, 5:08 pm

Hi, I should stay with one image if possible. Otherwise you’ll go mad with every change ;-).

Perhaps the most effort you can get is to make your image as small as possible in weight, not in pixels and use the background supersizer action. Just toggle with your jpg settings untill you have an acceptable view.. I found wallpaper images of 2500 x 1600 px at approx. 750 kB, I’ve seen full screen video’s of 200kB.

There are more solutions in CSS and Jquery but they all expect some amount of coding-knowledge. E.g.: http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

There are plugins that make live easier: http://srobbin.com/jquery-plugins/backstretch/ http://www.jqueryscript.net/layout/Flexible-Responsive-jQuery-Background-Image-Plugin-Wallpaper.html http://www.sitepoint.com/responsive-fullscreen-background-image-plugins/

Just google around… Most of the time the wheel is already invented.

grtz Andries

2014-11-12 17:39 GMT+01:00 sonjanna <[email protected]>:

  • ANDRIES

You got that right. The background supersizer action makes a perfect layout job, exactly what my client wants in all devices.

SEE HOME - In this testwebsite is a 1000px width background picture that worked surprisingly well at mobile connection even at iPhone 3.

But possibly a 1200 px width picture or bigger is a bit to big for mobile connections but to small for a wider screens?

  • MY ORIGIN QUESTION WAS TO ASK FOR AN AVERAGE SIZE.

Than Tims solution popped up. SEE ALTERNATIVE

That means at very breakpoint another background file / size + a bit of code.

Here is the problem that the background pictures do not scale properly like in the background supersizer action modus, a blank white space at the bottom appears.

  • TIM

I hope I understand your suggestion, but I am not sure if this is a practical workaround. First I have to experiment in every page + media width tabs the right size of the background picture. What an amount ;) if I have only 8-10 pages x 4 media width… Every time the client changes textsizes/pagesizes I need to find out again and open PS, resize the picture, export, import…

But I try this later today….

Tim Plumb

12 Nov 2014, 5:17 pm

I was thinking that you’d consider the height of your longest page and select an image that would size to fit without scaling up.

Part of the issue I had with the example I did was that I chose a landscape format image so it scaled the image up (and excessively so) when the screen was narrow but high. You can correct this by telling the browser to load a larger image when the screen exceeds the size of the image but, as far as I know, you’ll have to do this manually as Freeway only writes the breakpoint CSS based on the screen width.

Here’s an updated example; http://www.goto4.me/ev

Drag the browser window down to the smallest size you can (my Safari goes down to roughly 392 x 170) and then start to drag the widow taller. When you exceed the size of the current image (720 pixels) it should change to the next image size up (1152 pixels). If you wanted to you could stack any number of images in the site and have each load depending on the available browser width and height.

You can see the edited CSS here; http://www.goto4.me/ew

Personally I think I’d be inclined to load the site with three versions of each image and target these at mobile, tablet/laptop and desktop displays. If you squeeze the images as far as you dare and deliver the page in a compressed format then you shouldn’t see the site slow down too much. Also one an image has been downloaded the browser will serve the next instance of it from the cache which will dramatically improve the page performance. If you keep the mobile breakpoint image the same throughout the site the image will get loaded from the cache on every subsequent page on the site. Regards, Tim.

On 12 Nov 2014, at 16:39, sonjanna wrote:

I hope I understand your suggestion, but I am not sure if this is a practical workaround. First I have to experiment in every page + media width tabs the right size of the background picture. What an amount ;) if I have only 8-10 pages x 4 media width… Every time the client changes textsizes/pagesizes I need to find out again and open PS, resize the picture, export, import…


Experienced Freeway designer for hire - http://www.freewayactions.com

Tim Plumb - Experienced Freeway designer for hire

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro

sonjanna

12 Nov 2014, 5:28 pm

Thanks Andries,

interesting. The second link seems to be the same principel like the background supersizer action. The other one outruns my coding knowledge ;). But yes, there are plugins found in Google…..

german web/designer

Andries Kuipers

12 Nov 2014, 5:41 pm

Many actions/scripts/extensions are updated or better written versions of earlier scripts. They require smart knowledge of coding which I don’t own either. So I google a lot… :-) Op 12 nov. 2014 19:29 schreef “sonjanna” <[email protected]>:

Thanks Andries,

interesting. The second link seems to be the same principel like the background supersizer action. The other one outruns my coding knowledge ;). But yes, there are plugins found in Google…..

sonjanna

14 Nov 2014, 7:41 am

Thanks Tim,

I will think about your final suggestion. It is a way. Your effort was great indeed.

But still I am not satisfied with the workaround. There must be an easier way for this “simple” task in general!

One time in future actions should be able to influence different breakpoints.

It is a bit frustrating at the moment working with FW7 in order to get responsive websites, but without reliable actions and tools that are available in a wide range as I am used to. (Not to forget the design limitation in responsive design)

Only a simple responsive fadeshow of a header foto is a problem, which I would happily and quick do in Exhibeo, but SLIDE is not responsive. :(

Another client likes a responsive gallery with light box effect, but find the controls strange in THUMBLIE. Would prefer simple left and right arrows. What else? Showcase has no responsive output…

As we said, yes there are solutions in external codes, but this is exactly what I normally try to avoid, because it is such a time consuming matter. Workflows must be quick when self-employed.

Sorry for complaining…

I am deeply thankful that we got FW7 and softpress made a really good job! But we must quickly find workarounds for standard requests of clients, don`t you think?

Al the best! Hanna

german web/designer

Andries Kuipers

14 Nov 2014, 8:46 am

I agree with you Hanna. I miss also more small videotuts from Softpress for daily responsive questions and solutions. Thanks to this great community a lot of problems are solved. I really want to spend time at building a site, but rather in design and layout then in strugling and coding. That was my choice for FW a decade ago. Compared with e.g. Visual Composer in Wordpress the workflow in VC is more based on “What Do You Want?” and then make your choice between countless options. Fluid layout? Fixed width? Boxed?… Just click and go on. In Freeway I know what I want but the road to get there seems too often to go through mountains. Op 14 nov. 2014 09:41 schreef “sonjanna” <[email protected]>:

Thanks Tim,

I will think about your final suggestion. It is a way. Your effort was great indeed.

But still I am not satisfied with the workaround. There must be an easier way for this “simple” task in general!

One time in future actions should be able to influence different breakpoints.

It is a bit frustrating at the moment working with FW7 in order to get responsive websites, but without reliable actions and tools that are available in a wide range as I am used to. (Not to forget the design limitation in responsive design)

Only a simple responsive fadeshow of a header foto is a problem, which I would happily and quick do in Exhibeo, but SLIDE is not responsive. :(

Another client likes a responsive gallery with light box effect, but find the controls strange in THUMBLIE. Would prefer simple left and right arrows. What else? Showcase has no responsive output…

As we said, yes there are solutions in external codes, but this is exactly what I normally try to avoid, because it is such a time consuming matter. Workflows must be quick when self-employed.

Sorry for complaining…

I am deeply thankful that we got FW7 and softpress made a really good job! But we must quickly find workarounds for standard requests of clients, don`t you think?

Al the best! Hanna

billy kimmel

3 Feb 2015, 10:34 pm

Tim, I’m using your responsive background image mark up. Is there a way to avoid the space that the mark up item causes when placed inline?

http://smartytest.com/Wren/

Thanks

Billy

billy kimmel

3 Feb 2015, 10:37 pm

Forget that Tim. I figured it out. I’m an idiot.

Billy

billy kimmel

5 Feb 2015, 12:19 pm

Hey Tim, So I spoke too soon. I am using a responsive background image and it works. However when I place the code in the markup of my page Before it causes my CSS Menu to break. The sub menus won’t drop down. Even weirder is when the code is in the mark up, it solves a space issue with my Web Yep image and the (Long)text below it. Any idea why? When I remove the mark up, the sub menus work again but the space below my Web Yep image returns. Ugh! Any insight. Any idea what about this code causes the CSS Menu to break?

<script>

function displayWindowSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }
    document.getElementById("dimensions").innerHTML = myWidth + " x " + myHeight;
};
</script>

Thomas Kimmich

5 Feb 2015, 1:51 pm

Any idea why?

Yep. Wrong place - wrong method.

Place via “insert -> HTML Markup” an absolute positioned item on your page and put this code in there:

<span id="dimensions" style="font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#fff;background-color:#000;padding:10px;position:absolute;top:0;left:0"></span>
<script>
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }
    document.getElementById("dimensions").innerHTML = myWidth + " x " + myHeight;
};
</script>

If it solves all your pains - not sure, but most.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

billy kimmel

5 Feb 2015, 1:59 pm

I have done that, however it creates a space on the the top of my page. All other inline dive fall below it including my Menu. Any way to remove the space that the mark up item creates?

Thanks

Billy

Thomas Kimmich

5 Feb 2015, 2:07 pm

Just to be sure:

You placed the code into the Page HTML-MarkUp, right?

This is simply wrong because it needs to be placed in the Menu Context “Insert -> MarkUp-Element” (as already written).

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Thomas Kimmich

5 Feb 2015, 2:09 pm

… oh yes - and place it “absolute” top left 0. no need for inline here.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

billy kimmel

5 Feb 2015, 2:11 pm

Ok. Tim had it inline so I thought that was required. I’ll try it.

Billy

billy kimmel

5 Feb 2015, 2:36 pm

Any idea what may be causing the space below my Web Yep image. When I had the mark up in the “Page” mark up, it wasn’t there. The text below it is a Web Yep Long text Element. The remove P Tag Action does’t work to fix this issue.

billy kimmel

5 Feb 2015, 2:46 pm

Her is the web page http://smartytest.com/Wren/

Thomas Kimmich

5 Feb 2015, 2:59 pm

For what specifically do you need this code?

I honestly can’t tell you what happens width the WY-image - sorry.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

billy kimmel

5 Feb 2015, 3:06 pm

Responsive Background Image. The Stripes.

Thomas Kimmich

5 Feb 2015, 3:18 pm

The code you try to insert is for this:

http://www.evernote.com/shard/s246/sh/bf86050e-c2ae-4f0b-b726-741e86f17e18/3a0ceb88003f86ec9cedb0a1ec3a8703

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Back to Top

Carla

5 Feb 2019, 2:48 am

Hey all I wonder if anyone can help with Background supersizer.. No matter how I label photos I cannot get my order correct.. Is there a trick to control the order of photos in folder. I set the start photo to 1. and I even called the photo 1. Ive also tried other titles but nothing works. thx all

C