We’re rewarding the question askers & reputations are being recalculated! Read more.
25

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 you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself ...


14

I think there's two popular ways to approach this: device-dependent breakpoints and design-dependent ones. While I do try to build my CSS from mobile on up towards large screens, I don't pre-define breakpoints. I start with as many intrinsically responsive elements as possible anyway, making use of the inherent property of block-level elements to try to fit ...


12

I'm only advising this on the basis that it's used for short snippets of text and not paragraphs. The formatting of headlines can and should be controlled as much as possible within reasonable limits. JavaScript, or extra unnecessary elements are not quite "reasonable limits". Non-Breaking Spaces on the other hand...       &...


12

Where should the responsibility of designing a responsive website fall? Typically on management. Smart management will realize it's a team project so everyone needs to be coordinated and working in tandem. This would include (but not limited to) visual design, UX, UI dev, back end dev, content team, marketing, etc. Agile development is a good way to ...


12

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 that's fine. It's worth noting that "mobile first" relates to the design/UX and the build itself. Mobile first design won't speed up your site for users, but ...


9

Any well skilled designer is always going to be interested in implementation to a degree. Perhaps not in an "I can build it" aspect, but at least in a "that's not possible" aspect. Whether a designer hits the far right side of your graph or not, they should always know what they can and can't do in any given medium. You can't design well for print if you ...


8

There seems to be a serious need for more responsive design tools as of late. Many of the new initiatives are web based and some look promising but I've yet to give them a thorough workout: http://froont.com/ http://www.webflow.com/ https://www.easel.io/


7

The truth is, few are using Photoshop to mock up entire sites anymore. That's just not how modern web design is done in my experience. Wireframing has become much more of a starting point for design than it was 5 years ago. The days where you'd spend hours creating the perfect mock up in Photoshop, then recreating everything again in HTML are long gone. Any ...


7

Personally when it comes to break points, I start mobile first (as you always should), then I use the following: @media all and (min-width: 321px) { // 321px and up } @media all and (min-width: 641px) { // 641px and up } @media all and (min-width: 769px) { // 769px and up } @media all and (min-width: 1025px) { // 1025px and up } @media ...


7

Responsive Photoshop web templates do not exist. Usually if someone is creating Photoshop templates for a responsive site they are based on the CSS media queries. If you are developing for each media query that is going to be a nightmare if you target up to four devices (mobile, tablet, laptop, desktop, soon to be an addition with Mac's 5k). I would ...


7

The short answer is: there is none. If you want your website to be prepared for use in the wide, wild world, you should keep any screen width between, say, 480 and 4800px in mind. Modern designers for responsive webdesigns (designs that adapt to the width of the viewport) work with ranges of widths. Each range has its own quirks to adapt the website to the ...


7

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 design team to the development team. There are often 1-3 versions of a site showing how it will be responsive. For more on that, check out these posts or more in ...


6

The icons should match the overall aesthetic of the UI. If you're going for a very flat aesthetic for your UI, the icons should follow along. So if you're using this subject matter: Redraw it so it fits your flat UI (really quick/rough example):


6

The best practice is to acknowledge that you have no real control over line breaks on the web and it's best to design with that in mind. Any solution to the contrary will, invariably, have to be hacky. As it will be a hack as HTML doesn't adhere to user defined line breaks outside of hard coding. You could do it with JS fairly easily. Set up your break ...


6

While I agree with the mentality in DA01's answer, I think there is more to the question than just what he addresses. The simple fact is that companies are organized in different ways due to the fact that they have people with different skills and vary in number of employees in each division. Each company needs to approach this decision with care and their ...


6

Short answer: No Photoshop can’t create responsive templates. Long answer: To understand why, you need to understand the difference between normal, static designs (like you do in Photoshop) and what is needed for a responsive designs. Lets take a portrait of someone that is in portrait format 4✕6. Now someone cuts of the upper half of the image, making it ...


6

Responsive design is based on neither screen resolution nor screen size. Instead, responsive design is based on the content and how it's made which allows it to fit all sizes and resolutions. The way you're thinking about responsive design is wrong. I assume you're coming from a more conventional print design background, yes? Designing for the web is much ...


6

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


5

The term is 'fluid width' site--which is a layout that stretched to accommodate the browsers. Layouts that also re-arrange elements based on screen size (in addition to fluid stretching) is called a 'responsive layout' site. Reasons why you may not want a site to stretch the full width: it can be a bit more challenging to design around than a fixed-width ...


5

Most web designers or developers have their own web site which has hosting. You can simply create a subfolder on your hosting account and drop the web site into that... and access it via http://www.yourdomain.com/subfolder. If you don't have a hosting account, get one. They run as little as $40 a year. Other options include using things such as MAMP, LAMP, ...


5

As Scott mentioned in a comment, the key is charging for time spent developing the site, not the number of breakpoints. Part of the reason being you may have a lot of breakpoints for one component that is troublesome but doesn't require a lot of time. Also as Scott mentioned, clients don't know what goes on behind the scenes nor do they really need to. ...


5

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 fault of the designers...Photoshop, being a static canvas, simply isn't a responsive medium. Knowing Photoshop certainly won't hurt, as lots of web sites still ...


5

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 desktop device. Many of them did not support media queries at all, so the idea of building up a fancy desktop design and then sticking in styles using media ...


4

I'd say Twitter Bootstrap is probably one of the favorites. It has a nice grid system that utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack ...


4

Just this morning Smashing Magazine featured an article about focusing on part of an image when scaling for mobile devices: Choosing a Responsive Image Solution (scroll down to the section, "The Art Direction Problem"). With the photo of the road on your website, you'd want to make sure to show the road, as opposed to the trees, when scaling down because the ...


4

The options seem straightforward. Use multiple image sizes, each called via media queries, to match the 4 basic screen sizes. Use the background-size: property to dynamically alter any background image use the overflow: hidden; property to simply hide larger images within a div as the page width decreases. This would require you to keep in mind what IS ...


4

This should be possible somewhat easily if you instruct your web developer accurately. They'll have to give the bar a certain so-called class and include a media query to hide it on smaller screens. for example: html <div class="foo"> <div class="bar-element"> ... </div> <div class="bar-element"> ... </...


4

Great question indeed! My confusing long answer: None and both Just some thoughts here commenting a bit the contradictions we are facing today. The technology is not what it should have being since ages. We all should be designing based on real life units (or percived size), with some degree of flexibility and freedom to let the user do some aditional ...


3

So can email really be responsive Simple answer to your question.. YES HTML emails fall somewhat under the same rule of websites but usually they are harder to deal with and still rely on old dated code style using <table> tags. There is a great article by Web Design Tuts that I wish was around when I started doing HTML emails. A little about ...


3

I'm feeling where you're coming from as far as making the users feel comfortable through familiarity, but ask yourself: Will using icons that look just like what's used in game really be a good way to represent the functionality for my interface? I suggest that you focus on using the color scheme and style of the game and icons in the interface to ...


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