WEBSITE

Web Design: Where To Start (Part 4)

11/17/2012 3:06:55 PM

Coding. It’s the word that deters many a journalist, designer or business owner from even attempting ‘proper’ web design. Programming, as we used to call it, is, after all, a highly skilled specialism; surely no good can come of trying to wing it?

Perhaps not, but the counter-argument is that without learning how languages like HTML and CSS work, not only will you be unable to tweak code that you acquire from templates, themes and the output of visual web design apps, but you’ll be unable to understand why some things work and others don’t; how to anticipate and fix the glitches that will certainly arise when you send out your design into the big world of real users with their messy array of devices, browsers and behaviors; and, more fundamentally, what kind of thing is going to be a good idea to attempt and what isn’t.

Description: HTML & CSS: Design and Build Websites

HTML & CSS: Design and Build Websites

May be you can get a site built without ever working on the underlying code – ‘but in doing that,’ argues Kirby, ‘you don’t understand the limitations imposed by the medium.’ ‘Being able to code makes you a better web designer,’ says Stocks, ‘especially given that designing responsively is [excessively] laborious in a static design tool such as Photoshop.’ Like Boulton, Stocks advises that you should move to the browser fairly early in the process, and doing so is only really possible if you can write your own code.

‘Ultimately, what you’re making is a website, not a picture of a website. So static mock-ups are becoming irrelevant.’

Woods is less convinced by the coding argument, however. ‘Learning code is hugely beneficial, but I think that’s more from a theoretical than a practical perspective. I know a lot of print designers that are reluctant to step into digital design because they are terrified of code, and that’s a shame because you don’t need to be able to code to be a digital designer. What’s important is you at least understand the possibilities and limitations of HTML and CSS. Being able to do it yourself is not entirely necessary.’

Of course, the extent to which you need to do it yourself will depend in practice on how you’re working and who with.

A designer/coder split is still very common in web development teams, even if it would be unusual to have no crossover at all. If you can find someone to handle the technical side while you focus on look and feel and content, you may be able to discuss the practicalities in layman’s terms, taking their simplified advice on what will and won’t work, and leave the detail to your co-worker.

Equally, although we’ve focused here on creative pros moving to the web, if you’re from a technical background and relish the prospect of mastering code and wrangling content but don’t feel so confident about the visual and interaction design, by all means pick yourself up a designer. Try hanging around the MacUser shelf in your local news agent, looking geeky.

But Coady, a designer by training, thinks anyone working on the web who isn’t willing to immerse themselves in code is probably doing it wrong. ‘It’s not like HTML and CSS is the same as learning a programming language like PHP. It’s simply a way of semantically describing the structure of a site. Learning how to render your designs in the browser will make you a better designer and enable you to communicate with other web developers when you collaborate on more complicated projects.’

Description: Anyone working on the web who isn’t willing to immerse themselves in code is probably doing it wrong

Anyone working on the web who isn’t willing to immerse themselves in code is probably doing it wrong

And for Boulton, coding is simply part of the territory – much like an understanding of presses, separations, dot gain and overprints was required for old media. ‘It’s important for a designer to understand the material they’re working with,’ he says. ‘The technical aspects aren’t always glamorous, but HTML is not difficult. It’s not programming, nor [in the programming sense] ‘coding’ – it’s just a language used to mark up content. As such, it’s actually not much different from type setting.’

Before DTP, Boulton explains, a compositor would receive a manuscript with squiggles on it from the designer to tell them what font to use where, and would then create the printed content according to those instructions. ‘Writing HTML is not much different – telling content how it should display,’ he concludes. ‘So it’s not programming, it’s content-setting. And as such, it’s part of the designer’s job.’

 

Other  
  •  The Download Directory - October 2012 (Part 2)
  •  The Download Directory - October 2012 (Part 1) - KeyboardLock 1.2.4295, Skip Metro Suite 1.0.0
  •  Plug-in Of the Month - November 2012 : Audacity for Windows 2.0.2 RC4, Firefox 15 Beta 5, Comment Blocker
  •  CodeKit Vs LiveReload
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 7) - Temporal Link Growth Measurements
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 6) - Web Traffic Comparison
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 5) - Tracking the Blogosphere, Search Engine Robot Traffic Analysis
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 4) - Rankings, Crawl Errors
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 3) - Measuring the value of a link
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 2) - Search-engine-supplied tools, Third-party link-measuring tools
  •  
    Top 10
    Review : Sigma 24mm f/1.4 DG HSM Art
    Review : Canon EF11-24mm f/4L USM
    Review : Creative Sound Blaster Roar 2
    Review : Philips Fidelio M2L
    Review : Alienware 17 - Dell's Alienware laptops
    Review Smartwatch : Wellograph
    Review : Xiaomi Redmi 2
    Extending LINQ to Objects : Writing a Single Element Operator (part 2) - Building the RandomElement Operator
    Extending LINQ to Objects : Writing a Single Element Operator (part 1) - Building Our Own Last Operator
    3 Tips for Maintaining Your Cell Phone Battery (part 2) - Discharge Smart, Use Smart
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    VIDEO TUTORIAL
    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
    Popular Tags
    Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8