How to make responsive web site? -...

User 2835042 Photo


Trial User
1 post

I am new to Coffeecup and responsive web sites in general. I was going to use Webflow which seems pretty comprehensive but is quite daunting to start.

I see CC has some products to do this job but I am totally confused by the names of the different apps and what they actually do. What is FoundationFramer? What is Responsive Site Designer? What is Responsive Content Slider? What product will enable me to build a responsive web site?

Totally confused and the CC site does not seem to help!
User 434929 Photo


Ambassador
938 posts

Are you familiar with two major responsive front-end framework Zurb Foundation http://foundation.zurb.com/
and Twitter's Bootstrap http://getbootstrap.com/ ?

There is not much desktop application out there for building visually Responsive Website, Most of them are online subscription bases as you mentioned such as Webflow and etc.. they are on monthly / yearly subscription bases.

Whereas with CC product you can build unlimited sites for life time.

Responsive Site Designer is an application as it's name says for building Visually design front-end websites with in house responsive front-end framework called Coffeegrinder ( http://www.coffeecup.com/designer )

Responsive Foundation Framer https://www.coffeecup.com/foundation-framer/ currently in beta stage and it's application for building visually the most advanced responsive front-end framework of Zurb Foundation ( http://foundation.zurb.com )

Responsive Content Slider is application for creating responsive slideshows for your website or stand alone presentation , and it's not only for Slideshow, you can build powerful presentation and slides as same as powerpoint slides and even static website as well ( http://www.coffeecup.com/responsive-content-slider )

Responsive Site Designer & Responsive Content Slider both available for test drive, download and see it if it's for you.


Guys at coffeecup are awesometacular.
User 1617439 Photo


Registered User
12 posts

I have the responsive products including the Foundation Framer beta but am having difficulty makeing the transition from Visual Site Designer to the responsive products. When I open VSD I just place stuff but when I open a responsive design tool I am not sure where to start. I guess I don't know how to "think" RSD even though I understand why I want to use the product. Do I have to make a layout with one program and then fill it with a designer program? Maybe it's just a chicken and egg thing and I just need a CC RSD for Dummies???
Thanks, Mike B.
User 2140875 Photo


Registered User
367 posts
Online Now

Mike,

I also moved for VSD to RSD. It was and still is a bit of a learning curve and I was initially confused. I have learned to think of RSD as almost a spread sheet, with rows, columns an cells. You can place your design elements anywhere in the rows and columns and there are numerous adjustments you can use to tweak each "cell". Within RSD not only do you develop the design of your site, but you also place the content.

I was not able to get into the Beta Foundation Framer program so cannot comment about that.

But I can say that after a couple weeks I am much more comfortable with RSD. VSD was and still is a great program though.

Galen
User 434929 Photo


Ambassador
938 posts

Ok I had same difficulties as my early time. to make your job easy take A4 size paper and draw what you want your site look alike and what elements in what location of A4 size, this is for desktop.

And Now take another A4 size paper but this time fold in half and turn it's layout to portrait and start draw and position your web elements on that paper size and this time think of medium devices such as tablet.

Same goes for small devices as well. then back to either RSD or RFF.

Now set your break points for A4 size and add Row for each section + Container then drag elements inside container and position it as you draw on paper, simple as that.

little by little along the road while progressing you will learn a lot.

keep in mind, from which size of paper you want to start, from A4 size for desktop or A2 for mobile.

I usually set one break point for each devices size and I will to try center the container plus it's elements if necessary.


Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

Sorry I made mistake on paper sizes :)

A4 size of paper for desktop

A7 size of paper for Mobile
Guys at coffeecup are awesometacular.
User 289442 Photo


Registered User
161 posts

Mansour ... wrote:
Ok I had same difficulties as my early time. to make your job easy take A4 size paper and draw what you want your site look alike and what elements in what location of A4 size, this is for desktop.

And Now take another A4 size paper but this time fold in half and turn it's layout to portrait and start draw and position your web elements on that paper size and this time think of medium devices such as tablet.

Same goes for small devices as well. then back to either RSD or RFF.

Now set your break points for A4 size and add Row for each section + Container then drag elements inside container and position it as you draw on paper, simple as that.

little by little along the road while progressing you will learn a lot.

keep in mind, from which size of paper you want to start, from A4 size for desktop or A2 for mobile.

I usually set one break point for each devices size and I will to try center the container plus it's elements if necessary.




I for one thank you for the above aide description. Would really like you to do one of your video on using that. Like some here, I'm still having trouble thinking responsive. Understand the concept, but get lost in the details constantly. The paper visual help just may put me over the top after all..... lol
User 2315575 Photo


Registered User
42 posts

Great information! I was asking the same question.... "RFF does WHAT?" I came from the HTML editor and decided that RSD was what I wanted to use. I found RSD super easy to use..... but I had more trouble getting the file system in my head that anyone would believe. Poor Scott! Glad I was far away... I am sure there were times he wanted to shoot me! :o

Thanks for the original question and Mansour.... what a great post!!! THANK YOU!!!

Dan.

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.