Using a different template for mobile version of site

Well actually it’s your problem and one that you engineered (not to put too fine a point on it) :slight_smile: . Surely you want to accommodate as many people as you can (especially when you are selling something) rather than alienating them? That doesn’t sound like a good business model from any standpoint.

I never have my browser window maximised and often have my open applications taking up a quarter of the screen as that is the way I like to work. I expect sites to fit in with me and not the other way around. If sites don’t adapt properly then I just go to a better site instead. I looked up metal storage containers on Google and the first site that came up was responsive and adapted to my browser nicely.

Of course you are free to code how you think best and what best fits your design intentions but it is always worth listening to the advice you have received on these forums as it comes from good reliable sources.

Web design is full of compromises one way or another as not all things are possible or feasible but that doesn’t prohibit creativity and a good designer will still create a good accessible design. It’s all about being professional and doing the best job for yourself, your client and your customers. By all means bend the rules a bit but your basics must be sound.

It’s not always about you. :wink:

Where’s @Stomme_poes when you need her :slight_smile:

6 Likes

I still use a 1280px wide monitor with the window maximised, but I know from very many discussions here that other people with wide screen monitors prefer two windows side by side, and 960 px is therefore quite a common size among such users. I was simply drawing that point to your attention; what you do with the information is, of course, entirely up to you.

The <br> tag should be used only when the line break adds meaning to the text - as in, for example, song lyrics, poetry or an address. Like all HTML tags, it should be used to denote structure and meaning. https://www.w3.org/wiki/HTML/Elements/br

As I demonstrated, using them to force line breaks to fit your design is not only incorrect, but makes the layout very fragile when viewed under different conditions than those on your own machine.

Then I sincerely hope that neither you, your client nor your customers ever suffer any form of visual impairment - temporary or permanent.

I’m glad you think so. It doesn’t work as I understand the meaning of that term, but my purpose here was to draw potential problems to your attention at an early stage, so you can rectify them before spending too much time on a poor design. However, if the brokenness of your current design doesn’t bother you, then I’ll waste no more time trying to convince you to care about it.

6 Likes

Wide screen monitors are too wide to display a web page so splitting the screen in half to display two things side by side is very common - that makes 960 a very common browser width including the browser chrome.

I never display web pages wider than 950 (half the width of the screen less the scrollbar) and many other people do the same.It is one sie you MUST check your page displays correctly at if you don’t want lots of people thinking your site is broken.

4 Likes

With all due respect, Paul, you are a tech, not some guy sitting in a office looking at a vendor’s Website, a vendor from which they have purchased before (or not) but someone in a buying office who does not typically have multiple programs running at the same time.

Neither is this for the “impulse buyer” (someone on Etsy for example). Those people don’t read anything (experience has shown this - my wife is a consultant on Etsy) Many sellers complain that people do not read their descriptions and then are unhappy with their purchase, and leave a bad review. People do not scroll when using mobile devices, so they do not read the product descriptions. That raises another issue about mobile; you cannot provide sufficient information, and can not display photos larger than the ‘toy’ screen of the mobile device.

I doubt you are a “businessman” and know what business people want. Sorry, but I came here to ask a simple question, “how can I detect the viewing device in a way that allows the controller to load a different template”. All I get is criticism of my site, and ridicule.

I know Web design has some limitations (which I can deal with) but it has far fewer limitations than those we place on it ourselves. I believe my basics are sound. But I don’t build sites that look like everyone elses, and I don’t plan to start. I can spot a Wordpress site the minute I see it. It looks like every other Wordpress site. And those few people who are left that hand code only know how to make horizontal bars of a solid color, one following the other, with the three circles centered in one of them containing a few words or a picture of someone, There are very few people who can blend a photograph into a background, merge a headline into it, and really make an attractive site. Most Websites today are just plain garbage, in terms of design, Headlines have become nothing more than “Welcome to our site!” My God, that is certainly awe inspiring! Is anyone going to read beyond that? Probably not. We have lost the art, and we have forgotten that the purpose of a business site is to advertise and hopefully increase business.

Now, does anybody here have the answer to my question? Or shall I move on. I didn’t come her to be bashed.

Ah, that’s a completely different situation.

If you are writing something for a closed group of users rather than a public website you can code according to the known without worrying about web best practice.

For example, if everyone in the office is using IE11 with 1800x900 monitors or the same model and version of Android mobile, you can take a lot of “short cuts”.

You also will not need to consider the folly of trying to detect devices as you already know them.

IMHO much better to just go with something like “whatever.com” and “mobile.whatever.com

1 Like

Ever consider zooming out? I can shrink metalfabcorp.com down to almost half the screen before seeing any over lap. Zooming out takes care of that.

One thing that is true about Web designing is that it is impossible to satisfy everyone. I know how to use my browser, and I can zoom in and out as I please. I can’t design for the dummy that doesn’t know how to do this.

I used to make all my sites no wider than 960px. It is a rather narrow format. Then I realized that few sites were still being built to that dimention, but to 1050px, and contrary to what you said above, I have even run into sites that fill the entire screen!

Somebody pointed out (on another design blog) that their are so many different devices, all with different widths, that we can’t possibly hope to please everyone. I agree with this. But we can deal with most of them. That is why I would like to be able to use a different template on some sites for the mobile user. I didn’t think this was unreasonable, but apparently according to Site Point, it is.

By the way, I do check that my pages display correctly, and they do. I have been building sites since about 2010. I’m not exactly a newbe. But I am getting tired of the arrogance that I find on this forum.

That’s what media queries do - they allow you to distinguish different page templates based on the size of the viewport.

Don’t you mean WIDE rather than narrow? People are used to reading pages that are tall and thin not short and fat.With the browser viewport set to 950 wide it is barely higher than it is wide making it a very wide page for its height.

Thanks for the sarcasm.

Elaborate, please, because I don’t see how I can use the @media to select a different template, but only to provide for certain style changes on a style sheet.

Prior to the Mobile Era, and prior to Wide Screen monitors, (and even according to a Site Point book I have) 960px was basically a “standard.” Then came wide screen monitors (and Windows Vista) and designers gravitated to 1050px. It’s a better format, I think. So now the claim is that “nobody is using PC’s anymore” (a fallacy) and we should be designing for Mobile first. Bunk!

which with the window-arrow keys gave you 960px width for each of the two apps you had open next to one another - still a bit too wide for the available height but at least still not wider than the height (which makes the content far less readable). Wider formats were more common before wide screens became available as you couldn’t fit two apps side by side so there was little point in not using the full screen width.

Of course a lot of people still don’t design their responsive sites properly - I still see lots of supposedly responsive sites that are broken at 950px width - only briefly as I always start looking for a properly constructed alternative straight away.

1 Like

Wow, the Sitepoint forum does not allow me to resize the fonts! Imagine that! Not too “user friendly.”

Anyone using an ipad would not be able to read it. The text is just too small. and you could not use your finger (touch device) either.

Screen dump from iPad Mini 2

1 Like

What is your point? Sitepoint didn’t create the forum software so why are you holding that over them? You did create your site, you are responsible for your direct action/in-action.

Also, the forum scales to mobile/tablets just fine and is very readable without zoom.

Lastly you actually can scale your font by altering the text scaling in the browser settings on mobile.

Default:

Scaled: (note how the UI didn’t break)

5 Likes

Not sure if you realize how condescending that reply is. I am trying to help and that comment makes me feel like I am the one needing help, because I am too stupid to read your mind and know your level of knowledge from a forum post.

What limitations are there that cause you to think you need something else for your current needs? Because, responsive techniques are the ones you should probably be using, if all that is changing is the layout.

My suggestion still stands. You’re going to have to filter out what the user’s ability is (the device, window size, etc.) to view your site and change the layout. That is mostly what responsive is all about. However, if you want to use PHP to make the “layout choice” and possibly do some sort of graceful degradation, you’ll need something similar to the libraries I linked to.

If you could point out what it is you are stumbling upon with responsive or with PHP, maybe we could give you more detailed help.

Scott

6 Likes

???

I use Firefox, and text-only zoom works just fine on SitePoint.

Normal

110% zoom

150% zoom

I seem not to have explained my point very clearly. It’s not that the photos themselves overlap - there’s no problem with that as a design. I was referring to the fact that the photos overlap the text at even a slight zoom level.

Normal

110% zoom

150% zoom

There you go making blind assumptions again :slight_smile:

I ran a successful packaging business for over 35 years employing around 35 people and have dealt with the biggest firms in the UK during this period. I know exactly how to please customers and clients alike which was borne from hard experience and also listening to experts in the field. I didn’t always follow their advice to the letter either but I never ignored or admonished them for saying things I didn’t like to hear. The most important piece of advice I can give you is to listen to people who know and that all people matter.

What you do with the advice you receive is entirely up to you as everyone likes to break the mould but as I said in my last post your foundations must be sound.

By all means be unique and inventive but also be wise. The challenge is to do the best you can for the medium that you are using. Basic rookie errors should be avoided at all costs and without meaning to be rude your page is littered with those i’m afraid. Overlapping or hidden text at any size other than the size you want people to see at is a big faux pas.

I believe you were given the key to that answer in the very first reply.

Apologies if sound advice sounds like a bashing but sometimes the truth hurts and is not palatable .It was not meant to come across as a bashing. All you needed to reply was 'thanks for the advice and I will look into the issues you mention" and the thread would have run its course much earlier.

6 Likes

If you had read this thread from the beginning, you would know that this site is still under construction, and the reason I asked the question was for the purpose of creating a mobile friendly version with a simplified design.

However, this design DOES WORK for iPad using @media and a few CSS modifications. I know this, because I have already tried it on my local host copy.

Obviously, you haven’t been following this thread and have made some assumptions.

I’m abandoning this thread. It’s obvious that no one at Site Point is interested in answering the question that was asked, but are only here to push an agenda and criticize anyone who doesn’t do everything THEIR WAY. I see nothing wrong with creating a different MOBILE version of a site, where the original design does not lend itself easily to adapt for mobile. I know that it is being done using m.mysite.com. I just don’t happen to like that method because it has certain drawbacks. I’d prefer to use the same URL but provide a modified/simplified layout for mobile.

Used to be at Site Point people were interested in providing answers to technical questions and not ridicule users and criticize their designs.

None of you have provided a sample of your own work to establish credibility. Do you actually design anything? Have you ever built even ONE site? Provide the proof. Let us see how your work stacks up.

Have a nice life. I’m gone. I’ll never buy another Site Point book (and I have several from the old authors). I won’t be visiting this so called “Forum” again either.