7

I'm essentially seeking a "crash course" or explanation in any web building changes over the past few years - best practices, new methods, new pitfalls, etc.

It's been a number of years since I built out a full web site.

Most of the time, I'll construct a home page and secondary page, then that's passed off to a client's developer to flesh out anything more. Or I simply build a single landing page or email. These are tested for basic responsive sizes but not everything - my web work is generally more direct sales driven than it is "business presentation" or "trade dress" in nature.

I'm refreshing my own site and am realizing the breadth and scope of possibilities for today's presentation oriented web sites - Desktop, tablets, mobile.. portrait, landscape. Ugh!

That could be a least 10 different scenarios any single web page could be viewed through. Then factor browsers/OS and that 10 gets multiplied for each browser or separate OS which needs testing. I realize that a great deal of testing won't show any direct need for alterations in all screen sizes.

I'm aware of media queries and how to utilize them to create dynamic content and shifting/changes as necessary.

What I'm curious about is what are professional web designers testing and using in 2022?

Are the 5 main viewport sizes - 1440, 1024, 768, 425, 320 - all tested in both portrait and landscape?

Are most popular browsers tested - IE, Chrome, Safari, Firefox?

Essentially, from a designers standpoint...

Is there a systematic approach which assists in web building today which may be more than merely ensuring responsiveness?

What's the general procedure in use today?

How have things changed in the last 2 or 3 years? If there's been any change.

Has new software come on the market that's made things easier or streamlined some aspect and how it is useful? (i.e. XD, Figma)

Note, I'm not referring to markup or development. Obviously, if testing a design, at a minimum CSS and HTML need to be considered. But I'm not seeking any markup assistance. Rather I'm more curious about any helpful "new-ish" procedures or workflows others may have in place compared to 3-5 years ago.

Improve this question
1
  • 1
    This is precisely why I use Behance to showcase my portfolio. It is not perfect, but you can update with a few clicks, you can set it up to your own domain name, it comes included with the CC plan, and the resulting website is good enough for a potential client to spent a few minutes on. I would rather focus on the presentation of the work (the images), versus the actual website interface and the code behind it.
    – lmlmlm
    Commented Nov 8, 2022 at 11:52

1 Answer 1

Reset to default
2

The question content seems to be focused around designing for various viewports, so that's what this answer focuses on.

This depends largely on the team working on the project, the skills of the engineer implementing the design, the needs for the project, and the completeness of the system. In this answer I'll talk about my first hand experience as a front-end oriented developer.

The company that currently employees me is one focused on a product. My current title is "design engineer". It was named this way to imply that the engineer/developer is to:

  • Have some design sense
  • Provide input, feedback, and make some suggestions to the design of a page
  • Fill in the gaps of the provided design. For example, my company expects the "design engineer" to own all of the responsive design. I'm usually only given one design at a desktop-ish width. However, a lot of our building blocks (components) are already responsive so it's not from scratch each time. That allows me to focus on the responsiveness of the new component(s). The engineer can also ask the designer to help out/provide input on how something should be made responsive if needed.

The "design engineer" is not expected to be making all the design decisions or building a new page from scratch that doesn't match the format of old pages.

When I worked for marketing agencies, my role was a "front-end developer". These positions tended to have slightly less emphasis on the developer's design sense and contributions. I was normally given 2 views: the desktop and mobile (though admittedly the mobile designs were generally less thought through). The in between (and extra large views) were up to me to implement properly, again asking the designer for input if need be. Sometimes 3 versions were provided (desktop, tablet, mobile).

At at least one company that I've been at, there were discussions of having designs for both sides of every viewport range. For example, 300px and 599px, 600px and 1079px, 1080px and 2600px. This is easiest for the engineer implementing the designs because far more edge cases are thought of ahead of time but is more work for the designer.

It's impossible to design for all cases. So finding the proper balance between effort and precision for the team working on the website/application is key. Usually it takes some back and forth (i.e. multiple projects) to find that balance for a given team and it may change over time. If you're starting to work with new engineers/developers, I'd have a conversation with them to get a better picture of their expectations.

Also if you're making a whole design system from the start it will likely require more input/design/conversation from the designer to set up good norms.

Since this is related to testing, I'll talk a bit about the cases we usually test (and therefore build for):

Regardless of the company, we usually test our webpages using common device sizes for mobile and tablet views (browser dev tools and things like Browserstack make this easy). We also usually drag around the browser window to test various desktop-ish sizes. We also usually share the staging page internally, especially with people who haven't been working on the page, for QA as well. Doing these things should show the majority of responsive-related issues.

Improve this answer
4
  • Very helpful, Zach. Thanks! And to answer the comment on the question -- I'm open to anything which maybe a concern in today's web building landscape. I do utilize Zurb Foundation for a base which covers most responsiveness, but as I was working and testing today, it became apparent I needed to block, or deal with, 320w devices in landscape. This is kind of what spawned the question. 5 years ago it wouldn't have occurred to me to test landscape in every screen size as well.
    – Scott
    Commented Oct 19, 2022 at 5:14
  • Basically.. I don't know what I don't know. And it's been several years since I really explored any developments beyond basic responsiveness. Web building isn't a primary focus of my business beyond landing pages/emails.
    – Scott
    Commented Oct 19, 2022 at 5:41
  • Most the time the companies that I have worked for don't spend too much time thinking about edge cases like small phones rotated landscape. Those users tend to choose the more reasonable option of landscape vs portrait for whatever they're looking at
    – Zach Saucier
    Commented Oct 19, 2022 at 14:39
  • no worries.. just unticked to encourage more answers.. you'll most likely get the tick back.
    – Scott
    Commented Nov 7, 2022 at 10:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.