Jump to content
RobDoyle

What is the correct order of a site design

Recommended Posts

When you are designing a new website, do you design the mobile version first, or create the desktop version then scale that down?

Share this post


Link to post
Share on other sites

Do both at the same time.

Mobile first just really means making sure the UX on a small screen is good rather than just hacking a desktop screen to fit.

Share this post


Link to post
Share on other sites

You shouldn't do the whole design up front.  Although lots of web agencies do.  unfortunate result of them knowing nothing but waterfall.
Ideally you want to design and build one component at a time.  Seen as you are focused on development I wouldn't worry too much about design, going off our discussions you'd be spreading yourself a bit thin.
When it comes to building a component you want to create it's rough layout / architecture (Before any cosmetics) and ensure if works well for all screen sizes.  Then look to add cosmetic theming to it.

Share this post


Link to post
Share on other sites
On 3/2/2018 at 2:41 PM, fisicx said:

Mobile first just really means making sure the UX on a small screen is good rather than just hacking a desktop screen to fit.

Not entirely. The mobile first approach also has to do with the structure of your CSS.
All your your initial CSS (outside any media queries) would be the only CSS loaded on the smallest screens. Overrides to these initial styles would be placed in min-width media queries and would ONLY be loaded on larger screens which often goes hand in hand with faster connections.

When using the desktop first approach the initial CSS rules would be for the largest screens possible. Devices with small screens would have to read all this CSS code only to have it overridden later by styles defined in max-width media queries.  

Share this post


Link to post
Share on other sites

Agree with that. A well built site however should need the minimum of media queries. If you are clever most of the styles should work on all devices.

Share this post


Link to post
Share on other sites
On 03/02/2018 at 1:41 PM, fisicx said:

Mobile first just really means making sure the UX on a small screen is good rather than just hacking a desktop screen to fit.

I agree, this is what the original book is about, but it has been skewed a lot. The book doesn't mention how you should build a site by reversing your media queries, Luke Wroblewski is a UX designer foremost, and it's heavily about how you should be designing and collaborating on the best mobile first approach, not designing a UI element for example that can only work on desktop, like a complex table. It's also about content prioritisation, if something exists on desktop and not mobile, you should consider removing it entirely, or redesigning it, rather than the display: none approach that was so common back then. It's 100% a UX book.

18 hours ago, Nillervision said:

Not entirely. The mobile first approach also has to do with the structure of your CSS.
All your your initial CSS (outside any media queries) would be the only CSS loaded on the smallest screens. Overrides to these initial styles would be placed in min-width media queries and would ONLY be loaded on larger screens which often goes hand in hand with faster connections.

When using the desktop first approach the initial CSS rules would be for the largest screens possible. Devices with small screens would have to read all this CSS code only to have it overridden later by styles defined in max-width media queries.  

I'm not sure how true this is. Mobile-first shouldn't even be concerned with the structure of your CSS in reality. If you have a bad design, no build style or amount of development work is going to save it, mobile-first needs to be at the design phase not development. I have never built a site or application using the mobile first approach and it always ends up exactly the same as if I would have. The original book that the mobile-first term came from doesn't mention this approach of development anywhere.

From what I understand, wrapping an element in a media query makes no difference to the amount of CSS that's downloaded. If media queries dynamically download CSS only for that size, then this is the first I've heard of it. I always assumed the entire bundle gets requested unless you're doing some kind of server-side detection.

Share this post


Link to post
Share on other sites
18 hours ago, fisicx said:

Agree with that. A well built site however should need the minimum of media queries. If you are clever most of the styles should work on all devices.

I agree to a point, but it also depends on the design and complexity of the UI.  However I do encounter many examples where media queries have been used where the developer clearly didn't have a good grasp of the box-model.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites
8 hours ago, Jack said:

I'm not sure how true this is. Mobile-first shouldn't even be concerned with the structure of your CSS in reality.

OK. Let me explain how I've reached this conclusion.

Mobil first is a progressive enhancement model (at least from what I read everywhere). That means that our core product is designed to support the devices with the most limited features (in this case screen size/resolution)

After we have provided our initial styles we gradually check if the device supports larger resolutions and if so we enhance the initial features (Alows the content to float in to columns  etc.)

If we were structuring our CSS in a way were the core styles (initial rules) would apply to larger screens and gracefully degrade to smaller screens, we would no longer be designing after a progressive enhancement model.

Edited by Nillervision

Share this post


Link to post
Share on other sites
8 hours ago, Jack said:

From what I understand, wrapping an element in a media query makes no difference to the amount of CSS that's downloaded

Take a look at this test. 

Test Five: Background Image Where Desktop Image Set with Min-Width

https://timkadlec.com/2012/04/media-query-asset-downloading-results/

Edit: I also found this:

Quote

Using min-width media queries at the end of your style sheet means writing all of the common (meaning used by all devices) CSS first. All of the rules that you want phones and tablets to see are front and center, with larger screen caveats in the media queries below, in order of increasing screen size. Writing the common-to-all styles first ensures that mobile styles get loaded without desktop styles mixed in – which can significantly improve the mobile experience.

Source: https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/

Edited by Nillervision

Share this post


Link to post
Share on other sites

This whole mobile-first stuff comes from IE8 and it not responding to media queries so you would go with a mobile first approach then IE8 browsers would just get a stacked UI.  Not ideal - but it worked for the best part.

Since then we have had polyfills and beyond that most applications no longer support IE8 or even 9 any more.

The way you structure your media queries is not important now but you should at least be consistent about the approach.  Out of habit I structure mine in a mobile first fashion.
If you are using styles that result in HTTP requests being made like a URL to an external image then you're going to want to use a mobile first approach to prevent devices downloading more than they need to.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites
3 hours ago, Nillervision said:

Take a look at this test. 

Test Five: Background Image Where Desktop Image Set with Min-Width

https://timkadlec.com/2012/04/media-query-asset-downloading-results/

Edit: I also found this:

Source: https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/

That does make sense, I wasn't aware that browsers won't action HTTP requests unless the rule for the media query is met. I think it would slow me down a lot building mobile-first now, especially when our designers at work are really good at knowing web layout, and we use build tools that drastically reduce the amount of CSS sent down the wire anyway. Maybe I'll give it a go, who knows.

Share this post


Link to post
Share on other sites

You will need HTML, regardless if you wish to take the backend or frontend route. I would suggest backend first, for this is the backbone where actual storage and processing of data are done.

Share this post


Link to post
Share on other sites
On 06/02/2018 at 3:48 PM, abigailzoe said:

You will need HTML, regardless if you wish to take the backend or frontend route. I would suggest backend first, for this is the backbone where actual storage and processing of data are done.

Processing of data can be done on either the frontend or the backend.  Where depends on the application.  Learn which you are more interested in.  If you learn both expect it to take you longer to land a job role as a dev.  Full stack roles have a higher barrier to entry.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,433
    • Most Online
      4,970

    Newest Member
    f9ariel
    Joined
  • Forum Statistics

    • Total Topics
      65,747
    • Total Posts
      452,964
×