Using a different template for mobile version of site

Except that my layout isn’t “broken.” And, the text size, as displayed, is sufficiently large, and of sufficient contrast (unlike many sites, including this forum, where the color is so light that it is barely visible - what is with this fascination with light gray text color?).

Still waiting for sample of sites YOU have designed. Or have you designed any? Have you ever build ONE Website?

In your opinion. Not mine, or others with difficulties or impairments. That’s just a fact that can’t be ignored.

I’m 24, been on computers my whole life. I have some visual impairments. I’m a healthy regular 24 year old otherwise.

Yet on my laptop, I want to enlarge the text on your website.

2 Likes

I would gladly give you 20-30 or so sites I’ve done, but the caveat is that I didn’t “design” the websites. I was handed the PSD files and spoon fed exactly what font sizes and behaviors should be on the website by the designer (who has worked with the client).

I’m pretty sure this wouldn’t matter to you and I’d still get blamed for any deficiencies in the design, yet I’m literally not allowed to change it. So I’ll pass on that offer since it will go nowhere.

4 Likes

I cannot image how stubborn you are trying to be.
Just so you get can your way.

If you don’t want to do anything with their advice, Leave this discussion and do some stuff that makes YOU happy.
And don’t even try to be the smartest in the room.

They are all giving you good advice in a normal way and you spit in their faces.
I will leave it at this and not even gonna reply if you reply at this reaction.

Since this is a reality check for you.

4 Likes

My text is nearly black on the site in question, whereas here on Sitepoint, the text is a painful to read light gray, as is popular on most Websites today. Why is that?

My text is also quite large by most standards being used (and it is larger than the text on this forum), with plenty of leading.

Such criticism of my site is completely unwarranted in light of these facts.

Where are you seeing light grey? Here on the forums the text is #333 which is almost black. I agree that many site use far to light a grey, not enough contrast.

Okay, I’ll give you that. If I zoom in to 125% it is a dark gray (but it’s not “almost black”). At 100% on Chrome, it’s very light and hard to read.


Just out of sheer curiosity, this is my screen at 100% on Chrome. I see the font as very near black, if not completely black. Where do you see light grey?

IMHO this discussion has devolved from the original question.

That is - detecting mobile devices in order to use a different template

Attempting to determine what device is being used to view a site is folly.
There are simply just way too many of them

There are three options.

  • design the site without any concern for how it may look for others that are not viewing it as you do
  • design the site to look the best it can at various view-port dimensions regardless of what device is being used
  • have “separate” sites, eg. one for desktop, one for mobile, offering users the option to choose between them

I think it is common and quite normal for designers to want to have control over how a page looks.

Despite any validity arguments for wanting or needing control over how a web page is displayed may have, the fact remains - except when there is a specific user base, web pages can be viewed an unlimited number of ways .

(a very inaccurate history)

  • Many years ago, browser dimensions were limited by the max monitor size of 800x600 pixels.
  • As monitor sizes increased many designers wanted to use this as an opportunity to have more control over how web pages looked and waited for use of the smaller sizes to die out.
  • Around the same time, mobile devices that allowed an active world to bring the internet with them were being developed.
  • At this point, a logical approach was for websites to have desktop and mobile versions and for a few years this approach was adequate and worked OK

Unfortunately for designers, manufacturers give priority to the demands of the user market and allow users a great amount of control over how they experience the web.

Designers must either accept that they can not have complete control over how a web page will look for all users and do the best they can or accept that a page will be broken for some users.

Years of experience by a great many designers has led to RWD being the current best practice.

8 Likes

That is the situation with this particular site. I am being paid to code it for the Web. My only other contribution is as copywriter. I wrote the headlines and copy.

This is the reason I asked the question I did in the first place, because the design is very difficult to make “mobile friendly;” however I have been able to come up with a somewhat satisfactory solution for iPhone6 and iPad. I’m not totally happy with it. I think we need to change the graphics for mobile. But for now, it seems to work… sort of. I’m still playing with it.

The rest of this site will be pretty static. Basically, catalog pages.

Not trying to “have my way,” or be “the smartest person in the room.”

Good post. This is where I’m at. I am doing my best to please my client (the designer, in this case). I will write the code to display his artwork as best as I can for “most” users. I am not going to concern myself with a small number of users who may wish to re-size their browser to less than some percentage of their monitor (causing some elements to overlap). I have dealt with that the best I can, but still at some point, there will be overlap. One can compensate for this by zooming out. Very simple.

I have thus far, for mobile users, created two @media style rule changes for the iPhone and iPad. They look decent, but I would rather have a new layout for mobile (hence, my question).

You are correct: There are far too many different devices, and it’s impossible to be all things to all people. To try to be is fallacy, and takes far too much time besides. If I charge what my time is worth to try, it would be unaffordable.

I think no matter what, some people will not be able to view all sites on mobile. That’s just the way it is. I believe the desktop PC will always be with us. Thank God! I don’t own any mobile device, and I’m not in any hurry to get one, either.

I guess it’s subjective. Sitepoint forum for me on my PC on my monitor using Chrome is pretty light. What can I say? I have text size set at “medium.”

Well, I’m nearly 73, should be wearing glasses (but don’t have any right now) and the text size on my site is easy for me to read with my browser (using Chrome, currently) set to “medium” text size.

I’m self taught (PHP, HTML, CSS, some JAVASCRIPT, and still studying all. Have Matt Doyle’s book “Beginning PHP 5.3” and a pile of other books. Basically, I live this stuff (along with flamenco and classical guitar). Have Apache, PHP, and MySQL installed on my machine. Still running Windows XP (Don’t have the money to build a new machine, but I’m hoping to do it in the coming year). I don’t yet own a laptop or a mobile device.

I saw the Web in its infancy, when people were using their TRS-80’s to go online! You probably don’t even know what that is!

Our first computer was an Apple IIc. I’ve had several computers since then. I’m the “in house geek” here. When they break, I fix 'em.

1 Like

I can see you are making some progress now. You have got rid of those <br>s and the site does now stand up to font zoom.
There is still the text clashing with the images from around 900px until the query kick in, but it’s getting closer to a fluid design.
But then for some reason you needlessly give #page a fixed width of 400px limiting how small it will go. A width of 320px is generally the smallest screen to cater for.

That’s good to hear you are in good health and don’t have any impairments. Probably why you can’t sympathize with those who do.

Same.[quote=“WOtis, post:54, topic:231360”]
You probably don’t even know what that is!
[/quote]

Not relevant.

Where do you see that? I have set max-width: 1050px; in my CSS.
Edit: Oh, never mind. Found it in the @media style sheet.

I originally had a typo in the < br >'s Fixed them, but then found I could achieve what I needed to by adjusting width of the containing element, and re-writing the copy, which turned out to be better anyway. (Copy writing is always a process of writing and re-writing.)

I’m having a problem with the images. For some reason the product photos are not all re-sizing using: img {max-width: 100%; height: auto;} and I don’t know why. The header image does, and the top most product photo (the first two products are combined into one image), but the third image (two products, a cart and a drawer unit) don’t want to re-size. Neither does the last one. Not all the left column images are re-sizing either. I’m baffled.

See what?
The text clashing with the pictures? That’s from ~920px to the query at 768px.

That’s the reason.

Sam, I’m trying to fix the width problem now. Should I use “max-width: 414px;” the iPhone 6 Plus width?

Before @media kicks in, those photos still not re-sizing. I don’t know why. Some do. Others don’t.