Responsive site design - a...

User 122279 Photo


Senior Advisor
14,610 posts
Online Now

I have a desktop PC, three laptops (Win and Mac and a small Linux), an ipad, an iphone and a half-size Galaxy tablet. Whichever site I open with any of these, the pages adapt to the viewport size. OK, they don't 'flow' into one narrow column, but anyway, I don't get a horizontal scroll bar.

So, why are we working with responsive design? Are there any devices out there that are not able to 'shrink' the pages to fit the screen?

I'm studying the responsive themes that CC have created, and I see that they are using media queries to adapt to various resolutions, but is all that necessary?

I have learnt how to do it, but I wonder if this is all too much effort. What do you say?
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 187934 Photo


Senior Advisor
20,265 posts
Online Now

It's up to every use to determine the need and how that need is implemented. I have one site that I'm doing a redirect for mobile devices because the applet that I use on the main page isn't supported on several mobile devices. I have another site that I'm using the form builders responsive ability to make that mobile friendly but it's still not the main way to interact with the site as it's for key employees only. I wanted the ability to interact with a small screen and not have to zoom the port up.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,610 posts
Online Now

OK, I can understand the 'zooming' bit. That is, as far as I can see, the only reason why I would bother with the responsive design, I think.

The redirect you mention, is that to a site specially made for small screens? Or are you using @media to show just another layout?
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 271657 Photo


Ambassador
3,816 posts

What got me on the responsive design (RD) path was seeing my various VSD sites on small screens. Being static, they don't really shrink to fit and one has to do a lot of zooming, pinching, swiping... to take in a page (and I have a hard time tapping those teeny shrunken links on small screens).The thought of separate sites for phones and PCs wasn't too appealing – plus that opens another can of worms... what about different phone screen sizes then? And pads, netbooks, giant TV screens?

I've taken to getting the layout where it looks pretty good at any size, then adding in some media queries to refine it. For example, a nav bar with 7 links that spans the full width of the site can look messy when the site is viewed at small laptop or pad size; maybe 2 of those links now drop below the other 5. Go a bit smaller and they're jumbled over 3 lines. They're also quite a bit smaller, so harder to tap just one with your finger. Adding some media queries can allow for adjusting the link/button/font sizes as needed – like a single full width vertical menu with a larger font on phone screens and back to the horizontal layout with slightly smaller buttons/fonts for a pad size so everything stays on one line.

Working part time in a coffee shop that offers free wi-fi, I've seen how much computer usage has changed over even the last 2 – 3 years. Many young people use their phones as their only PC. In spite of all the hype about the "death of netbooks", I see them in use every day. I see more netbooks than pads in fact. I also know 3 people who only use an ipad (no phone, no laptop). Two different customers bring in 22" monitors along with their laptops :o Casual conversations tell me that many phone users do not like mobile versions of websites and will go the the full site instead.

I just can't imagine having to maintain and update 3+ versions of every site, and with so many responsive sites out there already, phone and pad/netbook users will gravitate towards sites that accommodate them rather than putting up with a less than optimal experience.

Besides, it's fun to shrink/expand the browser window over and over to watch everything shift instead of actually getting some work done! :lol::lol::lol:
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 122279 Photo


Senior Advisor
14,610 posts
Online Now

Ok, you got me somewhat hooked. I remember you were working with a 'grid' some time ago. Is that the way to go? I don't like the naming of those grid entities, though. They don't reveal what they are used for.
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 187934 Photo


Senior Advisor
20,265 posts
Online Now

Inger wrote:
OK, I can understand the 'zooming' bit. That is, as far as I can see, the only reason why I would bother with the responsive design, I think.

The redirect you mention, is that to a site specially made for small screens? Or are you using @media to show just another layout?

I'm redirecting to a full screen 360 degree image.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
14,610 posts
Online Now

Eric Rohloff wrote:

I'm redirecting to a full screen 360 degree image.


WOW! Does that mean that you are sitting in a tunnel with a screen going 360 degrees around you? :lol:
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 187934 Photo


Senior Advisor
20,265 posts
Online Now

If you get all your friends to hold their phones up for you.:lol:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 38401 Photo


Senior Advisor
10,951 posts

SirAge turned me on to this little helper, and a great helper it is for responsive design :)
http://lab.maltewassermann.com/viewport-resizer/
User 271657 Photo


Ambassador
3,816 posts

Inger, I started with a grid because I didn't have enough HTML/CSS know-how to even do a static site in the HTML Editor. Having the grid template made it easier for me to figure out how everything worked.
But you can build responsive sites with or without a grid (CC templates are 'gridless')

Thanks for that link, Jo Ann. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

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.