Questions tagged [responsive-design]
Questions about designs that adapt to the size of the viewing device.
68 questions
1
vote
1
answer
846
views
How do you Clip and Inverse Clip a complex object in Inkscape?
I have an SVG that's meant to be a responsive web button:
After some trial and error, I've noticed it doesn't look great at extreme widths: the vertical borders get thinner and thicker as the ...
7
votes
1
answer
126
views
What's procedurally important in web building circa 2022?
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 ...
- 211k
0
votes
1
answer
1k
views
Image retain proportions as it scales down using XD responsive resize
I'm having this recurring issue with XD where i want to resize a group of elements where one element is an image, without changing the proportions of the image which needs to remain 16:9. In this ...
2
votes
2
answers
2k
views
On Display Resolutions, Scale and Layout in Windows 10
On my last project I was designing a website in Figma and I realized there is a problem I was not so aware of.
In Windows 10, at the Display Settings, there is an option for Display Resolution, this ...
- 3,748
1
vote
1
answer
4k
views
When prototyping in Figma, can I make the frames automatically fit the device screen width?
I'm new to Figma, just started learning it today, so maybe I'm missing something obvious.
I have a frame with a design that uses constraints to scale nicely to different screen widths. When I ...
- 135
2
votes
2
answers
662
views
Why is the media query pixel half the spec pixel value?
I have an iphone 6 which has a pixel width of 750px according to:
https://support.apple.com/kb/sp705?locale=en_US
However when working with media queries in an RWD debugger the width is 375px which ...
user127656
1
vote
3
answers
897
views
Dimensions for designing a website
I have three related questions:
When it comes to deciding on the dimensions for responsive web design, who calls the shots at a digital agency? Is it the visual designer, developer, product owner or ...
- 11
-1
votes
1
answer
143
views
Mobile design guidelines and handoffs
Backstory: I have no previous digital design experience but recently started working as a UI/UX designer for a small company. This is my first job.
Problem: We are currently working on a react ...
- 101
1
vote
1
answer
776
views
Sketch Symbols - maintaining padding between 2 paragraphs when adding/ removing text
I wish to create the following responsive symbol for a popup in Sketch.
I am a big fan of the Resizing functionality built in to sketch, however cannot solve the following problem with the Resizing ...
- 13
0
votes
1
answer
75
views
Designing for responsive layouts [duplicate]
I've come to find a love for UI design, and I really do enjoy it more than most other aspects of the Graphic Design field. But an issue I have encountered is designing for responsiveness.
I know the ...
- 103
-1
votes
2
answers
66
views
How do I tell my boss that email responsive design is not perfect? [closed]
I've been working on this new e-mail for a month now (concept, design and code) and after long testing on emailonacid and different personal email clients my boss complaints that the last letter "t" ...
- 1
0
votes
2
answers
689
views
How do I go about designing a background image for a responsive website?
I've been looking around all day for an answer or a guide but I can't seem to find anything. I may be missing a key word here.
I have a single page website that I would like to design a background ...
- 187
0
votes
2
answers
901
views
Should the browser interface size be taken in to account when designing web apps?
As the table below suggests, should you take into account the size of the browser itself when designing web apps? For example, should my artboard size be 1331x548 instead of 1366x768?
http://www....
- 11
0
votes
1
answer
273
views
Responsive website sketch and design tools in 2017 [closed]
About 4 years ago, someone asked the community here to suggest tools they use for mocking up responsive websites. Of course, since then, times have changed and so I'm raising the issue again here in ...
- 169
6
votes
2
answers
558
views
The basics of webdesign for responsive grids
I've never designed using a grid layout. I want to do that now so my developer can easily change the current layout, that is already made using a row/column grid.
I opened my software, made a grid ...
- 2,706
1
vote
1
answer
4k
views
White lines appearing in 3D extruded text
I just began learning illustrator so please excuse my ignorance.
I created this design in illustrator:
My question pertains to the cause and fix of the white lines appearing on the text:
I exported ...
1
vote
2
answers
132
views
Conversion from web to tablet, retina [closed]
I'm currently working on a web document on an iMac. The current width on which I am designing this document is 1366px.
I now need to convert this design to a tablet, for both retina and non retina. ...
- 11
0
votes
1
answer
2k
views
Best practices for defining grids/containers/spacing using responsive layouts
I am laying out a web app and have decided to use a 12-column, 30px fixed-width gutter (existing constraints dictated our layout). However, how should I design the spacing units, margin, padding, etc. ...
- 1
0
votes
1
answer
159
views
Moving up the typography scale from mobile to desktop
I have a typography scale for mobile devices with a baseline of 23px and a base font size of 16px.
I want to increase the scale and line height for tablets and then desktop but in increments that ...
- 15
1
vote
2
answers
447
views
Sketch plugin to use images for borders?
I was looking around for a while, but can't find a solution for this. Essentially, I want to use an image for the border of a square, to ensure it stays consistent while resizing (very similar to ...
- 217
4
votes
1
answer
15k
views
Responsive SVG path without distorting stroke
I have a simple SVG path with a stroke that I want to responsively resize with the browser window. The problem is that when my paths aspect ratio is changed, the stroke is distorted.
This is the ...
- 40.8k
0
votes
2
answers
116
views
Have a Design Concept -- How to iterate it into multiple breakpoints for Developers?
I'm a designer at an agency that primarily does "PSD to HTML" web development. I know that some can argue it's not ideal, but within my agency this is how it works because most layouts need to be ...
- 101
0
votes
0
answers
74
views
Designing an image that is a multiple/tile of another image
I am trying to come up with a concept design for a background image that uses a repetition and/or tiling of the original image to achieve an effect that allows the audience to recognize the original ...
- 1,175
0
votes
1
answer
520
views
Creating a mock-up with foundation (prototyping)
I am new to ZURB's Foundation (new to responsive design, generally speaking), i came from 960GS, so I need help and some advice as I am very confused..
I start design process with 1) drawing some ...
- 103
0
votes
2
answers
5k
views
Desktop, Tablet and Mobile Phone Best Pixel Size for Artboards in Photoshop
I activated the Photoshop Artboards and I'm starting to use three, one for desktop, one for tablets and the other one for mobile. The problem is that until now I've always used 1366x700 for desktop ...
- 179
-1
votes
1
answer
102
views
User Experience - Design _ need advice on Slants and Colors
I am not a UX Designer but an UI Programmer and want to get an opinion which will help me articulate the Design Choices my Company should not take
As you see from above , there are containers with ...
- 101
12
votes
6
answers
6k
views
Is programming a website for mobile first really necessary?
I've read through a number of sources which state mobile first design is almost essential, which I can't deny it does have obvious benefits such as faster load times for mobiles which generally have ...
- 513
5
votes
4
answers
3k
views
Do front end developers need to know how to use Photoshop?
I'm a front end developer that has never used Photoshop before and always designed my websites in browsers directly. I know that website development has changed a lot since responsive design came into ...
- 379
2
votes
2
answers
254
views
Responsive design: Mobile first/only
I work in a design studio, and when we have a responsive project we usually start the full design for the desktop, and when we're done with the desktop, for the rest of the platforms we choose a ...
- 3,047
0
votes
1
answer
77
views
Designing responsive websites [duplicate]
I have three questions:
I've read in some places that I should start designing for mobile and then build responsively out for tablet, then laptop, and finally different desktop sizes. I've also read ...
-1
votes
2
answers
188
views
What does a responsive web design process look like? [closed]
I'm an entry level UX designer. Recently the startup I'm working for asks me to create responsive mobile mockups for their site I designed a month ago. I have a few questions regarding the design ...
- 1
3
votes
2
answers
238
views
How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect?
Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the ...
- 131
0
votes
2
answers
106
views
Can you re-use layers but in different locations / dimensions?
In website mockups, I design the front page, then duplicate layers constantly for other pages design. Things like the header and footer stay basically the same, so they are copied. Their exact ...
- 3
11
votes
4
answers
20k
views
Responsive web design is based on screen resolution or screen size?
For mobile devices the resolution is actually big, only screen size is small.
based on that:
For websites design, do we target screen resolution (e.g 1920x1080)?
And for mobile apps. do we target ...
- 267
1
vote
2
answers
242
views
Charging for responsive design
I'm curious to know what other graphic designers here quote clients for responsive design.
As I've only done a few and they're all very different, its not enough to really calculate a consistent ...
- 111
2
votes
4
answers
4k
views
How do I color a table to look neutral?
This is a web table I'm working on!, What tweaks should I do to make it look neutral?
This table is responsive as 2 columns will be displayed on a mobile device, 4 on a tablet and 6 on large displays....
- 129
4
votes
5
answers
41k
views
What's the width to mockup websites for desktop and mobile now?
Recently, I was practicing web design beyond code things. But after I opened Sketch and just started to make a rectangle of my site, I got stuck.
What width should I use?
I'd search for the ...
- 205
1
vote
3
answers
2k
views
Hero Banner - Responsive Design [closed]
Is there a "best-pattern" for responsive banners?
I see this one all over the place:
...in fact, I haven't seen much else on responsive websites.
Essentially, the common theme seems to be a faded ...
- 242
6
votes
4
answers
2k
views
Why should I make reponsive templates in Photoshop?
I am a designer and currently working on responsive web templates in Photoshop.
I started to learn responsive designs just now after seeing its market need.
As I am a designer so I started to try in ...
- 59
-7
votes
2
answers
240
views
Meaning of Responsive web design
Many graphics and web design companies ask for the knowledge of responsive web design. What is responsive web design actually is and what are the tools someone should know to create and design ...
- 9
0
votes
6
answers
4k
views
Should I design PSDs for Desktop, Tablet and Mobile separately in responsive design?
I'm trying to design a responsive web site in Photoshop. But the question is should I design different PSDs for all these devices? (Desktop, Tablet, Mobile)
If yes, what page size should I choose in ...
- 101
1
vote
2
answers
1k
views
Continue Fill for Background Image
I have an image I'm using as background which is 3000px by 1500px. For responsive design, I need to extend it to 3000 x 3500. It is an image of a river, and I want to continue the look of the river ...
- 113
20
votes
5
answers
3k
views
To which extent is the designer responsible of a responsive design?
Consider the following (idealized) chart.
Now, I have worked with colleagues from every side of this spectrum and have learnt that, unfortunately, it tends to be more like this.
Most "web developers"...
- 8,196
4
votes
5
answers
979
views
Most efficient way to adapt current mockups to different devices and resolutions
I've completed about 90 screens of mockups in Photoshop for an app.
The mockups are done for iPhone 5 / iOS7 (640px by 1136px). Everything is calculated to pixel-perfection.
Now management wants to ...
- 293
0
votes
4
answers
1k
views
When designing PSDs for responsive design, how do grids and columns behave?
Ok, so I have this question that has been bugging me for quite a while, I'll try to explain it in detail.
I'm designing a regular marketing website, and did the desktop version first using the ...
- 43
4
votes
4
answers
492
views
Resources on producing responsive design wireframes and artwork, for graphics designers
We're developers who partner up with a graphic design studio for our project artworks. Some times they even bring in the clients themselves and we both cooperate to get a development project done.
...
- 200
20
votes
8
answers
14k
views
What are the best practices for dealing with desired line breaks in responsive web design?
I design a great deal of simple single page web items for sales or email. I often find I run into issues with headlines and my desired line breaks at different media widths.
For example, I could ...
- 211k
1
vote
1
answer
371
views
Is it possible to hide part of an adaptive web design on smaller screens?
This is the News page of my firs adaptive website.
The full height is shown (the scroll-down part is also included).
The terracotta sections on the horizontal line are for placing news feed images,
...
- 81
22
votes
2
answers
9k
views
What are best practices for determining responsive design breakpoints?
I've done a lot of research trying to figure out where to put my breakpoints for designing a responsive site. There seem to be at least three, maybe four common plateaus: phone, tablet, and two ...
2
votes
1
answer
196
views
When designing HIFI mockups for web apps, how do you determine the width of your file?
I've designed a handful of web apps now and I seem to be just as confused about document widths as I was before I ever started. I've made the mistake of mocking it up at 1920 wide and jamming it full ...
- 21