Old dog struggling with new tricks......

User 345577 Photo


Registered User
373 posts

Quick setup: Been an internet addict since before the WWW, using a SLIP connection to get on back when you had to use a separate program to download and display a simple jpeg image. Used Mosaic when it came out. Netscape? What's that?

Built my first web page back in the mid/late 90s, using notepad, and have mostly used the CC HTML Editor for the rest of them, although I've also made quickie sites with VSD. Recognizing the need to 'get responsive', I purchased Foundation Framer, Bootstrap Builder and Responsive Site Designer, but have not yet installed or tried out any of them. Yeah, I'm intimidated by them, and this is after watching some of the tutorial videos... :/ But my sites need rebuilding, and I have to get on the stick!

I've read some the threads about the VSD 2 Beta, which I have, and am wondering about the desktop-down/coffeegrinder issue that I've seen referenced in a couple of those threads.

It seems clear enough that users of RSD 1.5 are able to create a blank project in desktop-down, mode and open it in RSD 2, retaining that setting. As a raw newbie to these programs, I can't visualize building a site from the mobile-first perspective, and it seems much more intuitive to me to design for the desktop and then tweak sizes & positioning for smaller devices. So it seems that the best bet for me would be to use the trick with RSD 1.5 to start with the desktop setting.

However, Scott recommended uninstalling RSD 1.5 prior to installing the 2.0 Beta. So it would seem like I should install 1.5, create and save the blank project, and then uninstall it prior to installing 2.0?

I've also considered installing 1.5 on another of my computers to create the blank project, and then move it to the one where I'll be using 2.0. This (theoretically...) would avoid any potential conflicts that could develop by having both versions installed on the same machine contemporaneously.

But would it cause other problems? I read one post that mentioned that RSD uses information from the C:\Users\user-account-name\AppData\Roaming folder to pick up settings that refer to Framer & Bootstrap. And maybe RSD as well?

In other words, is it a bad idea to have 1.5 and 2.0 running on different machines, if the intent is to be able to load projects created Desktop Down on 1.5 and then try to open the project on a different computer running 2.0?

Probably making this more difficult that it should be, aren't I? :rolleyes:
User 303390 Photo


Registered User
97 posts

From another "old dog" (before WWW), I am using RSD v2 in a mobile first way. Yes, I find it hard to do it this way but everything on the web is now going this way. I often still do a quick sketch or three of my layouts in various forms before starting (as I too think in a desktop down way). I figured it is better to switch over now before I have too many sites built the other way. It is a challenge though!

User 345577 Photo


Registered User
373 posts

Thanks for your comment, Webby. (I like the 'old dog' profile picture... ;))

I had considered the 'Just do it this way from the get-go and be done with it' approach you've suggested, but I've never done more than a mental sketch of a layout of any page I've ever build, let alone 3 separate sizes! I would just kind-of build the page as I went along and adjust things so they made sense and filled the page in a pleasing manner.

So it's very foreign to me to try to conceive of 3 different layouts, concentrating on the smallest as a starting point.

Regardless of how I wind up approaching this, I'd still like to have an answer to the primary issue, regarding whether it makes sense to have 1.5 and 2.0 existing on separate machines, should I choose to create the dummy desktop-down project for doing it 'the old fashioned way'...
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Another old dog, from about the time when www came to be: Coding in Notepad was also my first approach. ;)

I think it's a good idea to have the two versions of RSD on different machines if you want to start from desktop size. I would also advise you to look at several responsive websites with different viewports, so that you get a feel for what the mobile-sized sites look like, how the contents are reorganized when the viewport changes. With the grid systems available, it is very easy to do this.
I was at first a sceptic, having been a coder for over 20 years. I did first one site in Foundation Framer and thought this is not going to save me any time. I spent about 2 weeks on it. Then I did another project in the same programme, and that took me just one day!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2706435 Photo


Ambassador
444 posts

I think you are getting tripped up over how small you need to start with. You have probably seen people do a desktop down, and they are making breakpoints at 460, 380, 320..... DON'T! I tried doing that - an it was a waste of time really. There are enough image and typography controls one should only need a few breakpoints for everything, unless you have a highly complicated website. The first size breakpoint range in Bootstrap 4 - is 0 to 575. That is alot of real estate. Foundation is 0-780 or close. You can get alot of info in there and get it to collapse if you still want it to look good on small cell phone. You don't want the text size changing at that size, people are still using their fingers, so making columns and rows that allow the section to collapse under each other is what you want. As you get larger viewport area, you are just bringing up other columns
You are not designing for 3 sizes, or 4 sizes. You are designing one grid. Because about 20 different sized viewports may see your website. You have android and iphones - portrait and landscape. There are at least 2 different standard sizes for tables - and each can also be used in portrait and landscape, and then there are all sorts of monitors, and laptops. Whatever sizes you design for may not be seen much. The whole purpose the breakpoints to stop the page flow from breaking, or having displeasing views. Some people want their logo or text to go from page end to page end, so when the viewport is reduced 20 px, their super long text or graphic gets unreadable. That is not a breakpoint issue, that is a design issue.

You want one grid design for your information. Going mobile first forces you to put the important stuff near the top or really close for scrolling with a thumb. Trying to stuff all your information on one page is not a good idea - create extra pages. with links. One topic webpages are easy to create. Do not get hung up one trying to fill out a index/home page with alot of information - its just bad for designing and even worse for SEO - there is a reason why so many components are "cards" or "panels" with brief information and "learn more " action link. If you look at alot of news sites, and large corporations there are not many radical changes to the website. going through different sizes. And many from 600px or so just get smaller space and the info flows down (or rather flows up from less than 600). If you are designing for a business that offers 10 services, put them in panels or cards, add links and have separate pages for them. Someone wanting info one one of the services, does not care to read the other 9, he/she wants to be able to easily find that link, contact info, email link on your page - whether its a cell phone or the desktop.

Your creativity will not break if you start at 575 pixels. Trust me. All it will take is a little familiarity with columns and rows breaking up the page as you increase the viewport. But - whenever I had designed from desktop down, moving the slider back and forth was almost the same thing.
User 2273654 Photo


Registered User
775 posts

Thank you Bill G. for your nice long detailed explanation of the web designing in the new application formats. It was sensible, reasonable, informative, and easy to understand. thank you again.
My CC S-drive site https://workhorsepainting.com
User 345577 Photo


Registered User
373 posts

Thanks to Inger & Bill G for your comments and suggestions, all of which will be weighed and carefully considered.

After this old dog takes a nap by the fireplace... :D
User 298713 Photo


Registered User
5 posts

I too am coming from a desktop down mentality, however, I am still using v1.5. I've been trying to figure out how to add a navbar to the grid so that as the page is scrolled the navbar stays at the fixed grid top. Haven't been able to add anything to the grid except a photo.. Harumph!
Dennis R. Ling
User 2699991 Photo


Registered User
5,394 posts
Online Now

D wrote:
I too am coming from a desktop down mentality, however, I am still using v1.5. I've been trying to figure out how to add a navbar to the grid so that as the page is scrolled the navbar stays at the fixed grid top. Haven't been able to add anything to the grid except a photo.. Harumph!


You can only add a row to the grid. (except for adding a background image/colour or gradient.
you can only add a column to a row (except for as the grid above)
you can add anything in the elements bit to a column & a container.

Place your navigation into the top column. set it to position fixed (different if using newer versions of RSD)
add another column (or row ) underneath that column and go start designing, the rest of the page, adding columns/rows/element as you desire
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 244626 Photo


Registered User
811 posts

I know this is insane but I will play devils advocate on this one because I was just thinking about this today.

There is actually a advantage to using a desktop down RSD 1.5 template now in RSD 2.5.

If you do not want to spend the time learning either Foundation 6 or Bootstrap 4 Alpha then premade components that come in the Component Library may not be that important to you. If they are stop reading.....

Use Coffeecup Menu Builder for a responsive menu.
Use Coffeecup Web Form Builder for forms.
If you need a photo gallery or slideshow there are plenty to pick from including Coffeecups.

Coffeegrinder framework is quite a bit more nimble than using the Foundation 6 or Bootstrap 4 Alpha frameworks.

What do you gain ? A component library that is available to save your own created components to. You can also create and save symbols to use on multiple pages. You get all the bells and whistles which includes the ability to add custom attributes to elements (not available in RSD 1.5), vmin and vmax settings for dimension control, choice of px, em, or rem settings, X Y and now Z controls for transitions, full filter and blend modes, FLEX control, multi-column layout, object fit (fill, contain, cover etc), and all the same elements and grid controls in RSD 2.5. Anything available to RSD 2.5 would be available to use....other than the component and classes specific to Foundation or Bootstrap.

So the BIG advantage to using RSD 1.5 template Top Down in RSD 2.5 is the recent change Coffeecup made so pictures are now available to be indexed by search engines. "Top down" RSD 1.5 uses the biggest picture for the "src". The new "mobile first" RSD 2.5 uses the smallest picture for the "src". Which picture would you rather have for the search engines to list in image search ? Your smallest picture size at the lowest break-point or the largest picture size at the largest break-point ?

Again, I was just thinking about this today. I actually bought RSD 1.5 last year right before the new release of Foundation and Bootstrap software. I bought those.....have enjoyed learning everything about those frameworks, but today.....I am questioning using these somewhat complicated frameworks when I might just need a menu, form, some image SEO control and that is it.
Bootstrap 5 CSS Grid.

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.