Jump to content
Sign in to follow this  
Red11

Responsive design preview software/app?

Recommended Posts

Hi all,

 

Looking for some advice here:

 

I produce photoshop mock-ups from design briefs and display them in software online (currently use cageapp.com) where myself/sales/client can make notes on page elements in our own time on design tweaks.

 

However with the incoming of responsive and mobile first platforms, it seems a little old hat to just give a mock-up of a desktop version of a site.

 

We looked at Adobe Edge Reflow, the drawback here is the lack of support with preview software.

 

I have heard before of designers supplying the customer with html/css versions to the customer so they can preview how the site would behave in browser. Whilst this sounds good, it doesn't allow for the note adding and doesn't fit in our current site development model.

 

Is there software out there that would fulfil these requirements? Thanks.

Share this post


Link to post
Share on other sites

Yes - A code editor :)

 

a growing trend for design & development now is to design in the browser, although the term is a little missleading, what usually happens is a designer & a developer will brainstorm ideas for the website or app, then sketch out ideas for modules on paper, whiteboard or a sketch program, then they will re-create the modules in the browser with the designer making design suggestions to the developer. I won't go into detail about why this approach is a good idea but I will mentiion that many web agencies work this way and a growing number of large media organisations (Netflix, BBC, SKY) are adopting this approach, after they have likely conducted extensive research into the idea. It also plays nicely into the Agile workflow and can also allow for a continuous delivery appraoch to the project.

 

But if you wish to do it the old way you must code the psd up in using a code editor, you often find that designs done by print designers or designers who are not yet familiar with responsive design won't work in a responsive site without modification and/or bad coding practices of which the latter should be avoided unless you like spending lots of time and money fixing bugs / doing maintenance etc.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

^ what he said really. the sooner you can get into the browser the better, only then can you see how things really pan out across screen sizes and devices. You don't have to start with a complex "design", just some simple greyscale responsive layouts that suggest how different types of content may be presented plus generic page elements like navigation.

 

Once you have that in place to can then start adding things like interactions (links, javascript etc) and probably some core colours. You just keep building things up this way and gradually it all comes together.

Share this post


Link to post
Share on other sites

^ what he said really. the sooner you can get into the browser the better, only then can you see how things really pan out across screen sizes and devices. You don't have to start with a complex "design", just some simple greyscale responsive layouts that suggest how different types of content may be presented plus generic page elements like navigation.

 

Once you have that in place to can then start adding things like interactions (links, javascript etc) and probably some core colours. You just keep building things up this way and gradually it all comes together.

 

^ what he said really. the sooner you can get into the browser the better, only then can you see how things really pan out across screen sizes and devices. You don't have to start with a complex "design", just some simple greyscale responsive layouts that suggest how different types of content may be presented plus generic page elements like navigation.

 

Once you have that in place to can then start adding things like interactions (links, javascript etc) and probably some core colours. You just keep building things up this way and gradually it all comes together.

 

I should also add Codepen is a great way of sharing modules and ideas with a client remotely.

Share this post


Link to post
Share on other sites

I think, there is no need of any apps or softwares. Firefox is enough to doing this. After you design your responsive website, then you have to check it appearance by using a firefox shortcut ctrl+shift+m. You can change the default resposive size as well. Default size is 320*480

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By sash_oo7
      Hello friends
       
      I designed a business card for one of my client in photoshop
       
      with following specifications
      300dpi
      3.75in x2.25in
      color mode CMYK
       
      now
      i downloaded a print template for business card from vistaprint ( check the attachment)
      now when i drag the psd file in vistaprint file its almost double the size (check attachments)
      When i check the image size of 2  in inches it shows same but in pixels the size  is double

      What am i missing ?

      Vistaprint_Business_Cards.zip
       
    • By MartinKavik
      What do you think would be the most effective way to design responsive web pages / apps? (Feel free to invent some alternatives to CSS, HTML, Adobe XD / Sketch, etc.)
      I’ll develop an open-source app inspired by your answer. Thanks!
       
    • By DesignLab360
      Hello,
      Can you give me a feedback? I designed a responsive one-page business  template with Elementor Pro. Elementor is a page builder.
      Please be honest. Link: http://themelab.cloudaccess.host/
      I want to boost my portfolio.
      Thanks
    • By Maksym Hryniv
      Hello creators, I'm Max - developer of Mokup cross-platform interactive prototyping tool.
      It's similar in functionality to Principle or Flinto, but it approaches some aspect of prototyping differently.
      Right now it's available for Windows and Mac, Android and iOS players are comming very soon.
      It's free to use while in beta. Please grab it here http://mokup.me/download/ I'm happy to hear your feedback.

    • By DonkeyWorx
      Is using srcset the best way to deliver mobile-specific images or is it better to use plain css to show and hide specific images in a responsive design?
      TIA
      Paul
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,313
    • Most Online
      4,970

    Newest Member
    conorrsl85
    Joined
  • Forum Statistics

    • Total Topics
      65,997
    • Total Posts
      454,483
×