Questions about designs that adapt to the size of the viewing device.

learn more… | top users | synonyms

1
vote
0answers
21 views

In Dreamweaver, is it enough to just use “media queries” for layout, or it's better to use “fluid grid” as well? [closed]

I'm a new to web design (my experience in print design). I'm using Dreamweaver, and I would like to understand more about responsive websites. My question: is it enough to use "media queries" to make ...
0
votes
1answer
17 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 ...
0
votes
1answer
57 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 ...
0
votes
2answers
73 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 ...
0
votes
0answers
24 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 ...
0
votes
1answer
65 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 ...
0
votes
2answers
108 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 ...
-1
votes
1answer
70 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 ...
8
votes
5answers
4k 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 ...
0
votes
0answers
27 views

Points to Pixel to Em Conversions

I am designing a responsive site and I am converting the points to pixels and then converting the pixels to em's and I am using the W3 pixel to em converter. my default pixel size is 16px. I am ...
5
votes
4answers
242 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 ...
3
votes
2answers
116 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 ...
0
votes
1answer
57 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 ...
-1
votes
2answers
86 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 ...
0
votes
0answers
37 views

Can I expand the InDesign pasteboard vertically, then move the page to the top?

I'm trying to refine my responsive design template in InDesign. I have master pages for my main breakpoints, based on typical device sizes. The "Page" is what a user sees on loading a screen, and then ...
1
vote
2answers
119 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 ...
0
votes
2answers
60 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 ...
7
votes
4answers
3k 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 1080x1920)? And for mobile apps. do we target ...
0
votes
0answers
25 views

Are there any great free resources to learn how to design with? [duplicate]

I'm a web application developer. I'm full stack. In fact, I also do a lot of server administration; really I do it all. Very frequently I get clients with no design in mind, and no designer picked ...
1
vote
2answers
99 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 ...
2
votes
4answers
209 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....
3
votes
4answers
8k 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 ...
1
vote
3answers
615 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 ...
6
votes
4answers
1k 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 ...
-5
votes
3answers
118 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 ...
0
votes
6answers
2k 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 ...
1
vote
2answers
171 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 ...
18
votes
5answers
2k 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 ...
4
votes
5answers
389 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 ...
0
votes
4answers
458 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 ...
1
vote
1answer
85 views

Responsibilities and requirements graphic design

Plan to recruit one position for graphic designer to my organization, but I'm not sure how to put/assign the responsibility to him/her. actually I have read this article How can I write requirements ...
4
votes
4answers
412 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. ...
12
votes
5answers
4k 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 ...
0
votes
0answers
27 views

Responsive Images in Practice: @2x images [duplicate]

Are @2x images simply larger in terms of height and width or do they actually have a higher PPI (pixel density)? Trying to figure out my workflow for creating retina (@2x images) and this affects how ...
1
vote
1answer
128 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,...
0
votes
0answers
184 views

Ideas for tap indicators for hover effects on responsive design

I'm currently working on a website for a client that uses many hover effects. While the client loves the hover effects and would like to keep them on the website, there is an issue of the site viewers ...
20
votes
2answers
7k 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 ...
0
votes
1answer
219 views

What is the most up to date design template I should use?

I am a web-developer and am starting a new project. First step is designing the site. In the past, I have used 960 grid system but I was wondering if this is still the standard pretty much? Is there ...
2
votes
3answers
532 views

How can I test the responsiveness of my non-hosted website on my phone?

I wonder if there is a similar tool to Skala Preview (it is for live preview of photoshop work on your iPhone via Wifi) to test my web design (index.html and its assets folder) onto mobile phones (...
0
votes
1answer
1k views

How to scale a web page for different resolutions?

I have a web-page for devices(smartphones/tablets). I have used media queries to make it responsive and have used rem units for all measurements. I have set default html/body font-size:62.5% and then ...
7
votes
3answers
678 views

Can Email Be Responsive?

Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile—with over 50 percent of email opens occurring on mobile devices. ...
2
votes
2answers
826 views

Gaming Icon Question for A Flat Design Gaming Portal

My designer is working on a flat design for a gaming portal for World of Warcraft. We want to use icons for a sub-menu and figured using icons directly from the game would be best from a user ...
0
votes
2answers
66 views

Intervals: compact/responsive design ?

We have to display intervalls to the user to choose from: less than 1250, 1250 to 5000, 5000 to 10000, 10000 to 50000, 50000 to 100000 and over 100000 I thaught of something like this   &...
1
vote
4answers
40k views

Best image size for responsive css background image

I am looking for a particular px size (WxH) image that would be the best dimensions to use if you wanted to call a single image that could be called as the background image for a mobile device using ...
-2
votes
4answers
2k views

Screenshot mockup of website on different devices [closed]

Which is the best way to show how a website differs on various devices for responsive web deisgn such as the screenshots found here
2
votes
2answers
134 views

Responsive or adaptive design

Which is better experience in responsive design.. To create all containers with % and em units OR use pixels for main containers and % for content (adaptive)? Thanks
2
votes
2answers
13k views

Setting up responsive grids in photoshop

I'm having some serious trouble understanding one aspect of responsive design. I understand almost all of the basics but one thing that is troubling me is setting up correct grids in photoshop for ...
1
vote
1answer
751 views

Is it possible to use media queries for responsive emails?

Today and yesterday I had nightmares... One thing is that I personally have a Windows phone. That didn't help surely. But I was reading up on iPhone settings and Android settings and there was no ...
0
votes
2answers
979 views

Mockup strategy for Responsive Web Design

When making mockups for Responsive Web Design projects, should I separate them by Page or by Screen Size? What are the pros and cons of the following: Page based: All the home page mockups in all ...
0
votes
1answer
3k views

12 or 16 column grid for a full width website? [duplicate]

So I'm looking for the right answer for my grid system: 1) Should I use 12 or 16 column grid for a full width website similar to these websites: http://xfinitytv.comcast.net http://www.vevo.com 2) ...