search

zpfled / guevaras

website for 2Chez restaurant
2chezrestaurant.com
0 stars 0 forks source link

Optimize Images for Web #10

Closed davecrow closed 10 years ago

davecrow commented 10 years ago
zpfled commented 10 years ago

So, right now, I have a div with the class 'bcg-gradient' covering the welcome section image. This is because I don't have any decent image editing software, and could not get the effect of black fading down to the bike image that I wanted.

However, it's a janky solution, and would be better if we just had the image look like we want it to look instead of having to cover it with a gradient-ed div.

davecrow commented 10 years ago

I actually don't think it's a terrible solution. Using CSS to handle colors and gradients is more flexible than if we build it into the image.

But I was thinking about using a different image for the welcome section. I really like the bike, but the aspect ratio doesn't work very well for phones...and this is supposed to be a mobile first site. :-)

zpfled commented 10 years ago

Well, ok.

I really, really like the bike, too. It looks good, and it's in the entryway to the actual restaurant so there's a nice congruency there between website and restaurant.

What do you think of the black-fading-down-to-bike-image on mobile? Is it a reasonable option?

davecrow commented 10 years ago

It's reasonable...but not excellent.

What about the bike image from the other angle where the seat is in focus? That'll also help in not look like an ad for Sanpellegrino (which is my other concern).

Dave Crow

On Fri, Mar 21, 2014 at 7:54 PM, zpfled notifications@github.com wrote:

Well, ok.

I really, really like the bike, too. It looks good, and it's in the entryway to the actual restaurant so there's a nice congruency there between website and restaurant.

What do you think of the black-fading-down-to-bike-image on mobile? Is it a reasonable option?

Reply to this email directly or view it on GitHubhttps://github.com/zpfled/guevaras/issues/10#issuecomment-38340015 .

zpfled commented 10 years ago

That could work. I’ll play around with it this weekend. Have fun on vacation! Where are you going? On Mar 21, 2014, at 9:15 PM, davecrow notifications@github.com wrote:

It's reasonable...but not excellent.

What about the bike image from the other angle where the seat is in focus? That'll also help in not look like an ad for Sanpellegrino (which is my other concern).

Dave Crow

On Fri, Mar 21, 2014 at 7:54 PM, zpfled notifications@github.com wrote:

Well, ok.

I really, really like the bike, too. It looks good, and it's in the entryway to the actual restaurant so there's a nice congruency there between website and restaurant.

What do you think of the black-fading-down-to-bike-image on mobile? Is it a reasonable option?

Reply to this email directly or view it on GitHubhttps://github.com/zpfled/guevaras/issues/10#issuecomment-38340015 .

— Reply to this email directly or view it on GitHub.

davecrow commented 10 years ago

Cool.

We're going to Vegas with Megan's family.

-Sent from my phone

On Mar 21, 2014, at 8:52 PM, zpfled notifications@github.com wrote:

That could work. I’ll play around with it this weekend. Have fun on vacation! Where are you going? On Mar 21, 2014, at 9:15 PM, davecrow notifications@github.com wrote:

It's reasonable...but not excellent.

What about the bike image from the other angle where the seat is in focus? That'll also help in not look like an ad for Sanpellegrino (which is my other concern).

Dave Crow

On Fri, Mar 21, 2014 at 7:54 PM, zpfled notifications@github.com wrote:

Well, ok.

I really, really like the bike, too. It looks good, and it's in the entryway to the actual restaurant so there's a nice congruency there between website and restaurant.

What do you think of the black-fading-down-to-bike-image on mobile? Is it a reasonable option?

Reply to this email directly or view it on GitHubhttps://github.com/zpfled/guevaras/issues/10#issuecomment-38340015 .

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHub.

zpfled commented 10 years ago

I've noticed that the images still load very slow on heroku. I don't know if that could possibly be due at all to the repo being so large, thanks to a bunch of huge unused image files, or if it's just that our pics are still too big on the site.

davecrow commented 10 years ago

It's probably a combination of both. I'll take a look when I get a chance.

-Sent from my phone

On Mar 24, 2014, at 1:49 PM, zpfled notifications@github.com wrote:

I've noticed that the images still load very slow on heroku. I don't know if that could possibly be due at all to the repo being so large, thanks to a bunch of huge unused image files, or if it's just that our pics are still too big on the site.

— Reply to this email directly or view it on GitHub.

zpfled commented 10 years ago

So, on a phone, the images obscure the text in a couple spots (hours and find us). The option that occurred to me is to darken the actual images a bit to make the text stand out more, but you may have a better idea. Just wanted to let you know about that.

zpfled commented 10 years ago

I did an initial optimization after doing a little rudimentary research. Site loads a lot faster now. A lot:)

I don't know if we need to add more images in different sizes for different screens. Site looks good on my phone vertically and horizontally, although the welcome image is underwhelming in the horizontal view (it just shows the top of the bar). Obviously it looks great on a computer screen.

I went ahead and deployed it, since that was the last roadblock that you mentioned. I'd still like to get that gallery section set up for Todd, and I'm sure little things will crop up here and there that need fixing, but I'm pumped with where we're at now.

If I jumped the gun and need to pull it back offline, I can do that. I haven't sent out my brag tweet yet, so chances are no one will have noticed:)

davecrow commented 10 years ago

Sweet...I think it's fine to "soft launch" it like this. We can clean up a few more things this week, and then let the brag tweets flow!

zpfled commented 10 years ago

So we have a little dilemma. Here's the facts:

This means that, as far as I can tell, we have no other option than to make the menu content scrollable, leaving the menu section at a fixed height (different sizes for different viewports, of course).

So have a look at it, and see if you have any ideas for how to indicate to users that they should scroll down the menu to see everything. Maybe just a "Scroll down" message at the bottom of the menu content, or whatever.

Or if I'm wrong about this, that's cool too.

davecrow commented 10 years ago

Yikes.

I'd like to see what the scrollable menu content looks like. It looks like you tried committing something that did this, but it's not working that way after I pulled your changes.

Also...STOP COMMITTING DIRECTLY TO MASTER!!! ...and I mean that with all the love in the world. :-)

Dave Crow

On Sun, Mar 30, 2014 at 6:39 PM, zpfled notifications@github.com wrote:

So we have a little dilemma. Here's the facts:

  • An iPad in landscape view and a laptop such as my own (13" Macbook Air) have the same viewport width, or at least very close.
  • The menu section on our site has variable height, depending on which menu you're viewing.
  • IOS does not play nice with 'background-attachment: fixed' CSS backgrounds. It won't auto-size images to fit the background unless the background-attachment property is set to 'scroll'. (This leaves a very pixelated, way-too-zoomed-in image unless the image file is sized just right).
  • Chrome and Safari on my computer, on the other hand, will display background images in variable-height sections incorrectly UNLESS the background-image is set to 'fixed'.

This means that, as far as I can tell, we have no other option than to make the menu content scrollable, leaving the menu section at a fixed height (different sizes for different viewports, of course).

So have a look at it, and see if you have any ideas for how to indicate to users that they should scroll down the menu to see everything. Maybe just a "Scroll down" message at the bottom of the menu content, or whatever.

Or if I'm wrong about this, that's cool too.

Reply to this email directly or view it on GitHubhttps://github.com/zpfled/guevaras/issues/10#issuecomment-39047523 .

zpfled commented 10 years ago

Oh, sorry...I gotta work on that.

Check out twochez.herokuapp.com to see what everything looks like with a fully populated menu.

zpfled commented 10 years ago

I also added items to the sqlite development db so that you can see the scrollable menu when running the app locally.

I think the development db didn't have enough menu items in it to require scrolling, which is why you couldn't see the scrollable menu content. Now it does.

davecrow commented 10 years ago

So I feel like the scrolling menu ruins the smooth feel of the site. It's especially weird on the phone because you end up with two different scroll areas that behave differently.

Here's what I think we should try next: Attach the image to the bottom of the containing div so that when the height changes the image is just pushed to the bottom instead of resized and the background goes from dark gray and fades into the image (like the welcome section used to do).

davecrow commented 10 years ago

Also, I'm trying to kick a cold, so I'm heading to bed now. But I'll check it out tomorrow. We have a bunch of devices at the office so I'll test it out there too.

zpfled commented 10 years ago

sounds good, I'll give it a shot tonight.

Feel better!

davecrow commented 10 years ago

I just pulled the changes and I think this is working better...especially if you can get the gradient working.

zpfled commented 10 years ago

I agree, this is a nice solution. I think I have the gradient working in all viewports now.

davecrow commented 10 years ago

After looking at this for a bit, I think the image should stick to the top of the container and fade to black on the bottom so it doesn't move up and down as you switch menus.

zpfled commented 10 years ago

Sure, NOW you tell me.

Shouldn't be hard:) On Apr 2, 2014, at 9:47 PM, davecrow notifications@github.com wrote:

After looking at this for a bit, I think the image should stick to the top of the container and fade to black on the bottom so it doesn't move up and down as you switch menus.

— Reply to this email directly or view it on GitHub.

davecrow commented 10 years ago

I'm working on it now if you're focused on other stuff.

zpfled commented 10 years ago

Ok, cool. Should be a quick fix, just mess with the gradients I wrote.

davecrow commented 10 years ago

Just pushed the changes.

zpfled commented 10 years ago

Oh I like that better. It breaks up the menu image and the hours image too.

So, Is it brag tweet time!?

On Apr 2, 2014, at 10:17 PM, davecrow notifications@github.com wrote:

Just pushed the changes.

— Reply to this email directly or view it on GitHub.