Share your websites made with Responsive Site Designer


Registered User
31 posts

Thanks Izzi for that info - I had already reduced the pictures quite a bit but realise that they were still bigger than what they need to be and with too high a resolution. I experimented further and yes you are correct - resizing (I use Paint Shop Pro) reduces the KB significantly and for casual web use is not detectable.
Although we nominally get 'broadband' via satellite service it can be slow and sometimes with slow download it's hard to detect poor load times caused by the page size itself so I really appreciate the feedback on loading speed. But the cell phone network is also not brilliant and that is what most tourists in the area (our main target audience) will use. So yes, light rate pages are a must.
Adam - I would love to get Website Insight but haven't the time to learn it at the moment (as a trial ) and can't buy outright yet because I need a certain power tool first - have to turn two wine barrels into dog houses - it's not all web design here you know!
I will bite the bullet and resize pictures for now. Essentially there will a basic framework website that is consistent across all sizes but the content (mainly the images) will be resized at 2, maybe 3, breakpoints.
But isn't it great that RSD can do that - CC really do make some lovely software.


Registered User
67 posts

@Flemming... absolutely about CC -- I first got hooked on them years ago when they offered a great looking email sign up that was exquisite and easy to use -- the next best thing I bought was their shopping cart, after trying many other ones with many bells and whistles but i could never get them off the ground. The concept of designing responsively has stumped me for quite a while and that's why i branched out, but i'm a firm believer of using all the software that ties into one another. And yet, CC knocks my socks off again by allowing their content slider to be used independently with other software code. I rave about them all the time for product, price and service. Being on their email list let's me get what I need at an affordable price. I do have Website Insight and it is good for pinpointing problems and then I have to go correct them and see if what I did made the difference necessary. But for photos, the rules are this: 1) take a good photo -- I loved your photo of the farm at a distance so I could see the rows of vines and how you protected them -- I loved that. 2) Resize those suckers... If your web page at its widest is 940 pixels, you can see a 400 pixel wide photo will take up have the page. 3) Save them at a good resolution... it doesn't have to be 100%; but you sure don't want blurry. and 4) On your program you should have gizmos to make the photo look better... adjustments. Sliding the darkers darker and bumping the light to a little lighter will make it pop. You should have filters that smooth things too, and also take out noise (ughly particles) -- photoshop has a lot more ''make the photo look better'' tools but I bet PaintShop does too. Take the time to play with them. When I resize a photo I do it backwards. First I make a document file the size I want the photo to be. Then I import that big old photo and I move it around that image size and scale it down to show what my customer wants to see -- I focus on the focus. After I get it to where I want it, I do another little trick. I marquee, cut and paste the entire image into another layer. In my little pointy head I just want what I want and not the rest. JPG is a good format but 24-PNG is good too, so I always experiment. The game is to get the best looking photo without all the weight. With the automatic resizing these responsive programs do, I don't resize many photos at all -- I choose the automatic resize feature and that's a percentage thing, but if the photo looks bad, then I do resize it. I don't go smaller than 300 pixels wide because that fills the smallest format I use for breaking points. So my rule of thumb is 300 to 450 pixels wide -- and let the depth/length fall where it may. The real key, I believe, is what camera we use for the original photo and definitely check out big corporate sites and see how they handle photos (they have the big bucks we don't have to invest in sophisticated equipment) -- apple is a great place to go and any big camera store like B&H -- because they are the experts trying to turn on us to all their new stuff -- adobe is another place to cry -- I mean learn from.

I liked your site because it was well organized and broken up nicely between text and image. Its a good site.
Isabel Smith
Isabel Smith Art and Design
Web and Graphic Design, Illustration and Calligraphy, Pet Paintings too!
www.isabelsmith.com


Registered User
33 posts

Hi all, I just wanted to post this as a thank you for all the helpful tips and tricks along the way. All the great tutorials, and some really great finds in here (Like the Unify CMS system. I'm implementing that for a lot of clients by the way. So much easier than coding all the custom stuff I've done in the past. I mean way nice for the price.)

This website here: http://nsr.jmchaffie.com/
Will soon be live after their domain transfer goes through at http://namesakeradio.com/
The locked pages logins are simply: guest / guest
Those are DJ Lounge and Backstage Pass links at the bottom of the page.

So if the first link appears broken whenever you read this, it is most likely that I have removed the test-build subdomain from my server and pushed it to their live server.

The details: I've put a little bit of everything I've learned from over the last few weeks as kind of an homage to everyone. You'll notice the font and layout of teh front page is similar to the recent (as of this writing) tutorial from CC on a simple RSD layout and design. Very nicely done and I really liked the font most of all. I also had a lot of fun playing around with a few surprise transitions. I may remove a few, but I think the image 'buttonizing' I've done is subtle enough to not be too over the top. I haven't decided yet.
I made my breakpoints differently for different reasons, and as of this writing not all the pages are perfectly responsive as I'm still deciding just how I want them to break, but overall it has come together nicely imho and I should finish up in the next day or two.

Thanks again all I hope you enjoy it. Any criticisms or ideas are certainly welcome so no worries - I've been doing this far too long to worry about taking my lumps :)

Take care all!
- John


Registered User
31 posts

Izzi wrote:
@Flemming... absolutely about CC -- I first got hooked on them years ago when they offered a great looking email sign up that was exquisite and easy to use -- the next best thing I bought was their shopping cart, after trying many other ones with many bells and whistles but i could never get them off the ground. The concept of designing responsively has stumped me for quite a while and that's why i branched out, but i'm a firm believer of using all the software that ties into one another. And yet, CC knocks my socks off again by allowing their content slider to be used independently with other software code. I rave about them all the time for product, price and service. Being on their email list let's me get what I need at an affordable price. I do have Website Insight and it is good for pinpointing problems and then I have to go correct them and see if what I did made the difference necessary. But for photos, the rules are this: 1) take a good photo -- I loved your photo of the farm at a distance so I could see the rows of vines and how you protected them -- I loved that. 2) Resize those suckers... If your web page at its widest is 940 pixels, you can see a 400 pixel wide photo will take up have the page. 3) Save them at a good resolution... it doesn't have to be 100%; but you sure don't want blurry. and 4) On your program you should have gizmos to make the photo look better... adjustments. Sliding the darkers darker and bumping the light to a little lighter will make it pop. You should have filters that smooth things too, and also take out noise (ughly particles) -- photoshop has a lot more ''make the photo look better'' tools but I bet PaintShop does too. Take the time to play with them. When I resize a photo I do it backwards. First I make a document file the size I want the photo to be. Then I import that big old photo and I move it around that image size and scale it down to show what my customer wants to see -- I focus on the focus. After I get it to where I want it, I do another little trick. I marquee, cut and paste the entire image into another layer. In my little pointy head I just want what I want and not the rest. JPG is a good format but 24-PNG is good too, so I always experiment. The game is to get the best looking photo without all the weight. With the automatic resizing these responsive programs do, I don't resize many photos at all -- I choose the automatic resize feature and that's a percentage thing, but if the photo looks bad, then I do resize it. I don't go smaller than 300 pixels wide because that fills the smallest format I use for breaking points. So my rule of thumb is 300 to 450 pixels wide -- and let the depth/length fall where it may. The real key, I believe, is what camera we use for the original photo and definitely check out big corporate sites and see how they handle photos (they have the big bucks we don't have to invest in sophisticated equipment) -- apple is a great place to go and any big camera store like B&H -- because they are the experts trying to turn on us to all their new stuff -- adobe is another place to cry -- I mean learn from.

I liked your site because it was well organized and broken up nicely between text and image. Its a good site.

Thanks Izzi - I went away and resized images (using Paintshop Pro) into three groups to suit different screen sizes/breakpoints. They are all JPG and sizes 700, 520 & 360 px wide. Thumbs are small and only 70 px wide. They all start off as 2492 px wide - not the sharpest but well and truly adequate quality when downsized. Actually went a lot quicker than I expected - once I got into automaton mode I had it done in a couple of hours.
I also removed the background image (110kB) once I got to the 600 px breakpoint - it was almost redundant because only a small portion was showing - just easier to remove it altogether and massage the other bits to fill the space.
As my business needs grow I'll definitely be investing in other CC software. I like the way they do things.


Registered User
67 posts

i'm glad that worked out. folks never realize all the background work it takes to get things to work right.
Now I'm learning what the heck all these containers, elements, push, pulls, hero/hero units and so on mean and when to use them. But cc is the way to go. I used the cc menu on the start of this site. www.phoenixhealthinstitute.com and I will make the breaks first before putting the content in. Its tricky. But i love cc products. I'll be using the responsive form, and slider onthis site if i can. support has been great.
Isabel Smith
Isabel Smith Art and Design
Web and Graphic Design, Illustration and Calligraphy, Pet Paintings too!
www.isabelsmith.com


Registered User
5 posts

Ok my turn to say how great RSD is, and it is absolutely amazing once you get the hang of it. Can't praise Coffee Cup enough for the software they create.

Here is some sites I've made, including my own at the top of the list!
http://www.quality-website-design.co.uk/
http://www.liedetectorinvestigations.co.uk/
http://www.jaltservices.com/
http://www.nnoonengineering.co.uk/
http://www.drain365.com/


COO
772 posts

Izzi wrote:
folks never realize all the background work it takes to get things to work right.


It's funny that you say that Izzi, we are very often experiencing the exact same thing when it comes to software feature requests or changes. Just could not resist mentioning this :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.


Registered User
67 posts

@Darren: loved your websites, I learn so much from this forum in getting the feel for responsive design; @Bob: My thankfullness to CC for the way they present useful tools at affordable prices backed by great support. It makes my head dizzy thinking about the time yall have spent... but time is time and right now you just would not believe how many cracks are in the wall I'm banging my head on to figure out how to manually upload my responsive email contact form. :-(
Isabel Smith
Isabel Smith Art and Design
Web and Graphic Design, Illustration and Calligraphy, Pet Paintings too!
www.isabelsmith.com


Registered User
5 posts

Hi Izzi, thanks for the good comments, appreciate it. I won't deny I spent a lot of hours figuring out how to do everything, but the end results are worth it.


Registered User
5 posts

I think I shall do one last post before people get bored of me! I've made about 15 sites now with the coffee cup stuff. If you guys ever require a testimonial for anything I'd be happy to give it. This is my latest one, made using form-maker on the contact page, menu-builder and of course RSD.
http://www.spanish-translator-london.co.uk/


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.