Mobile-first Web Design

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?

@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

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.

“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.

@greenskin @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:

1 Like

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??

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

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.

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

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

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.

1 Like