23:10
Unknown
The usual process, honed over many a year, is the following:
As soon as the wireframes have been signed off and the design phase starts, the next step for the web designer is to power up Photoshop. In a fixed width design, there will be only one layout. The problem is, what happens for a responsive website? You can't possibly provide mockups that show the result in every screen size.
Much of the time, producing a static Photoshop mockup can seem as if it's provided to the client merely as proof that you've done some work. It demonstrates nothing of interactive features, and the designer cannot give a good idea of how the rest of the website presents itself; there may be a number of different subsections with subtely different layouts, such as blogs and news sections.
Taking the 320 and up approach to designing in the browser focuses the attention no end. It allows you to concentrate on just the specifics of a particular device type. There's no worrying about squashing that big desktop display down into that hideous Blackberry. At the end of the day, you grow the site as the viewports get bigger, which is a dam sight easier than trying to shrink and hide everything.
This approach comes with a host of benefits:
As soon as the wireframes have been signed off and the design phase starts, the next step for the web designer is to power up Photoshop. In a fixed width design, there will be only one layout. The problem is, what happens for a responsive website? You can't possibly provide mockups that show the result in every screen size.
Much of the time, producing a static Photoshop mockup can seem as if it's provided to the client merely as proof that you've done some work. It demonstrates nothing of interactive features, and the designer cannot give a good idea of how the rest of the website presents itself; there may be a number of different subsections with subtely different layouts, such as blogs and news sections.
Take a break from Photoshop and design in the browser
Why not take a break from Photoshop? Design in the browser instead. Jump straight into your code editor of choice and start blocking out content and layout, based on the wireframes you produced beforehand. Consider taking the 320 and up approach to put the mobile aspects first; this keeps the code mean and lean, with no mobile unfriendly images to load up (display:none = load me up then hide me).Taking the 320 and up approach to designing in the browser focuses the attention no end. It allows you to concentrate on just the specifics of a particular device type. There's no worrying about squashing that big desktop display down into that hideous Blackberry. At the end of the day, you grow the site as the viewports get bigger, which is a dam sight easier than trying to shrink and hide everything.
Designing in the browser is faster
All that time you'd normally spend within Photoshop, particularly fighting against its awful text formatting, might as well be spent by assembling code. This isn't to say you have to boot Photoshop out of the door altogether; but get all the content elements on the page before you start applying images.This approach comes with a host of benefits:
- Rather than a static image, the client is presented with a moving, fluid website. Much more impressive!
- Content becomes king - rather than the content being built around the image.
- Use CSS3 techniques to recreate the effect that you'd normally attain with images. Box shadow is your friend.
Planning is essential
Designing in the browser only really works if you've done the groundwork beforehand. You must have at least rough sketches to work from, as random coding to test different layouts will eat up all the time you saved by ditching Photoshop.Summary
Designing in the browser focuses the attention on the single most important aspect of any website, the content. Placing the content first stops you making concessions to visual aspects and at the same time makes for a faster development process.
Posted in: Web Design
0 comments:
Post a Comment