25 votes
Accepted

Is programming a website for mobile first really necessary?

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate ...
PieBie's user avatar
  • 4,376
14 votes
Accepted

Responsive SVG path without distorting stroke

As covered in this SO post, you should use vector-effect="non-scaling-stroke" to keep the stroke width the same regardless of the scaling. Updated demo
Zach Saucier's user avatar
  • 13.4k
11 votes

Is programming a website for mobile first really necessary?

Mobile first is best practice -- it's not law, and if you understand why you "should" be using it, you can make an informed decision as to why you don't want to use it on a particular project, and ...
Django Reinhardt's user avatar
7 votes

Do front end developers need to know how to use Photoshop?

Is Photoshop still used to design websites? Yes, this is still quite common. At companies where the team is large enough to have designers and developers separate, PSDs are often given from the ...
Zach Saucier's user avatar
  • 13.4k
5 votes

Do front end developers need to know how to use Photoshop?

Very few web site can be designed responsively in Photoshop alone. Most of the time I see designers designing 3 different web sites...rather than three views of one web site. It's not necessarily a ...
DA01's user avatar
  • 50.2k
4 votes

Is programming a website for mobile first really necessary?

The origin of "mobile first" The idea of "mobile first" in regards to Responsive Design comes from a time when the browsers for mobile devices were a lot less capable than what you would find on a ...
cimmanon's user avatar
  • 488
3 votes

What are the best practices for dealing with desired line breaks in responsive web design?

I have to deal with this somewhat regularly, with input from designers wanting things to break a certain way. I've found the most straightforward way to do this is to put a span with a class inside ...
Joel M.'s user avatar
  • 131
3 votes

Responsive design: Mobile first/only

I think you're misunderstanding how designing for mobile compares to designing for desktop. Luke Wroblewski described the difference best in his post "Organizing Mobile": "[Simply] porting over ...
user9447's user avatar
  • 18.3k
2 votes

What does a responsive web design process look like?

You already have a page layout mockup and you know you are using Bootstrap, so there are really 3 ways to go forward from here: Traditional — redo your page layout mockup as a set of responsive page ...
Simon White's user avatar
  • 1,977
2 votes

Is programming a website for mobile first really necessary?

I tested your website www.cosmosdesign.co.nz on different screen sizes and its's working fine on all screens. Regarding your question for mobile first design I would like to say that your designing ...
wazza's user avatar
  • 121
2 votes

Do front end developers need to know how to use Photoshop?

If you need to ask then you need to know it. It is as simple as that. You really dont need to be super proficient with Photoshop, you just need to know with good certainty what it can do, or photo ...
joojaa's user avatar
  • 57.9k
2 votes
Accepted

The basics of webdesign for responsive grids

So you've never designed using a grid layout but you want to start doing so. Great! A grid is a designers best friend an a structure that serves as a framework on which you can always lean on to. As ...
Mikko Metso's user avatar
2 votes

White lines appearing in 3D extruded text

Yeh Illustrator's 3D does this. The reason for the white lines is basically the same issue described in Objects do not align precisely in Illustrator CC and Image looks embossed when converted to SVG ...
Cai's user avatar
  • 40.6k
2 votes
Accepted

How do I go about designing a background image for a responsive website?

I think ideally for mobile web sites you want to eliminate or reduce the amount of images being loaded to speed the load time and improve readability. So, I'd use media queries, but not to load ...
Scott's user avatar
  • 209k
2 votes
Accepted

What's procedurally important in web building circa 2022?

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 ...
Zach Saucier's user avatar
  • 13.4k
1 vote

Should the browser interface size be taken in to account when designing web apps?

You should consider these sizes in the sense that you should think about your design needing to be responsive, but sizing your artboard to an exact pixel value is not at all necessary. What you ...
Zach Saucier's user avatar
  • 13.4k
1 vote

Responsive website sketch and design tools in 2017

1) Sketch - Sketch was built for UI design and is easy to use. In its recent updates it has some native functionality that allows the user to create fluid design patterns. Lots of plugins out there ...
John Drach's user avatar
1 vote

When prototyping in Figma, can I make the frames automatically fit the device screen width?

In the Prototype sidebar, Device section there is a list with several devices. Those are fixed pixel sizes. If your prototype dimensions don't match the device size you'll probably have scrolling. ...
Luciano's user avatar
  • 7,924
1 vote

Why is the media query pixel half the spec pixel value?

In my opinion, we need to explore some aspects of the history of the monitors and displays. Early size The early digital images were made of really big picture elements, pixels, because of the poor ...
Rafael's user avatar
  • 37.2k
1 vote

Dimensions for designing a website

Breakpoints typically do not vary to any great degree. Devices haven't suddenly gotten wider or narrower. Therefore, standard breakpoints don't really require anyone to "set them". They should be ...
Scott's user avatar
  • 209k
1 vote

Dimensions for designing a website

Among your choices, the Product Owner gets to call the final shot (including all the blame if incorrect). The Visual Designer and Developer can chime in with their research (not opinions). Whomever ...
jhurley's user avatar
  • 843
1 vote

Dimensions for designing a website

who calls the shots? The market. The current technology. In a specific environment, I guess, the project manager. He/she would decide if it is needed for a low bandwidth project, for only mobile, ...
Rafael's user avatar
  • 37.2k
1 vote
Accepted

Designing for responsive layouts

If there is a standard, it would be that 0 to 440 pixels wide would be for mobile, 440 to 760 would be for tablets, 760 to 1200 is for computers and above that for wide screens. However it's not ...
BenoitLussier's user avatar
1 vote

How do I tell my boss that email responsive design is not perfect?

Show her how emails get mutilated on different platforms and after forwarding or replying. Desktops and phones handle email very differently, and peoples local settings affect look, size, images, ...
Webster's user avatar
  • 4,189
1 vote

Best practices for defining grids/containers/spacing using responsive layouts

Google doesn't know everything... Material design uses a 4pt grid which dictates the margins, spacing between containers, padding, vertical and horizontal alignment, and is sustainable for many ...
Cai's user avatar
  • 40.6k
1 vote
Accepted

Sketch plugin to use images for borders?

Absolutely, there's a way to do this in Sketch. The plugin you're looking for is Anima's Auto Layout (Recently packaged as LaunchPad) https://www.animaapp.com/ If you don't want to read and do it ...
Spasimir Dinev's user avatar
1 vote

Have a Design Concept -- How to iterate it into multiple breakpoints for Developers?

Honestly, those in-between sizes are more wildcards than anything else. I would design against the "standards" (iPhone 5 and 6/Samsung Galaxy) and anything in the middle is up to possibly adjusting ...
Aibrean's user avatar
  • 405
1 vote

Desktop, Tablet and Mobile Phone Best Pixel Size for Artboards in Photoshop

These are just guidelines, but I hope it helps: Mobile: around 320pts Tablet: Around 768pts (portrait) Browsers: 1024+ pts There are a couple of notions behind this, so, to make sure I don't give ...
Lalabadie's user avatar
  • 361
1 vote

What are the best practices for dealing with desired line breaks in responsive web design?

You could add white-space: nowrap and place <wbr> at the places where you'd like to allow line breaks. If this is not enough and you want fine control with media queries you can still add ...
Tom Esterez's user avatar
1 vote

What does a responsive web design process look like?

I can see this having several different approaches, all based on company policies, culture, personal work flows, etc. To answer your questions, with respect to MY typical workflow... 1&2: ...
Manly's user avatar
  • 6,674

Only top scored, non community-wiki answers of a minimum length are eligible