Mobile-first Web Design

Question
1

Whenever I do research about web design and trends, I read more and more about mobile-first web design and that this is the way to go for web design.

Up until now I’ve always designed websites for the desktop first and then scaled them down for mobile screens and rearranged the content accordingly. The desktop version was the priority.

So I’m wondering if I should try it the other way around, when I start working on new website projects this year. Meaning: First I design the mobile version of the website and then scale it up … and thereby shifting the main focus of the design from desktop to mobile.

Since I’m so used to designing for large desktop sizes, I guess it would be an inspiring challenge to do it differently and to start “small”.

I think mobile websites are the future, because there are clearly more phones in use than desktop computers and tablets. Providing a good mobile version of a website is crucial, I think most of us will agree on that.

I wonder, how do other Sparkle users handle this? Do you mostly start with the desktop version?

2 Likes
2

@Shadowfax, You’re right about a mobile first world!

All the stats are in and mobile as of late 2018 exceeded desktop and continues to leave the desktop far behind especially on local searches! So it is REALY IMPORTANT that mobile is catered for otherwise you are blatantly asking clients to bypass your site… and they will!

It is a bit of a challenge to design for mobile first, but Sparkle allows it quite nicely! :slight_smile:
I think it is important to sketch your site out on mobile to give you an idea of how it will work on tablet/desktop allowing your workflow to flow better!..

1 Like
3

I think that mobile should be designed differently than mobile first. A lot of the things that are in the desktop version may not be on mobile or the mobile can be designed in a completely different way.
So I always start with the desktop version.

1 Like
4

“Mobile first” was an important framing of how to develop a website in the mind of web coders, circa 2011?

Not thinking of mobile first would lead a web coder to:

  • create a desktop layout that was really hard/annoying to adapt to mobile, leading to a substandard or nonexistent mobile experience
  • develop desktop-based interactions, for example mouse hover, or download and re-uploading a file
  • develop broadband-sized assets, like non-responsive images

A lazy developer is lazy, so at some point in the 2010s, “mobile first” became an excuse to ignore the desktop side of things, or to provide a lame desktop experience with a scaled up mobile site or little more. Mobile first, but meant ironically.

In Sparkle you can start from the desktop or the smartphone layout, the site will still be optimized. If you think that smartphone->desktop is a more effective workflow to adaptation than desktop->smartphone, that’s perfectly reasonable.

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.

3 Likes
5

@FlaminFig @macarna @duncan
Thank you all for your answers. :smile:
I appreciate your thoughts.

I feel that my remarks may not have been clear enough. English is not my first language and sometimes I struggle to find the “right” words. :smile:

Designing a website for smartphones first should not mean that the desktop version is neglected or treated as subordinate.

So yes, I agree, the desktop version and the mobile version of a website have to have the same content and the same look and feel, so visitors know that they are on the same page, no matter the device they use. :smile:

Each version (desktop or mobile) of a website should have the same attention to detail and be the best possible, optimised version for that screen size.

Sparkle is a great tool to achieve that. :+1:

I am so used to the workflow “desktop to smartphone”: designing for desktop, having all that space available – so I was wondering if the design process and the result would be different the other way around, and if that would trigger a new kind of creative “thinking”.

I have some very old websites that I have to transfer to Sparkle in the coming months. “Very old” meaning: built with iWeb and no mobile layout.

The design of one of these websites is rather complex with many images and elements, kind of playfully “scattered all over the place”. Most people like the playful, theatrical look of the website. It’s the website for a stage actor, so it’s kind of fitting. But the website also clearly shows its (iWeb)-age.

Right now I have no idea how to make a mobile version out of this website without altering the design completely. So I guess I have to re-imagine everything without loosing the original feel of the website.

That’s how this idea started … and I was wondering if building the mobile version first would be easier for me.

Time will tell, I guess … :smile:

2 Likes
6

I am new to Sparkle, and I used a template to get started in my learning process. The template was for desktop, so that’s how I started. But like Shadowfax, I thought I should design for mobile first, so I just switched my desktop template to the mobile device setting… and it’s been a holy terror ever since! Artifacts all over the place; Footers not lining up with the bottom of the page; images overlaid on top of each other; 2 pixel boxes disappearing from the desktop preview, but appearing perfectly normal on the iPhone. WTHeck??? Do you need to start with mobile to begin with? Can you NOT change from desktop to mobile and just do simple rearranging??

7

Hi @Shadowfax,
Yesterday I put the same question in another tread, so i’ve tried to apply what suggest me: built in mobile version then put on desktop.
It’s a little bit challenging, but it works well.
So, try it out :wink::upside_down_face:

1 Like
8

Hi @Gretchen,

there’s a specific meaning to “mobile first”, which I discussed in my reply above. I think that’s what @Shadowfax was referring to, and it’s mostly about how the output website will be coded and will perform.

There is no need to follow a specific path when designing a Sparkle website. You can start from the desktop or from the smartphone, Sparkle will produce optimal code in any case.

Now I reckon you are frustrated with the issues that are showing up. Mentioning 3 words per issue is unfortunately not conducive to a solution. So let’s leave out the expletives and please either via email (feedback@sparkleapp.com) or in its own forum topic, you need to detail each problem with screenshots and a description of what you expect and what happened instead.

That will allow everybody do help.

Yes it is possible to create a mobile layout by rearranging and resizing things. This is what all responsive Sparkle sites do, including sparkleapp.com, and it’s documented and illustrated in video.

9

It requires a lot of back and forth between the two layouts, but you might find it helpful to immediately switch device sizes whenever editing or adding an element. Sparkle warns when there are changes that may affect the other device. Building the site for one device only then adding another device size can create more work in my opinion. Select the element(s) you are working on, switch devices and you will see where they are (seldom where you want). Hope this helps.

1 Like
10

Thank you! This is a great tip. I assumed the Sparkle program would handle that internally. As I said, I’m new so I wasn’t sure how robust the tool was. I’ll give this a try.
-gkk

1 Like
11

Hello everyone :slightly_smiling_face:
Thank you for all your comments.
I’ve been away for a few days … travelling.

After reading @duncan’s comment, I think I have caused some confusion with my term “mobile-first”. I did not use it correctly. Sorry.

When I mentioned “mobile-first”, I was merely thinking from the web-design-point-of-view and not the output of the actual code.

Web design with Sparkle is different and you have to do a bit of rethinking and reimagining, especially when you switch from a less “visual” website builder. But once you know and understand how Sparkle works, I think it’s actually quite easy and fun.

When I built my first website with Sparkle, I made the following mistake:

I started with a new file and created all layouts for all devices right in the beginning. And then while designing the website, I was constantly adjusting each layout. Yes. I know. That was a stupid idea. I found out the hard way. :slightly_smiling_face:

So now I start with one layout, usually desktop (960 pixels). Once that is finished, I do the 320 pixels layout.

And when that is completed, I just add the other layouts (768 pixels and 480 pixels). Since those layouts are created from the other two layouts, almost no additional adjusting is needed – just minor changes. That workflow can be quite quick.

When I do the first layout (960 pixels) I find it quite helpful to make my own “sections” with groups of elements (boxes, text boxes, images …) because then I can move those groups around in the other layouts and adjusting is much easier.

So, I learned from my mistakes. Knowing how Sparkle works, I take its features into consideration when planning a new website.

So, my post was about starting with the 320 pixels layout instead of the 960 pixels layout and working the other way around with the design.

But I’m glad @duncan provided so much background information, it helped me a lot in understanding what “mobile-first” really means. So, thank you @duncan!

I am sure that Sparkle produces great code for each device so we no longer have to worry about all that. :+1::smile: We can concentrate on the design.

And that is the beauty of Sparkle … I am so looking forward to new features in the future and to see where our journey with Sparkle is going.

2 Likes
12

@Shadowfax I noticed this post back in January, but I do like the 360px option of design first. If you tried this I’d be interested in knowing how your navigation came out when switching to the 960 design. If the nav was originally vertical left side, were you able to move to a horizontal nav bar in the desktop version?
-Bill

13

@Woodrow
To be honest … I haven’t tried that yet, starting with the design of the 320 device first. :slightly_smiling_face:
I am still waiting for a project that would be suitable for this experiment.

14

Designing web pages must address the core issue of usability for site visitors. In today’s world, about 60% of site visitors will be using mobile devices of one sort or another, so it may make a lot of sense to start the creative process on a mobile workspace. This gives you the simple option of laying out the web pages in their most simplistic way (usually content at full width and text at a reasonable size of between 12 and 16 pt.) By the way, there should be very little difference in text sizes across devices - maybe 2-4 point difference.

Mobile screens don’t give you the greatest flexibility when it comes to layout of the page, but what it does do is give you the ability to ensure everything is included in your page and is legible. When you switch to a wider screen layout, all your content will still be there, but it will be scaled UP. ( sort of giant version of your mobile page). You can then change the text size and the image dimensions and even rearrange the elements into a more aesthetic layout. The advantage of doing things in this order is that making the adjustments doesn’t create issues with resized and rescaled objects overlapping other content on the page - it simply creates space for you to work with.

When starting with a desktop site and then switching to a mobile layout, you will find everything gets scaled DOWN. This means you have to INCREASE the size of elements on your smaller screen variant. This is when you will see issues of overlapping objects. As you resize text, for example, your text boxes have to be enlarged which often results in other page elements getting obscured as you work down the page.

The mobile-first option may, therefore, make life simpler for you. As you resize and position elements as you work down the page, you will end up with a large amount of white space at the bottom of your page which you get rid of by simply adjusting your page height when you’re finished editing.

Its all down to workflow preference. You simply have to use what works best for you.

2 Likes
15

I have a client whom I cannot convince of the importance of a mobile site. I built his desktop site which he’s quite happy with; now he won’t allow me to build a mobile version. He says,“I never buy anything on my phone; why do I need this?!” He likes the look of the desktop site-- he’s very particular – and hates the idea of rearranging it for mobile.

I’ve tried pointing out statistics on the year over year growth of mobile, but he remains unmoved.
Am I “beating a dead horse”?

Here’s the site:

I should point out that the biggest issue here is on the Shop page Shop | Chris Szwedo where he’s selling his music. The PayPal buttons that look fine in the Desktop site don’t layout well in 320 mobile at all. They look fine if you turn the phone sideways, but most people don’t. (I used the “insert code” approach on these, as Sparkle doesn’t offer PayPal buttons with multiple options yet.)

16

It looks fine to me on the iPhone. Sparkle does a great job of auto-sizing from 960 to 320. I make my website on 960 with 320 in mind and Sparkle does the rest.

17

Oh okay I only looked at the front page. Still not too bad. Why not tweak the desktop so the phone shows up slightly better?

18

Hi, Thanks for your reply to my post. Believe me, I would love to tweak the desktop version but my client is in love with each and every pixel exactly where it is now and won’t countenance a single change. He’s a video producer so is extremely visually oriented.
I guess I should be glad about that?
He’s kind of a Luddite…he hates much of the digital world we all inhabit now. Things like restaurant menus via QR codes drive him crazy. Here’s his reply to me this morning:

“Please know, Dave, that I cannot f***ing read my iPhone half the time. I can’t view products. I make mistakes. My fingers type in the wrong stuff.
My iPhone goes into a dark mode if I sit there and ponder.
Do you do all your booking of your cruises on iPhone? Taxes? Our trips to Italy sure are not. Banking?
I hate the subservience we are under. We are all going blind and our necks are bent. We’re shrinking and our fingers are getting arthritic.
I’ve gone into many restaurants where a QR code on an iPhone is sadly the only way to order. In bright sunlight, it makes it impossible to use, so we just get up and walk out.”

19

Hi macmancape,

In fact I agree with your client (including his letter). I had never been considering mobile version of my site which has plenty of text and photos and is devoted to technical problems and I personally would never visit such a site on a phone.

But, I have just published mobile version of my site only because I noticed that many people visit it on mobiles and I started to feel sorry for them doing it. I sell nothing but do not want to discourage people.

Thus, try to make your client realise that his mobile site is not for him. Let him know that many people do not have/use PCs so he is loosing selling opportunities.

And one more problem. Maybe your client is afraid of extra charge?

Are you “beating a dead horse”? You may have such an impression because many people stiffen their attitudes when being pressed (and his lyrics show this can be the case).

Anyway I like his music.

Be patient and let the situation to cool down.

Best wishes.
Zb

20

Haha!! Dave I like your Luddite. You have to accept that the phones rule. Every human robot you meet in the street is holding one out in front of them. But what are they thumbing through, what are they seeing? Is your website missing out because it is not sized up for a little screen? Really? Must a web designer obey zombie-like the duress to design for the little screen? Must every website look like X or Instagram? Does Duncan love the challenge of coding for the little screen? If the little screen is so all-encompassing great why aren’t we making our websites with an iPhone version of Sparkle? Okay I use an old leftover iPhone which is slowly getting deprecated. Just yesterday this Sparkle community feed went into deprecation and so now I have to reply on the laptop, hurrah!!