responsive design?
- Started
- Last post
- 23 Responses
- dconstrukt
so back in the day, we never had to design for mobile... but now its like a must.
i actually stopped most of the coding and have a guy I send the psd's to now... speeds up my workflow big time...
my coder asks me if I want the design "responsive" but I've never done that type of stuff before (I know, i'm a bit behind the times)
when i'm designing a page now... and I need it to look good on mobile... what are the requirements?
like... what type of things do I need to consider when I design the psd?
do I need to make a separate one JUST for mobile?
or is there a specific width I need to use for the original?
thanks.
Appreciate the insights. :)
- section_0142
Design for mobile FIRST. Then, add shit as the screen gets larger.
- dconstrukt0
forgot to say most of my stuff is direct response marketing stuff... vs the stuff many of you guys are doing... like big brands, corp. type stuff... if that makes a difference.
- kalkal0
Well a start would be go to a bunch of websites that support responsive layouts and see how they handle it. Here's an example:
http://www.qbn.com/- (resize your browser window)kalkal
- not the greatest example, the responsiveness sucks here - images are all over the placeformed
- This should give you the idea
http://mediaqueri.es…reanimate - Although really almost every site is responsive these days so shouldn't be hard to find example.reanimate
- dconstrukt0
@kalkal - seems like it's just more on the coding side making things more fluid vs my psd design?
- breadlegz1
I usually design for larger screen first and then create a stripped down version for mobile.
If it's for direct response marketing then you obviously need to make sure all the response elements are in the mobile version as well, just get rid of some of the elements that don't add to the conversion.
- I agree. I did the mobile first for a while, but have a better experience doing that opposite.ETM
- reanimate0
In practice there are plenty of projects where the developer simply adapts the design to mobile using a framework like Bootstrap but this will result in a pretty generic look. With something like direct marketing I'm thinking the layout and design matter a lot in terms of conversions? If you want it to look good on mobile create a separate PSD for mobile and maybe one for tablet as well.
- Be wary with Bootstrap - it's a crutch that if not carefully-considered will leave you with a mobile-unfriendly page that weighs way more than it needs to.detritus
- Personally I use this as the basis for responsive sites.. http://getskeleton.c…detritus
- You can create custom Bootstrap without components you don't need. But yeah lots of frameworks out there.reanimate
- Sure, but the spare CSS alone in BS is hella heavy. Not 'super easy' to clean out all the unused stuff either, if you're unaware.detritus
- It's 120kb minified, and worth every byte imo. CSS frameworks are a god send.section_014
- dconstrukt0
@reanimate - ya everything we do we have to split test for conversions...
fuck, i guess now we need to be designing another psd just for mobile phones...
arrrrrgh. fuck me... more work!
- LOKi0
yes. and charge more.
- dconstrukt0
@LOKi - damn right man. this guy isn't doing more work for the same price... fuck no.
- voiceof1
Check out Adobe Reflow it's not perfect but it could help you get an idea of how your site will react
- monNom2
Introduce prototyping into your workflow. Prototype early and often.
- showpony0
a lot of folks design using the 960 grid for mobile... google it, and you'll see why this is such a popular option:
- monNom2
^ totally disagree. We've got clients who's mobile usage is under 5% , while others are over 50%. It really depends on the market you're going after. Desktop isn't going anywhere, and neither is mobile.
- < ThisETM
- This, big time. Desktop is nowhere near dead.section_014
- docpoz1
MonNom,
You are probably right. Everything is relative to it's market and environment. I am only speaking from my perspective...not a world-view.
- set0
Tip: do it better
- Guvnor1
A website in this day in age should be responsive. The online environment has evolved drastically with the introduction of varying display ports, webfont technology and the recent and powerful advancement in CSS/HTML. It's just part of the status quo now and clients should expect it as part of the service provided.
Highly recommend moving away from using PS and adopting Sketch when designing for websites. It's an application built specifically for web designers & developers. It will drastically improve your workflow once you've wrapped your head around it: http://bohemiancoding.com/sketch…
Seeing how others are handling site content at varying display sizes can be a boon too. I recommend checking out the 'responsive' category on our site Httpster: http://httpster.net to see some of the more refined examples.
- Guvnor0
Should also mention that Sketch has a really powerful grid/guides generator and a whole suite of templates that makes the whole process a lot smoother.
- Hayoth0
I provide examples of mobile layout of all pages.