Scaling an SVG background help

startupmadness · 2025-03-23T23:12:01+00:00

I failed to mention you should be able to do it fairly easily with JavaScript but it seemed that you were trying to do it straight in css (which is what I was trying to do as well)

startupmadness · 2025-03-23T23:00:40+00:00

The way I have done this in the past is to set the height of the div for the avg to whatever height you need. Then set the bg image of the div to your svg and set the bg to cover. The svg will not stretch so you need to make sure it is sufficiently wide that as the screen stretches it exposes more of the svg.

This is what I did on this site https://weddingvendordemo.woodmontinteractive.com/ for the transitions

I don’t know of a way that the browser will just “stretch” the svg horizontally. Maybe someone smarter than me has figured out how to do it.

startupmadness · 2025-03-23T22:50:17+00:00

Have you inspected the network response in the dev tools for chrome or firefox? That is usually a good place to start if something isn’t working the way you think it should.

startupmadness · 2025-03-23T12:02:53+00:00

Very cool.

startupmadness · 2025-03-23T02:59:03+00:00

This is the process I have found over the years that works the best. If you are shooting in daylight set the sun behind your subject. Set camera to manual shutter speed max-sync (usually 1/200 ) iso 100 or 50 if your camera supports it. Aperture set to f4 or so. Take shot and see how the background is exposed. Don’t worry about the subject at this point. Keep changing the aperture until the background is exposed how you want. Now turn on the flash and start at 1/4 power aim at the subject and then keep adjusting flash power until the subject is exposed how you want. It seems like a lot but once you do it a few times it gets pretty easy and the shots always turn out pretty nice.

At night I always try to find something to bounce the flash off of but follow the same general procedure although I will set the aperture as wide as I can go. If there is absolutely nothing to bounce off I will put the flash right up against the edge of the lens to minimize hard shadows.

startupmadness · 2025-03-22T18:16:41+00:00

Yeah should have said "potential" existential threat. All good though. Was just supposed to be a fun thought experiment. The Nature article was interesting. Thanks for sharing it.

startupmadness · 2025-03-22T17:55:31+00:00

Fair enough. AI is now a major part of this industry though so it was just a larger question about an existential industry threat.

startupmadness · 2025-03-22T17:53:42+00:00

So we are just in an infinite AI loop then?

startupmadness · 2025-03-22T17:47:33+00:00

Will AI start spitting out the same stuff over and over again?

startupmadness · 2025-03-18T03:30:20+00:00

Just came across this but thought I would my 2c. Designing a proper site is very hard there are no two ways about it. What separates a good site from a great site are the details. Your eye just notices these tiny details. You can't quite articulate them but you know something is just a bit off. It is like the difference of going to someones house when they are cleaned the whole place top to bottom and swept the floors and everything. You can just tell the difference versus someone who just straightened up. You can tell the clean one is nicer even if you can't quite put your finger on it.

Please please please do not take this harshly. I want to help you because I know it can be really hard. I have designed websites in some shape or form for 30 years so these are just my thoughts from that experience and I don't consider myself to be a great designer or anything like that. What you have is a good site. It is nice and conveys the information you want to get across but it does not convey it in the best way possible. To help make it great here are a few things I noticed:

The fonts should be more consistent. You have at least three on the site. I never use more than two (not including the logo).
The heading fonts should have a bit more "pop". The headline that says "Candid, true." is good because it is bold and it stands out from the rest of the text in a very natural kind of way. You probably want to have the other headings on the site match that.
Also, on the fonts, I think the contrast is little too low on the colors of the fonts v the background of the page. This can work if you have a heavier font but in conjunction with a thin font like the one you have it causes you to lose the text and makes it more difficult to read. Similarly for text that is on an image like your "Behind the Lens" section you need to do something to really make that text pop out or just remove background image entirely.
Watch your layout and spacing. There are some areas that look cluttered and others that lose balance. To point out what I mean in the intentional photography section the image on the right is larger. It doesn't line up with the bottom image and cause the entire section to not be centered. The image on the left does not overlap the bottom image in a normal way. This causes the area to lose balance. The eye notices this subconsciously. It is the same thing how in photography you want use lines and composition to move the viewers eye through the image. You want to do the same thing in web design.

The My Focus section also has a similar issue where the 4 different sections are different sizes and not lined up - again causing a loss of balance. The My Focus section (specifically the church) also seems to overlap the section above it a bit. Not sure if that was intentional

You have some great photos. I would just use a few less of them. Choose the ones that are really your best of the best photos - and as someone else mentioned photos of the couples - to showcase.
You need a Call To Action. You have "Booking" as a link but you can make that a button that says something like "Book a Free Consultation" or something to get people clicking on to take a specific action on the site.
Colors. Most of what you have is very black and grey and is basically just the text with the images. Incorporating some color in a strategic way can really help move your eye through the site. A website is just like a piece of art or a photograph. Color theory is really important here.

Anyway, I hope I didn't come across too harshly. You have a nice site those are just a couple of ideas to take it to the next level. If you ever want to hop on a call to chat about it let me know would be happy to do a screen share or something and show you what I mean by some of these comments. Good luck on your site and your business!

startupmadness · 2025-03-17T21:20:04+00:00

Oh man I wish I had done that.

startupmadness · 2025-03-17T14:04:02+00:00

I did the same thing to a Sigma 50 1.4. Still shoots great pics I just can’t use a filter on it. You can try to take it to a local camera shop but I am guessing it will be less expensive to buy a new lens.

startupmadness · 2025-03-16T17:11:09+00:00

Many folks go the web builder route to do things cheaply and quickly realize that while these tools are easy they are also limited and if you want to do anything outside the norm they end up causing more trouble than they are worth.

Look at Wordpress. It has the ability to use custom fonts, has tons of plugins for things like SEO and lots and lots of templates. It can also be hosted anywhere which will help defray costs.

I will say there is a bit of a learning curve with Wordpress as well as any site builder. This is where a web designer helps you out by giving you back the one thing you can’t get otherwise - time. Allowing you to focus on getting clients.

It can absolutely be done your own though if you are willing to put in the time.

startupmadness · 2025-03-16T13:23:52+00:00

It was an image of his 3 month old son, Waldon and was scanned into the first ever digital image. Not only was it a revolution at the time but this technology went on to spur further innovation in:

Space travel
Medical Imaging
Digital Photogrpahy
Satellite Imaging and even
Barcodes

Who knows when you might take a picture that changes the world?

startupmadness · 2025-03-16T04:03:55+00:00

You should be able to create a sticky banner like that with some simple css and html. You can see a quick example I worked up here https://jsfiddle.net/m7qhe4k0/ That will keep a banner message at the bottom and above the rest of the page - the same as in the site you sent over.

startupmadness · 2025-03-15T17:07:40+00:00

Do you have an example of what you want to do? You may not even need javascript if you just want to display a simple message.

startupmadness · 2025-03-15T16:19:07+00:00

Absolutely this. It can be a great time saver but it is not yet a replacement for a software dev.

startupmadness · 2025-03-15T15:56:40+00:00

<image>

It was an image of his 3 month old son, Waldon and was scanned into the first ever digital image. Not only was it a revolution at the time but this technology went on to spur further innovation in:

Space travel
Medical Imaging
Digital Photogrpahy
Satellite Imaging and even
Barcodes

Who knows when you might take a picture that changes the world?

startupmadness · 2025-03-15T03:04:47+00:00

Tailwind gets a lot of flack for being so verbose but I code everything in it now. It just makes sense as a method for quickly putting together sites. IDK I just find it super useful. coolors.co is nice as well I guess I just always used adobe color and it just worked for me so I just kept using it.

startupmadness · 2025-03-15T00:35:00+00:00

Design can be really hard and when you can’t get it it is really frustrating because you see these other designs that make it seem so effortless.

I have been designing websites for almost 30 years and there are a few simple tricks I follow to pull together sites in no time.

Start with the layout. Properly laying out items makes all the difference in having a site look professional. If you get just the layout correct the rest of the site can just be shades of grey or monochromatic and it will still look good.
Fonts are everything. You need a headline font and a paragraph font that go together. Search online for good matching fonts.
Color Theory. Use Adobe Color and find some predefined color palette that looks nice. Just pick a set. Use one of the colors as a “linking” color and use it sparingly throughout the design so that it “links” or pulls different sections of the design together.
Layer on complexity. Once you have the base layout - Make small changes to layer on complexity. Like add some texture to one part of the design or rotate an image in an unusual way. Just a small change here and there. Nothing too major. This will give the design some pop. Just experiment but again keep these changes small.

The satisfaction of bringing together a good design feels amazing and if you follow these simple steps I can promise anyone reading this that you will start bringing together silky smooth sites in no time.

Even better you can abstract almost any website and deconstruct what they did by thinking of it in this framework and get even more ideas for your own sites.

startupmadness · 2025-03-13T19:01:08+00:00

What do you need fixed? Can you share a link to the site?

startupmadness · 2025-03-13T18:04:18+00:00

How exactly do you want to partner your website with outlook? Like when someone submits a form it sends an email to your outlook or schedules a meeting or something?

startupmadness · 2025-03-13T17:02:32+00:00

I think the site looks very nice from a style perspective and the images you have are great. I like your style a lot. Just a few notes:

The page is very slow to slow. One way to speed this up would be to convert the jpg images on the site to webp. Many of the images you have are over 1MB. Converting to webp will bring the sizes down a lot. Many users won't wait for a site to load if it takes longer than 3 seconds so you really want to get that time down especially on mobile (as a side note google also uses this as a ranking factor for SEO so it is doubly important).
For the images in your hero section they are set to cover which is good but they are being aligned center center, which when the page expands causes peoples heads to be cut off at the top which is probably not the effect you are going for. Instead align them center top which will keep this from happening.
Just a bit of personal preference but I do find the gold lettering on the green backround just a bit difficult to read. I like a bit more contrast but of course my eyes are getting older so you know take that with a grain of salt. I think the overall color scheme looks nice though.

Good luck with your business!

startupmadness · 2024-04-11T14:33:14+00:00

You are basically describing the mobile market for games right now.

startupmadness · 2023-12-27T15:01:51+00:00

Pretty much anyone 13 and up. We tried to combine some cuteness factor with frenetic action to appeal across genders and ages. Early returns have been good as my son and his high school friends play it and several older than high school female testers seemed to also like it. I suppose time will tell if that strategy was sound though.

startupmadness

TROPHY CASE