Highlighted

Dipping my toe in responsive site design for mobile in 2018 (am I doing it right?)

Contributor ,
Nov 28, 2018

Copy link to clipboard

Copied

As mentioned in some of my other recent threads, I'm a career designer who picked up the HTML/CSS he needed along the way (usually via trial & error).

With regards to adapting the layout to mobile, I made sure the base layout was responsive enough to at least look great on both desktop and tablets (which really means landscape and portrait). I'm very happy with the results on those two devices.

Phones, on the other hand... well, they get the same thing the tablet gets, only at a fraction of the size. Obviously, this is far from ideal. The layout holds together just fine, and LOOKs nice, but some buttons are too small to even read.

I was hoping to avoid mobile-specific code (by making the base layout so flexible it could accommodate anything) but it looks like I'm not going to be able to avoid showing/hiding different elements based on whether or not we're on :

  1. A phone, or
  2. Literally anything else.

Googling the subject reveals the most common solution to this is a SEPARATE STYLESHEET for mobile (or in my case, just the phones)... single-stylesheets containing conditional statements don't seem to be quite as popular. I did not find much about that.

If I go the "2 stylesheets" way, my first instinct is to duplicate the affected classes from the regular stylesheet to the phone stylesheet, and simply changing the values (so they override the original), making sure the phones stylesheet is loaded after the regular one in the <head>.

Would that be the right way to do it? So the phones stylesheet only ends up containing 5 or 6 classes (ie, the affected ones)?

Thanks!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

You might as well ask "how long is a string?" in this forum. You'll get different answers from everyone, and sometimes multiple answers from the same person.

Personally, I work Mobile-First with everything being developed around the mobile experience, then I'll add a CSS Media Query at the end of my stylesheet with overrides for larger screens.

I typically use two stylesheets. One for purely stylistic things (like fonts and background colors) and another for the page layout itself. I don't see any reason to separate them out by device, but that is one of the new fads in development lately.

Views

433

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dipping my toe in responsive site design for mobile in 2018 (am I doing it right?)

Contributor ,
Nov 28, 2018

Copy link to clipboard

Copied

As mentioned in some of my other recent threads, I'm a career designer who picked up the HTML/CSS he needed along the way (usually via trial & error).

With regards to adapting the layout to mobile, I made sure the base layout was responsive enough to at least look great on both desktop and tablets (which really means landscape and portrait). I'm very happy with the results on those two devices.

Phones, on the other hand... well, they get the same thing the tablet gets, only at a fraction of the size. Obviously, this is far from ideal. The layout holds together just fine, and LOOKs nice, but some buttons are too small to even read.

I was hoping to avoid mobile-specific code (by making the base layout so flexible it could accommodate anything) but it looks like I'm not going to be able to avoid showing/hiding different elements based on whether or not we're on :

  1. A phone, or
  2. Literally anything else.

Googling the subject reveals the most common solution to this is a SEPARATE STYLESHEET for mobile (or in my case, just the phones)... single-stylesheets containing conditional statements don't seem to be quite as popular. I did not find much about that.

If I go the "2 stylesheets" way, my first instinct is to duplicate the affected classes from the regular stylesheet to the phone stylesheet, and simply changing the values (so they override the original), making sure the phones stylesheet is loaded after the regular one in the <head>.

Would that be the right way to do it? So the phones stylesheet only ends up containing 5 or 6 classes (ie, the affected ones)?

Thanks!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

You might as well ask "how long is a string?" in this forum. You'll get different answers from everyone, and sometimes multiple answers from the same person.

Personally, I work Mobile-First with everything being developed around the mobile experience, then I'll add a CSS Media Query at the end of my stylesheet with overrides for larger screens.

I typically use two stylesheets. One for purely stylistic things (like fonts and background colors) and another for the page layout itself. I don't see any reason to separate them out by device, but that is one of the new fads in development lately.

Views

434

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 28, 2018 0
Adobe Community Professional ,
Nov 28, 2018

Copy link to clipboard

Copied

You might as well ask "how long is a string?" in this forum. You'll get different answers from everyone, and sometimes multiple answers from the same person.

Personally, I work Mobile-First with everything being developed around the mobile experience, then I'll add a CSS Media Query at the end of my stylesheet with overrides for larger screens.

I typically use two stylesheets. One for purely stylistic things (like fonts and background colors) and another for the page layout itself. I don't see any reason to separate them out by device, but that is one of the new fads in development lately.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 1
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Jon+Fritz+II  wrote

I don't see any reason to separate them out by device, but that is one of the new fads in development lately.

Has that comeback into vogue, thats what used to happen years back. Next you'll be telling me the use of tables for design has made a come-back. I swear everything just goes around and around in circles regurgitated by the next generation who think its a new way to do something

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 2
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Under+S.  wrote

As mentioned in some of my other recent threads, I'm a career designer who picked up the HTML/CSS he needed along the way (usually via trial & error).

With regards to adapting the layout to mobile, I made sure the base layout was responsive enough to at least look great on both desktop and tablets (which really means landscape and portrait). I'm very happy with the results on those two devices.

Phones, on the other hand... well, they get the same thing the tablet gets, only at a fraction of the size. Obviously, this is far from ideal. The layout holds together just fine, and LOOKs nice, but some buttons are too small to even read.

I was hoping to avoid mobile-specific code (by making the base layout so flexible it could accommodate anything) but it looks like I'm not going to be able to avoid showing/hiding different elements based on whether or not we're on :

  1. A phone, or
  2. Literally anything else.

Googling the subject reveals the most common solution to this is a SEPARATE STYLESHEET for mobile (or in my case, just the phones)... single-stylesheets containing conditional statements don't seem to be quite as popular. I did not find much about that.

If I go the "2 stylesheets" way, my first instinct is to duplicate the affected classes from the regular stylesheet to the phone stylesheet, and simply changing the values (so they override the original), making sure the phones stylesheet is loaded after the regular one in the <head>.

Would that be the right way to do it? So the phones stylesheet only ends up containing 5 or 6 classes (ie, the affected ones)?

Thanks!

I always keep my media queries in the 1 stylesheet, much easier to manage if everything is together - organisation is 99% of web-development. Dont become complacent as it will cost you a lot of time later. I see a number of really crap css stylesheets where element selectors are unorganised, dotted all over the place - keep them together and in roughly the same order as they appear in your page - saves masses of time when you come to manage the website later on:

/* DESKTOP */

.wrapper {

background-color: red;

}

/* TABLET */

@media screen and (max-width: 768px) {

.wrapper {

background-color: yellow;

}

}

/* SMARTPHONE */

@media screen and (max-width: 480px) {

.wrapper {

background-color: orange;

}

}

You should probably start off with mobile first rather than desktop first BUT personally I like to construct the desktop first (all singing dancing version) and then take away the elements not required from the smaller devices, rather than add the elements for desktop after, just seems more logical to me.  Others have different views about the workflow.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 1
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

And now for something completely controversial, sorry that should have been different .

As Jon said every reply you get will be from a different viewpoint. I start with desktop, but for a different reason than Osgood. Hi-dpi monitors and smart TVs are becomming more and more popular in use for web browsing, add to those games consoles, which have browsers built in, (xbox=IE11 and Edge, ps3/4=Chrome but older versions), user base for all such devices all estimated between 5-12%.

Starting with desktop allows me to start at a middle point in user possibilities, (mobile, tablet, Pro tablets/laptops, desktop, larger screens).

The simplest method to use is Flexbox as this can go from mobile to anything else, without media-queries if necessary, (much better with one or two). Another way is to use flexbox for components for css grids, that way your site will fallback to flexbox, (if done correctly) if required, and use a css layout which has many possibilities, (css grids).

No matter what you choose though, there is a learning curve involved, even if you use the old floats method of layout.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
Mentor ,
Nov 28, 2018

Copy link to clipboard

Copied

If you're good at picking up CSS, Paula mentioned CSS Grid. Here is a very simple responsive layout using Grid that you can save and study:

http://www.projectseven.com/products/staging/pvii-grid/base.htm

We also have automated page-building tools that install into Dreamweaver. Currently, our flagship product (Harmony) uses the Flexbox specification and is far more efficiently coded (and easy to use) than the bloated Bootstrap CSS that comes with the latest versions of Dreamweaver.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

ALsp  wrote

If you're good at picking up CSS, Paula mentioned CSS Grid. Here is a very simple responsive layout using Grid that you can save and study:

http://www.projectseven.com/products/staging/pvii-grid/base.htm

We can't use grid yet without fall backs can we? 'Can I use' says 88.3% - that's quite high - how high is high enough?

What's the opinions?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

osgood_  wrote

We can't use grid yet without fall backs can we? 'Can I use' says 88.3% - that's quite high - how high is high enough?

What's the opinions?

Do NOT use css grids without fallback, (reason later) that said if css flexbox is used for 'components' etc inside css grid areas, then it is just a matter of using the @support rule, (once for css grid) IE10/11 is a bit of a problem, but the old grid specs they support, can be used with very good results, (remember you are talking desktop or games console, so easy to code for).

The reason I say do not use without fallback, is because if you look at the 'can i use' stats, they do not cover Android devices over 1-1and1/2 years old, or iOS devices that cannot be updated, (for whatever reason). They also do not cover smart tvs, and ps3 consoles.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
Mentor ,
Nov 28, 2018

Copy link to clipboard

Copied

That page I linked to is a "study" page. We are currently developing a fallback strategy, like we have for our Flexbox system. Actually, it might be a bit simpler with Grid since IE10/11 have partial support for Grid and we can simply script a branch and provide those browsers with the necessary syntax differences. IE8 and 9 we're undecided on. For our Flexbox tool, we script a solution that feeds them a floated version. Those browsers are essentially irrelevant, though, so it might be okay to let them show a linearized page. We don't bother with ancient mobile devices so Grid is good to go on Android and iOS.

-- my 2 pennies 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

pziecina  wrote

osgood_   wrote

We can't use grid yet without fall backs can we? 'Can I use' says 88.3% - that's quite high - how high is high enough?

What's the opinions?

Do NOT use css grids without fallback, (reason later) that said if css flexbox is used for 'components' etc inside css grid areas, then it is just a matter of using the @support rule, (once for css grid) IE10/11 is a bit of a problem, but the old grid specs they support, can be used with very good results, (remember you are talking desktop or games console, so easy to code for).

The reason I say do not use without fallback, is because if you look at the 'can i use' stats, they do not cover Android devices over 1-1and1/2 years old, or iOS devices that cannot be updated, (for whatever reason). They also do not cover smart tvs, and ps3 consoles.

Play Station 3 - Im not designing for the kiddies

I guess if you want you could just show 1 column on the old Android devices, (mobile first approach) - much of mobile is one column anyway, especially when you get down to smartphone - so I think with due care and attention its probably closer to being rolled out than not.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
Mentor ,
Nov 28, 2018

Copy link to clipboard

Copied

The reason I say do not use without fallback, is because if you look at the 'can i use' stats, they do not cover Android devices over 1-1and1/2 years old, or iOS devices that cannot be updated, (for whatever reason).

Linearizing is not a bad thing Standard phones should be linearized anyway and there is a far less instance of archaic tablets than there are phones. The worst case is these folks are going to get a single column. Not a bad tactic in my opinion.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

PS3 - Think of the age group of people who still have that console now. 23-30 year olds, married, (or in a partnership) and cannot justify the financial cost of updating.

As for smarphones, flexbox was usable back in 2009 for those. As you say 1 column.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
LEGEND ,
Nov 28, 2018

Copy link to clipboard

Copied

pziecina  wrote

PS3 - Think of the age group of people who still have that console now. 23-30 year olds, married, (or in a partnership) and cannot justify the financial cost of updating.

I guess they would be more interested in Pokemon or whatever they do these days rather than browsing the internet.........I once had one of those consoles were you could play ping-pong and ping-pong and ping-pong

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0
Adobe Community Professional ,
Nov 28, 2018

Copy link to clipboard

Copied

Trial & error was sort of  OK when everyone had fixed width pages and same sized displays.  But that's not going to work in RWD.   You need a very clear vision of how your site should work on Mobile, Tablet and Desktop.    If you don't know what you want beforehand, you can't create it with code.

Some people use a  prototyping tool  like Adobe XD or Photoshop to design artboards.  Or you can just put your ideas down on paper.   Whatever.  The important thing is to know what you want before you start building it.

I use a mobile-first framework called Bootstrap because it works well and saves a lot of coding time.   Some people will tell you Bootstrap is overly complex and bloated.  If you're a decent coder and understand how Bootstrap works, it's not complex.   My RWD sites are performing just fine with it. 

Bootstrap 4 Tutorial

Dreamweaver supports Bootstrap.

Design responsive websites using Bootstrap

Another option is to buy a commercial Template or layout system that you can use in DW. 

Responsive Web Design Extensions, Apps, Add-ons and Plugins for Dreamweaver

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 28, 2018 0