Mobile-first Web Design

[primo]

Designing for mobile shouldn’t even be a question, but if your client doesn’t want it, there isn’t much you can do.

Kodak, Blockbuster and a ton more companies died from not adapting - also web design its not art, its not subjective. It’s in the name: design. It have objectives, it have frameworks and it must fulfill a function, whichever that may be.

If the website is only a hobby or something not serious, then sure it really doesn’t matter. You can also say to your client that he is not his marketing persona, too.

[duncan]

Personally I think the mantras pushed by big cos should be taken with a grain of salt.

One of them is indeed whether you need a mobile website or not.

Sure Google will prioritize mobile websites over non mobile ones. But think for a second how Google works and what that means. Google provides answers to people looking for something, Google will show anything rather than nothing, so would you do a mobile layout if you were targeting “hotel in new york”? Of course you would.

But what if instead of a commodity you are selling (or talking about) something unique and highly differentiated? Personally I would still take pride in showing a website in a form that’s optimized for the medium. But the question is no longer whether the needle will be found in the huge haystack or not, it’s if it will be a pleasant experience or not. Because the highly differentiated content is the reason people are going to the website, and not the mobile toilet paper ecommerce being 1.35% superior to the competitor’s.

While you might think of them as being luddite, it can also be seen as boldness and being confident people will find them if they want them, and a (possibly) subpar mobile experience will be secondary to the experience of the music they are looking for. And maybe they’re right their visitors will only buy from desktop anyway.

[SPARKER]

Mobile toilet paper, exactly!! Nothing wrong with it if you are a New York hotel right on! But why stress out designing a website on the little screen to out-tok the TikTok Gen Z freebies when all you want is to sell some music.

[Gordie]

I’ve been here many times with clients and they need to understand the mobile site is not for them, it’s for their customers and they need to put their customers’ hat on to understand. When my clients say “I don’t like curves” or “my wife hates purple”, I have to gently remind them the reason why they are spending money on design work. Just because your client doesn’t like mobile does not mean his customers don’t.

Just looking at the site it’s pretty simple and uncluttered so I’m sure there’s a way of laying it out with the same feel but in a way which is more legible. Plus I can’t imagine it will take too long?

[FlaminFig]

In general most people are impulsive and in the end will grab the medium closest at hand to view what their friend has just mentioned. If that was a mobile (that sits in the pockets of a real lot of people) and your site is not optimised for mobile then the User will have a confusing non-functional experience… and a loss of sale!

I agree it is nowadays about the experience but viewing a website on mobile that is not optimised for it is just an outright let down and nothing good will come of it.

As a Web Designer (who knows their stuff) it is a no-brainer that your expertise will guide the client including the fact you are making the site for their Users, not them… I mean that is why they are paying you! But if the client resists it then it on them, so when they come back at you complaining about their clients complaining or their terrible sales you charge them double!

For me when a client requests a website it means for me across devices which they have no say in because that is what a website is nowadays. If I was creating it in something like Webflow the mobile version of the site is automatic, unless I decouple it.

But the other side of the argument is very real… Us “monkeys” (this how the corporations see us, including the corp-governments) are being trained that we cannot do anything without a mobile device and the implement of digital ID around the world and then the linking of a forced digital currency is the ultimate goal for them. Knowing all this I don’t see us tossing our mobile devices in the bin to soon!

So I think @macmancape patience will be needed here…

[FreewayFugitive]

Hi,

Mobile first? Desktop first? Tablet first? NO. USERS FIRST!

Design first for the target audience your website is aimed at. Make it easy for the users to do what you want them to do. For example, do you want them to be amazed at the glorious parallax and animation effects on your website of do you want them to book a table?

Certainly, the stats show many use their mobiles, but by no means all. You should really ensure your design works for all users.

My Google metrics show mobile users make up two thirds of my customers, desktop next and about 5% tablets (which surprised me!). However, I try to make my website designs work equally well for all devices. Why wouldn’t you?

So, yes I always keep the mobile user in mind and design mobile first. Designing mobile first makes life a lot simpler in may ways. For instance, you can immediately forget about hover states (no pointer to activate them) and over elaborate animations (no much room for them). You concentrate on the content not the presentation.

The first thing with designing mobile first is that a new Sparkle project offers you the Desktop PCs device so I recommend that the very first thing you do is to enable the Portrait smartphones device. Alternatively, start with one of the many Sparkle templates, which usually have both these devicess enabled with sensible font choices, etc ready made.

The default view of the mobile device shows you how little room you have to work with! Zoom this view and it makes it easier to work with (but beware of the zoomed view leading you to use inappropriately sized objects and font sizes!).

I would urge you to gradually build your site, flip-floping between the devices, testing it in preview. If you don’t have a mobile and laptop/pc/tablet on the same wifi network then use the developer views in Safari and Chrome to see how your site might appear.

Many of us long time Sparkle users will have template project set up. In my case, this consists of a page with all my text styles defined at sensible point sizes for each device. Similarly, buttons, menus, etc. Careful thought about readability, etc. before you even drop an object on the Sparkle canvas will be well rewarded. Pen(cil) and paper still have a role in design!

I absolutely concur with @duncan

@duncan

Responsiveness means adapting the layout but providing the same content. It’s about treating a viewer with any device in the same way. Some sites offer completely different content, or have major omissions in one layout or the other. This is really terrible and should be avoided at all costs.

If you find you are having to clear the Show on this device checkbox to restrict content then you should be asking why!

So, design for users first with good, relevant content displayed well on all devices and you are home and dry!

[Gil]

Can I ask the most basic question please?
If I make my website in ‘mobile’ setting first, make a 2nd for desktop, maybe one for tablet(?), how do I upload (do I need to do anything special as I upload using ftp or sparkle’s own upload facility if it has one … I haven’t got that far yet) & get the various devices to recognise which ‘site’ they should visit?
Thank you for any help you can give

[FlaminFig]

Hi @Gil and welcome onboard!

Uploading (or Publish in Sparkle’s wording) is a breeze. For me I totally rely on Sparkle’s inbuilt Publisher which is very reliable. I mean you can go FTP through a few extra steps, but why if Sparkle does it all for you!

Once your Sparkle site (with the three devices you mentioned you have introduced) is on your hosting server your potential client can use any device to view it. If they use a mobile then when they connect with your server Sparkle’s code acknowledges their device and will server them up your created Mobile Device. If your client views your site on a desktop they will be served up your Desktop Device. This is the same for a client viewing your website on their tablet.

Ok, I hope that helps!

[Gil]

Thank you so much.
This is all I needed to know … the website will interview the device connecting to it, and adjust accordingly … just what I wanted to hear really!
Thank you again

[Gil]

I have just hit a problem doing mobile first … EDIT I got over it, but do not remember how!
I have the mobile site looking just as I hoped (https://www.cotswoldwalls.co.uk), but have now sat down to address the desktop ‘view’.
When I first open in a desktop browser, everything is just TOO BIG, so I went to Sparkle & clicked ‘automatically resize’ for desktop. This made it way too small.
So I clicked ‘custom layout’ in desktop.
I immediately came up agains a problem … the ‘tramlines’ (see arrowed in my pic) that guide the width for the mobile don’t seem to be able to be moved?? How do I widen them, so that I can widen my text boxes etc please??

[Gil]

To be clear, the ‘tramline’ is not of my creation as far as I know. I think it is the outer guide for 320?
There is a text box in the pic too, which is stretched to the outer limit for 320, but that is moveable inwards (just not outwards from where it is

[macmancape]

I’m simply here to convey my congratulations and admiration for your beautiful walls! No wonder the King himself honored you!

[Gil]

Thank you so very much @macmancape . I think I have now solved my web design problem, so please enjoy the pics in full desktop format!
I do still need to cut the pale blue bits off some photos, but that should be relatively simple

[Frenchie]

This is what you’re site looks on my 2024 iPad Pro 13 inches

[Gil]

Hi @Frenchie ,
Thank you very much for this. I am really hoping that you caught the site while I was doing one of my many publishings.
When I look at the site today on an ipad (3rd gen), it looks as it should (see below).
Could I trouble you to just look again and tell me what you see now please?
( https://www.cotswoldwalls.co.uk )
Thank you very much for your help
Gil

[Gil]

The page you were at should look like this, Michel