{"rowid": 190, "title": "Self-Testing Pages with JavaScript", "contents": "Working at an agency I am involved more and more on projects in which client side code is developed internally then sent out to a separate team for implementation. You provide static HTML, CSS and JavaScript which then get placed into the CMS and brought to life as an actual website. As you can imagine this can sometimes lead to frustrations. However many safeguards you include, handing over your code to someone else is always a difficult thing to do effectively.\n\nIn this article I will show you how you can create a JavaScript implementation checker and that will give you more time for drink based activity as your web site and apps are launched quicker and with less unwanted drama!\n\nAn all too frequent occurrence\n\nYou\u2019ve been working on a project for weeks, fixed all your bugs and send it to be implemented. You hear nothing and assume all is going well then a few days before it\u2019s meant to launch you get an email from the implementation team informing you of bugs in your code that you need to urgently fix.\n\n The 24ways website with a misspelt ID for the years menu\n\nBeing paranoid you trawl through the preview URL, check they have the latest files, check your code for errors then notice that a required HTML attribute has been omitted from the build and therefore CSS or JavaScript you\u2019ve hooked onto that particular attribute isn\u2019t being applied and that\u2019s what is causing the \u201cbug\u201d.\n\nIt takes you seconds drafting an email informing them of this, it takes then seconds putting the required attribute in and low and behold the bug is fixed, everyone is happy but you\u2019ve lost a good few hours of your life \u2013 this time could have been better spent in the pub.\n\nI\u2019m going to show you a way that these kind of errors can be alerted immediately during implementation of your code and ensure that when you are contacted you know that there actually is a bug to fix. You probably already know the things that could be omitted from a build and look like bugs so you\u2019ll soon be creating tests to look for these and alert when they are not found on the rendered page. The error is reported directly to those who need to know about it and fix it. Less errant bug reports and less frantic emails ahoy!\n\n A page with an implementation issue and instant feedback on the problem\n\nJavaScript selector engines to the rescue\n\nWhether you\u2019re using a library or indeed tapping into the loveliness of the new JavaScript Selector APIs looking for particular HTML elements in JavaScript is fairly trivial now. \n\nFor instance this is how you look for a div element with the id attribute of year (the missing attribute from top image) using jQuery (the library I\u2019ll be coding my examples in): \n\nif ($(\u2018div#year\u2019).length) {\n\talert(\u2018win\u2019);\n}\n\nUsing this logic you can probably imagine how you can write up a quick method to check for the existence of a particular element and alert when it\u2019s not present \u2014 but assuming you have a complex page you\u2019re going to be repeating yourself a fair bit and we don\u2019t want to be doing that.\n\nTest scripts\n\nIf you\u2019ve got a lot of complex HTML patterns that need testing across a number of different pages it makes sense to keep your tests out of production code. Chances are you\u2019ve already got a load of heavy JavaScript assets, and when it comes to file size saving every little helps.\n\nI don\u2019t think that tests should contain code inside of them so keep mine externally as JSON. This also means that you can use the one set of tests in multiple places. We already know that it\u2019s a good idea to keep our CSS and JavaScript separate so lets continue along those lines here.\n\nThe test script for this example looks like this:\n\n{\n\t\"title\": \"JS tabs implementation test\",\n\t\"description\": \"Check that the correct HTML patterns has been used\",\n\t\"author\": \"Ross Bruniges\",\n\t\"created\": \"20th July 2009\",\n\t\"tests\": [\n\t\t{\n\t\t\t\"name\": \"JS tabs elements\",\n\t\t\t\"description\": \"Checking that correct HTML elements including class/IDs are used on the page for the JS to progressively enhance\",\n\t\t\t\"selector\": \"div.tabbed_content\",\n\t\t\t\"message\": \"We couldn't find VAR on the page - it's required for our JavaScript to function correctly\",\n\t\t\t\"check_for\": {\n\t\t\t\t\"contains\": {\n\t\t\t\t\t\"elements\": [\n\t\t\t\t\t\t\"div.tab_content\", \"h2\" \n\t\t\t\t\t],\n\t\t\t\t\t\"message\": \"We've noticed some missing HTML:

please refer to the examples sent for reference\" \n\t\t\t\t} \n\t\t\t} \n\t\t} \n\t]\n}\n\nThe first four lines are just a little bit of meta data so we remember what this test was all about when we look at it again in the future, or indeed if it ever breaks. The tests are the really cool parts and firstly you\u2019ll notice that it\u2019s an array \u2013 we\u2019re only going to show one example test here but there is no reason why you can\u2019t place in as many as you want. I\u2019ll explain what each of the lines in the example test means:\n\n\n\tname \u2013 short test name, I use this in pass/fail messaging later\n\tdescription \u2013 meta data for future reference\n\tselector \u2013 the root HTML element from which your HTML will be searched\n\tmessage \u2013 what the app will alert if the initial selector isn\u2019t found\n\tcheck_for \u2013 a wrapper to hold inner tests \u2013 those run if the initial selector does match\n\t\n\t\tcontains \u2013 the type of check, we\u2019re checking that the selector contains specified elements\n\t\t\n\t\t\telements \u2013 the HTML elements we are searching for\n\t\t\tmessage \u2013 a message for when these don\u2019t match (VAR is substituted when it\u2019s appended to the page with the name of any elements that don\u2019t exist)\n\t\t\n\t\t\n\t\t\n\nIt\u2019s very important to pass the function valid JSON (JSONLint is a great tool for this) otherwise you might get a console showing no tests have even been run. \n\nThe JavaScript that makes this helpful\n\nAgain, this code should never hit a production server so I\u2019ve kept it external. This also means that the only thing that\u2019s needed to be done by the implementation team when they are ready to build is that they delete this code.\n\n\n\n\n\u201cView the full JavaScript:/examples/self-testing-pages-with-javascript/js/tests/test_suite.js\n\nThe init function appends the test console to the page and inserts the CSS file required to style it (you don\u2019t need to use pictures of me when tests pass and fail though I see no reason why you shouldn\u2019t), goes and grabs the JSON file referenced and parses it. The methods to pass (tests_pass) and fail (haz_fail) the test I hope are pretty self-explanatory as is the one which creates the test summary once everything has been run (create_summary).\n\nThe two interesting functions are init_tests and confirm_html.\n\ninit_tests\n\ninit_tests:function(i,obj) {\n\tvar $master_elm = $(obj.selector);\n\tsleuth.test_page.$logger.append(\"

\" + obj.name + \"

\");\n\tvar $container = $('#test_' + i);\n\tif (!$master_elm.length) {\n\t\tvar err_sum = obj.message.replace(/VAR/gi, obj.selector);\n\t\tsleuth.test_page.haz_failed(err_sum, $container);\n\t\treturn;\n\t}\n\tif (obj.check_for) {\n\t\t$.each(obj.check_for,function(key, value){\n\t\t\tsleuth.test_page.assign_checks($master_elm, $container, key, value);\n\t\t});\n\t} else {\n\t\tsleuth.test_page.tests_passed($container);\n\t\treturn;\n\t}\n}\n\nThe function gets sent the number of the current iteration (used to create a unique id for its test summary) and the current object that contains the data we\u2019re testing against as parameters.\n\nWe grab a reference to the root element and this is used (pretty much in the example shown right at the start of this article) and its length is checked. If the length is positive we know we can continue to the inner tests (if they exist) but if not we fail the test and don\u2019t go any further. We append the error to the test console for everyone to see.\n\nIf we pass the initial check we send the reference to the root element, message contains and the inner object to a function that in this example sends us on to confirm_html (if we had a more complex test suite it would do a lot more). \n\nconfirm_html\n\nconfirm_html:function(target_selector, error_elm, obj) {\n\tvar missing_elms = [];\n\t$.each(obj.elements, function(i, val) {\n\t\tif (!target_selector.find(val).length) {\n\t\t\tmissing_elms.push(val);\n\t\t}\t\n\t});\n\tif (missing_elms.length) {\n\t\tvar file_list = missing_elms.join('
  • ');\n\t\tvar err_sum = obj.message.replace(/VAR/gi, file_list);\n\t\tsleuth.test_page.haz_failed(err_sum, error_elm);\n\t\treturn;\n\t}\n\tsleuth.test_page.tests_passed(error_elm);\n\treturn;\n}\n\nWe\u2019re again using an array to check for a passed or failed test and checking its length but this time we push in a reference to each missing element we find.\n\nIf the test does fail we\u2019re providing even more useful feedback by informing what elements have been missed out. All the implementation team need do is look for them in the files we\u2019ve sent and include them as expected.\n\nNo more silly implementation bugs!\n\nHere is an example of a successful implementation.\n\nHere are some examples of failed implementations \u2013 one which fails at finding the root node and one that has the correct root node but none of the inner HTML tests pass.\n\nIs this all we can check for?\n\nCertainly not!\n\nJavaScript provides pretty easy ways to check for attributes, included files (if the files being checked for are being referenced correctly and not 404ing) and even applied CSS.\n\nWant to check that those ARIA attributes are being implemented correctly or that all images contain an alt attribute well this simple test suite can be extended to include tests for this \u2013 the sky is pretty much up to your imagination.", "year": "2009", "author": "Ross Bruniges", "author_slug": "rossbruniges", "published": "2009-12-12T00:00:00+00:00", "url": "https://24ways.org/2009/self-testing-pages-with-javascript/", "topic": "process"} {"rowid": 181, "title": "Working With RGBA Colour", "contents": "When Tim and I were discussing the redesign of this site last year, one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn\u2019t built with PNGs. Instead we\u2019d used RGBA colour values, which is part of the CSS3 specification.\n\nWhat is RGBA Colour?\n\nWe\u2019re all familiar with specifying colours in CSS using by defining the mix of red, green and blue light required to achieve our tone. This is fine and dandy, but whatever values we specify have one thing in common \u2014 the colours are all solid, flat, and well, a bit boring.\n\n Flat RGB colours\n\nCSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what\u2019s behind the colour shows through. Like with layers in Photoshop.\n\nDon\u2019t We Have Opacity Already?\n\nThe ability to set the opacity on a colour differs subtly from setting the opacity on an element using the CSS opacity property. Let\u2019s look at an example.\n\nHere we have an H1 with foreground and background colours set against a page with a patterned background.\n\n Heading with no transparency applied\n\nh1 {\n\tcolor: rgb(0, 0, 0);\n\tbackground-color: rgb(255, 255, 255);\n}\n\nBy setting the CSS opacity property, we can adjust the transparency of the entire element and its contents:\n\n Heading with 50% opacity on the element\n\nh1 {\n\tcolor: rgb(0, 0, 0);\n\tbackground-color: rgb(255, 255, 255);\n\topacity: 0.5;\n}\n\nRGBA colour gives us something different \u2013 the ability to control the opacity of the individual colours rather than the entire element. So we can set the opacity on just the background:\n\n 50% opacity on just the background colour\n\nh1 {\n\tcolor: rgb(0, 0, 0);\n\tbackground-color: rgba(255, 255, 255, 0.5);\n}\n\nOr leave the background solid and change the opacity on just the text:\n\n 50% opacity on just the foreground colour\n\nh1 {\n\tcolor: rgba(0, 0, 0, 0.5);\n\tbackground-color: rgb(255, 255, 255);\n}\n\nThe How-To\n\nYou\u2019ll notice that above I\u2019ve been using the rgb() syntax for specifying colours. This is a bit less common than the usual hex codes (like #FFF) but it makes sense when starting to use RGBA. As there\u2019s no way to specify opacity with hex codes, we use rgba() like so:\n\ncolor: rgba(255, 255, 255, 0.5);\n\nJust like rgb() the first three values are red, green and blue. You can specify these 0-255 or 0%-100%. The fourth value is the opacity level from 0 (completely transparent) to 1 (completely opaque).\n\nYou can use this anywhere you\u2019d normally set a colour in CSS \u2014 so it\u2019s good for foregrounds and background, borders, outlines and so on. All the transparency effects on this site\u2019s current design are achieved this way.\n\nSupporting All Browsers\n\nLike a lot of the features we\u2019ll be looking at in this year\u2019s 24 ways, RGBA colour is supported by a lot of the newest browsers, but not the rest. Firefox, Safari, Chrome and Opera browsers all support RGBA, but Internet Explorer does not.\n\nFortunately, due to the robust design of CSS as a language, we can specify RGBA colours for browsers that support it and an alternative for browsers that do not.\n\nFalling back to solid colour\n\nThe simplest technique is to allow the browser to fall back to using a solid colour when opacity isn\u2019t available. The CSS parsing rules specify that any unrecognised value should be ignored. We can make use of this because a browser without RGBA support will treat a colour value specified with rgba() as unrecognised and discard it.\n\nSo if we specify the colour first using rgb() for all browsers, we can then overwrite it with an rgba() colour for browsers that understand RGBA.\n\nh1 {\n\tcolor: rgb(127, 127, 127);\n\tcolor: rgba(0, 0, 0, 0.5);\n}\n\nFalling back to a PNG\n\nIn cases where you\u2019re using transparency on a background-color (although not on borders or text) it\u2019s possible to fall back to using a PNG with alpha channel to get the same effect. This is less flexible than using CSS as you\u2019ll need to create a new PNG for each level of transparency required, but it can be a useful solution.\n\nUsing the same principal as before, we can specify the background in a style that all browsers will understand, and then overwrite it in a way that browsers without RGBA support will ignore.\n\nh1 {\n\tbackground: transparent url(black50.png);\n\tbackground: rgba(0, 0, 0, 0.5) none;\n}\n\nIt\u2019s important to note that this works because we\u2019re using the background shorthand property, enabling us to set both the background colour and background image in a single declaration. It\u2019s this that enables us to rely on the browser ignoring the second declaration when it encounters the unknown rgba() value.\n\nNext Steps\n\nThe really great thing about RGBA colour is that it gives us the ability to create far more graphically rich designs without the need to use images. Not only does that make for faster and lighter pages, but sites which are easier and quicker to build and maintain. CSS values can also be changed in response to user interaction or even manipulated with JavaScript in a way that\u2019s just not so easy using images.\n\n Opacity can be changed on :hover or manipulated with JavaScript\n\ndiv {\n\tcolor: rgba(255, 255, 255, 0.8);\n\tbackground-color: rgba(142, 213, 87, 0.3);\n}\ndiv:hover {\n\tcolor: rgba(255, 255, 255, 1);\n\tbackground-color: rgba(142, 213, 87, 0.6);\n}\n\nClever use of transparency in border colours can help ease the transition between overlay items and the page behind.\n\n Borders can receive the RGBA treatment, too\n\ndiv {\n\tcolor: rgb(0, 0, 0);\n\tbackground-color: rgb(255, 255, 255);\n\tborder: 10px solid rgba(255, 255, 255, 0.3);\n}\n\nIn Conclusion\n\n\nThat\u2019s a brief insight into RGBA colour, what it\u2019s good for and how it can be used whilst providing support for older browsers. With the current lack of support in Internet Explorer, it\u2019s probably not a technique that commercial designs will want to heavily rely on right away \u2013 simply because of the overhead of needing to think about fallback all the time. \n\nIt is, however, a useful tool to have for those smaller, less critical touches that can really help to finesse a design. As browser support becomes more mainstream, you\u2019ll already be familiar and practised with RGBA and ready to go.", "year": "2009", "author": "Drew McLellan", "author_slug": "drewmclellan", "published": "2009-12-01T00:00:00+00:00", "url": "https://24ways.org/2009/working-with-rgba-colour/", "topic": "code"} {"rowid": 176, "title": "What makes a website successful? It might not be what you expect!", "contents": "What makes some sites succeed and others fail? Put another way, when you are asked to redesign an existing website, what problems are you looking out for and where do you concentrate your efforts?\n\nI would argue that as web designers we spend too much time looking at the wrong kind of problem.\n\nI recently ran a free open door consultancy clinic to celebrate the launch of my new book (yes I know, two shameless plugs in one sentence). This involved various website owners volunteering their sites for review. Both myself and the audience then provided feedback.\n\nWhat quickly became apparent is that the feedback being given by the audience was biased towards design and development.\n\nAlthough their comments were excellent it focused almost exclusively on the quality of code, site aesthetics and usability. To address these issues in isolation is similar to treating symptoms and ignoring the underlying illness.\n\nCure the illness not the symptoms\n\nPoor design, bad usability and terribly written code are symptoms of bigger problems. Often when we endeavour to address these symptoms, we meet resistance from our clients and become frustrated. This is because our clients are still struggling with fundamental concepts we take for granted.\n\nBefore we can address issues of aesthetics, usability and code, we need to tackle business objectives, calls to action and user tasks. Without dealing with these fundamental principles our clients\u2019 website will fail.\n\nLet me address each in turn:\n\nUnderstand the business objectives\n\nDo you ask your clients why they have a website? It feels like an obvious question. However, it is surprising how many clients do not have an answer.\n\nWithout having a clear idea of the site\u02bcs business objectives, the client has no way to know whether it is succeeding. This means they have no justification for further investment and that leads to quibbling over every penny.\n\nHowever most importantly, without clearly defined business aims they have no standard against which to base their decisions. Everything becomes subjective and that will inevitably lead to problems.\n\nBefore we start discussing design, usability and development, we need to focus our clients on establishing concrete business objectives. This will provide a framework for decision making during the development phase.\n\nThis will not only help the client make decisions, it will also focus them on the business and away from micro managing the design.\n\nEstablish clear calls to action\n\nOnce business objectives have been set this opens up the possibility to establish clear calls to action.\n\nI am amazed at how few website owners can name their calls to action. However, I am even more staggered at how few web designers ask about them.\n\nCalls to action are not just limited to ecommerce sites. Whether you are asking people to sign up for a newsletter or complete a contact us form, every site should have a desired objective for users.\n\nWhat is more, each page of a site should have micro calls to action that always draw users on and never leave them at a dead end.\n\nWithout clearly defined calls to action you cannot successfully design a site, structure the user experience or measure its success. They bring focus to the site and encourage the client to concentrate their efforts on helping people reach those goals.\n\nOf course in order to know if a call to action is going to work, it is necessary to do some user testing.\n\nTest against the right tasks\n\nAs web designers we all like to boast about being \u02bbuser centric\u02bc whatever that means! However, in reality I think many of us are paying lip service to the subject.\n\nSure, we ask our clients about who their users are and maybe even do some usability testing. However, usability testing is no good if we are not asking the right questions.\n\nAgain we find ourselves working on a superficial level rather than tackling the deeper issues.\n\nClients find it relatively easy to tell you who their target audience is. Admittedly the list they come back with is often overly long and contains a lot of edge cases. However, where they begin to struggle is articulating what these users will want to achieve on the website. They know who they want to reach. However, they cannot always tell you why those people would be interested in the site.\n\nThese user tasks are another fundamental building block for any successful website. Although it is important for a website owner to understand what their objectives are and what they want users to do, it is even more important that they understand the users objectives as well.\n\nAgain, this provides context for the decisions they are making about design, usability and functionality. Without it the site will become self serving, largely ignoring the needs of users.\n\nUser tasks help to focus the client\u02bcs mind on the needs of their user, rather than what they can get out of them.\n\nSo am I claiming that design, usability and code do not matter? Well the shocking truth is that to some extent I am!\n\nThe shocking truth\n\nWhether we like it or not there is significant evidence that you can create a successful website with bad design, terrible code and without ever running a usability test session.\n\nYou only need to look at the design of Craigslist or the code of Amazon to see that this is true.\n\nHowever, I do not believe it is possible to build a successful website without business objectives, calls to action and a clear idea of user tasks.\n\nDo not misunderstand me. I do believe design, usability and code matters. I just believe that they only matter if the fundamentals are already in place. These things improve a solid foundation but are no use in their own right.\n\nAs web designers it is our responsibility to ensure fundamental questions are being asked, before we start exploring other issues. If we do not, our websites will look great, be well coded and have gone through endless usability tests, however it will not be truly successful.", "year": "2009", "author": "Paul Boag", "author_slug": "paulboag", "published": "2009-12-04T00:00:00+00:00", "url": "https://24ways.org/2009/what-makes-a-website-successful/", "topic": "business"} {"rowid": 185, "title": "Make Your Mockup in Markup", "contents": "We aren\u2019t designing copies of web pages, we\u2019re designing web pages.\n\n\t Andy Clarke, via Quotes on Design\n\n\nThe old way\n\nI used to think the best place to design a website was in an image editor. I\u2019d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup.\n\nDoes this process sound familiar? You\u2019re not alone. In a very scientific and official survey I conducted, close to 90% of respondents said they design in Photoshop before the browser. \n\nThat process is whack, yo!\n\nRecently, thanks in large part to the influence of design hero Dan Cederholm, I\u2019ve come to the conclusion that a website\u2019s design should begin where it\u2019s going to live: in the browser.\n\nDie Photoshop, die\n\nSome of you may be wondering, \u201cwhat\u2019s so bad about using Photoshop for the bulk of my design?\u201d Well, any seasoned designer will tell you that working in Photoshop is akin to working in a minefield: you never know when it\u2019s going to blow up in your face.\n\n The application Adobe Photoshop CS4 has unexpectedly ruined your day.\n\nPhotoshop\u2019s propensity to crash at crucial moments is a running joke in the industry, as is its barely usable interface. And don\u2019t even get me started on the hot, steaming pile of crap that is text rendering.\n\n Text rendered in Photoshop (left) versus Safari (right).\n\nCrashing and text rendering issues suck, but we\u2019ve learned to live with them. The real issue with using Photoshop for mockups is the expectations you\u2019re setting for a client. When you send the client a static image of the design, you\u2019re not giving them the whole picture \u2014 they can\u2019t see how a fluid grid would function, how the design will look in a variety of browsers, basic interactions like :hover effects, or JavaScript behaviors. For more on the disadvantages to showing clients designs as images rather than websites, check out Andy Clarke\u2019s Time to stop showing clients static design visuals.\n\nA necessary evil?\n\nIn the past we\u2019ve put up with Photoshop because it was vital to achieving our beloved rounded corners, drop shadows, outer glows, and gradients. However, with the recent adaptation of CSS3 in major browsers, and the slow, joyous death of IE6, browsers can render mockups that are just as beautiful as those created in an image editor. With the power of RGBA, text-shadow, box-shadow, border-radius, transparent PNGs, and @font-face combined, you can create a prototype that radiates shiny awesomeness right in the browser. If you can see this epic article through to the end, I\u2019ll show you step by step how to create a gorgeous mockup using mostly markup.\n\nGet started by getting naked \n\n\n\tContent precedes design. Design in the absence of content is not design, it\u2019s decoration.\n\n\t Jeffrey Zeldman\n\n\nIn the beginning, don\u2019t even think about style. Instead, start with the foundation: the content. Lay the groundwork for your markup order, and ensure that your design will be useable with styles and images turned off. This is great for prioritizing the content, and puts you on the right path for accessibility and search engine optimization. Not a bad place to start, amirite?\n\n An example of unstyled content, in all its naked glory. View it large.\n\nFlush out the layout \n\nThe next step is to structure the content in a usable way. With CSS, making basic layout changes is as easy as switching up a float, so experiment to see what structure suits the content best.\n\n The mockup with basic layout work done.\n\nGot your grids covered\n\nThere are a variety of tools that allow you to layer a grid over your browser window. For Mac users I recommend using Slammer, and PC users can check out one of the bookmarklets that are available, such as 960 Gridder.\n\n The mockup with a grid applied using Slammer.\n\nOnce you\u2019ve found a layout that works well for the content, pass it along to the client for review. This keeps them involved in the design process, and gives them an idea of how the site will be structured when it\u2019s live.\n\nStart your styling\n\nNow for the fun part: begin applying the presentation layer. Let usability considerations drive your decisions about color and typography; use highlighted colors and contrasting typefaces on elements you wish to emphasize.\n\nRGBA? More like RGByay!\n\nIntroducing color is easy with RGBA. I like to start with the page\u2019s main color, then use white at varying opacities to empasize content sections.\n\n In the example mockup the body background is set to rgba(203,111,21), the content containers are set to rgba(255,255,255,0.7), and a few elements are highlighted with rgba(255,255,255,0.1) If you\u2019re not sure how RGBA works, check out Drew McLellan\u2019s super helpful 24ways article.\n\nLaying down type\n\nJust like with color, you can use typography to evoke a feeling and direct a user\u2019s attention. Have contrasting typefaces (like serif headlines and sans-serif body text) to group the content into meaningful sections.\n\nIn a recent A List Apart article, the Master of Web Typography\u2122 Jason Santa Maria offers excellent advice on how to choose your typefaces:\n\n\n\tWrite down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.\n\n\nSounds pretty straightforward. I wanted to give my design a classic feel with a hint of nostalgia, so I used Georgia for the headlines, and incorporated the ornate ampersand from Baskerville into the header.\n\n A closeup on the site\u2019s header.\n\nLet\u2019s get sexy\n\nThe design doesn\u2019t look too bad as it is, but it\u2019s still pretty flat. We can do better, and after mixing in some CSS3 and a couple of PNGs, it\u2019s going to get downright steamy in here.\n\nGive it some glow\n\nObjects in the natural world reflect light, so to make your design feel tangible and organic, give it some glow. In the example design I achieved this by creating two white to transparent gradients of varying opacities. Both have a solid white border across their top, which gives edges a double border effect and makes them look sharper. Using CSS3\u2019s text-shadow on headlines and box-shadow on content modules is another quick way to add depth.\n\n A wide and closeup view of the design with gradients, text-shadow and box-shadow added. For information on how to implement text-shadow and box-shadow using RGBA, check out the article I wrote on it last week.\n\n\n37 pieces of flair\n\nOkay, maybe you don\u2019t need that much flair, but it couldn\u2019t hurt to add a little; it\u2019s the details that will set your design apart. Work in imagery and texture, using PNGs with an alpha channel so you can layer images and still tweak the color later on.\n\n The design with grungy textures, a noisy diagonal stripe pattern, and some old transportation images layered behind the text. Because the colors are rendered using RGBA, these images bleed through the content, giving the design a layered feel. Best viewed large.\n\n\nSend it off\n\nHey, look at that. You\u2019ve got a detailed, well structured mockup for the client to review. Best of all, your markup is complete too. If the client approves the design at this stage, your template is practically finished. Bust out the party hats!\n\nNot so fast, Buster!\n\nSo I don\u2019t know about you, but I\u2019ve never gotten a design past the client\u2019s keen eye for criticism on the first go. Let\u2019s review some hypothetical feedback (none of which is too outlandish, in my experience), and see how we\u2019d make the requested changes in the browser. \n\nUpdating the typography\n\n\n\tMy ex-girlfriend loved Georgia, so I never want to see it again. Can we get rid of it? I want to use a font that\u2019s chunky and loud, just like my stupid ex-girlfriend.\n\n\t Fakey McClient\n\n\nYikes! Thankfully with CSS, removing Georgia is as easy as running a find and replace on the stylesheet. In my revised mockup, I used @font-face and League Gothic on the headlines to give the typography the, um, unique feel the client is looking for.\n\n The same mockup, using @font-face on the headlines. If you\u2019re unfamiliar with implementing @font-face, check out Nice Web Type\u2018s helpful article.\n\nAdding rounded corners\n\n\n\tI\u2019m not sure if I\u2019ll like it, but I want to see what it\u2019d look like with rounded corners. My cousin, a Web 2.0 marketing guru, says they\u2019re trendy right now.\n\n\t Fakey McClient\n\n\nSwitching to rounded corners is a nightmare if you\u2019re doing your mockup in Photoshop, since it means recreating most of the shapes and UI elements in the design. Thankfully, with CSS border-radius comes to our rescue! By applying this gem of a style to a handful of classes, you\u2019ll be rounded out in no time.\n\n The mockup with rounded corners, created using border-radius. If you\u2019re not sure how to implement border-radius, check out CSS3.info\u2018s quick how-to.\n\nMaking changes to the color\n\n\n\tThe design is too dark, it\u2019s depressing! They call it \u2018the blues\u2019 for a reason, dummy. Can you try using a brighter color? I want orange, like Zeldman uses.\n\n\t Fakey McClient\n\n\nMaking color changes is another groan-inducing task when working in Photoshop. Finding and updating every background layer, every drop shadow, and every link can take forever in a complex PSD. However, if you\u2019ve done your mockup in markup with RGBA and semi-transparent PNGs, making changes to your color is as easy as updating the body background and a few font colors.\n\n The mockup with an orange color scheme. Best viewed large.\n\nAhem, what about Internet Explorer?\n\nGee, thanks for reminding me, buzzkill. Several of the CSS features I\u2019ve suggested you use, such as RGBA, text-shadow and box-shadow, and border-radius, are not supported in Internet Explorer. I know, it makes me sad too. However, this doesn\u2019t mean you can\u2019t try these techniques out in your markup based mockups. The point here is to get your mockups done as efficiently as possible, and to keep the emphasis on markup from the very beginning.\n\nOnce the design is approved, you and the client have to decide if you can live with the design looking different in different browsers. Is it so bad if some users get to see drop shadows and some don\u2019t? Or if the rounded corners are missing for a portion of your audience? The design won\u2019t be broken for IE people, they\u2019re just missing out on a few visual treats that other users will see.\n\nThe idea of rewarding users who choose modern browsers is not a new concept; Dan covers it thoroughly in Handcrafted CSS, and it\u2019s been written about in the past by Aaron Gustafson and Andy Clarke on several occasions. I believe we shouldn\u2019t have to design for the lowest common denominator (cough, IE6 users, cough); instead we should create designs that are beautiful in modern browsers, but still degrade nicely for the other guy. However, some clients just aren\u2019t that progressive, and in that case you can always use background images for drop shadows and rounded corners, as you have in the past. \n\nClosing thoughts\n\nWith the advent of CSS3, browsers are just as capable of giving us beautiful, detailed mockups as Photoshop, and in half the time. I\u2019m not the only one to make an argument for this revised process; in his article Time to stop showing clients static design visuals, and in his presentation Walls Come Tumbling Down, Andy Clarke makes a fantastic case for creating your mockups in markup.\n\nSo I guess my challenge to you for 2010 is to get out of Photoshop and into the code. Even if the arguments for designing in the browser aren\u2019t enough to make you change your process permanently, it\u2019s worthwhile to give it a try. Look at the New Year as a time to experiment; applying constraints and evaluating old processes can do wonders for improving your efficiency and creativity.", "year": "2009", "author": "Meagan Fisher", "author_slug": "meaganfisher", "published": "2009-12-24T00:00:00+00:00", "url": "https://24ways.org/2009/make-your-mockup-in-markup/", "topic": "process"} {"rowid": 189, "title": "Ignorance Is Bliss", "contents": "This is a true story.\n\nMeet Mike \n\nMike\u2019s a smart guy. He knows a great browser when he sees one. He uses Firefox on his Windows PC at work and Safari on his Mac at home. Mike asked us to design a Web site for his business. So we did.\n\nWe wanted to make the best Web site for Mike that we could, so we used all of the CSS tools that are available today. That meant using RGBa colour to layer elements, border-radius to add subtle rounded corners and (possibly most experimental of all new CSS), generated gradients.\n\n The home page Mike sees in Safari on his Mac\n\nMike loves what he sees.\n\nMeet Sam\n\nSam works with Mike. She uses Internet Explorer 7 because it came on the Windows laptop that the company bought her when she joined. \n\n The home page Sam sees in Internet Explorer 7 on her PC\n\nSam loves the new Web site too.\n\nHow could both of them be happy when they experienced the Web site differently?\n\nThe new WYSIWYG\n\nWhen I first presented my designs to Mike and Sam, I showed them a Web page made with HTML and CSS in their respective browsers and not a picture of a Web page. By showing neither a static image of my design, I set none of the false expectations that, by definition, a static Photoshop or Fireworks visual would have established.\n\nMike saw rounded corners and subtle shadows in Firefox and Safari. Sam saw something equally as nice, just a little different, in Internet Explorer. Both were very happy because they saw something that they liked.\n\nNeither knew, or needed to know, about the subtle differences between browsers. Their users don\u2019t need to know either.\n\nThat\u2019s because in the real world, people using the Web don\u2019t find a Web site that they like, then open up another browser to check that it looks they same. They simply buy what they came to buy, read what what they came to read, do what they came to do, then get on with their lives in blissful ignorance of what they might be seeing in another browser.\n\nOften when I talk or write about using progressive CSS, people ask me, \u201cHow do you convince clients to let you work that way? What\u2019s your secret?\u201d Secret? I tell them what they need to know, on a need-to-know basis.\n\nEpilogue\n\nSam has a new iPhone that Mike bought for her as a reward for achieving her sales targets. She loves her iPhone and was surprised at just how fast and good-looking the company Web site appears on that. So she asked,\n\n\n\t\u201cAndy, I didn\u2019t know you optimised our site for mobile. I don\u2019t remember seeing an invoice for that.\u201d\n\n\nI smiled.\n\n\n\t\u201cThat one was on the house.\u201d", "year": "2009", "author": "Andy Clarke", "author_slug": "andyclarke", "published": "2009-12-23T00:00:00+00:00", "url": "https://24ways.org/2009/ignorance-is-bliss/", "topic": "business"} {"rowid": 192, "title": "Cleaner Code with CSS3 Selectors", "contents": "The parts of CSS3 that seem to grab the most column inches on blogs and in articles are the shiny bits. Rounded corners, text shadow and new ways to achieve CSS layouts are all exciting and bring with them all kinds of possibilities for web design. However what really gets me, as a developer, excited is a bit more mundane. \n\nIn this article I\u2019m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I\u2019m also going to demonstrate how we can use these selectors now with a little help from JavaScript \u2013 which can work out very useful if you find yourself in a situation where you can\u2019t change markup that is being output by some server-side code.\n\nThe wonder of nth-child\n\nSo why does nth-child get me so excited? Here is a really common situation, the designer would like the tables in the application to look like this:\n\n\n\nSetting every other table row to a different colour is a common way to enhance readability of long rows. The tried and tested way to implement this is by adding a class to every other row. If you are writing the markup for your table by hand this is a bit of a nuisance, and if you stick a row in the middle you have to change the rows the class is applied to. If your markup is generated by your content management system then you need to get the server-side code to add that class \u2013 if you have access to that code.\n\n\n\n\nStriping every other row - using classes\n\n\n\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t
    NameCards sentCards receivedCards written but not sent
    Ann40284
    Joe22729
    Paul5352
    Louise65650
    \n\n\n\nView Example 1\n\nThis situation is something I deal with on almost every project, and apart from being an extra thing to do, it just isn\u2019t ideal having the server-side code squirt classes into the markup for purely presentational reasons. This is where the nth-child pseudo-class selector comes in. The server-side code creates a valid HTML table for the data, and the CSS then selects the odd rows with the following selector:\n\ntr:nth-child(odd) td {\n\tbackground-color: #86B486;\n}\n\nView Example 2\n\nThe odd and even keywords are very handy in this situation \u2013 however you can also use a multiplier here. 2n would be equivalent to the keyword \u2018odd\u2019 3n would select every third row and so on.\n\nBrowser support\n\nSadly, nth-child has pretty poor browser support. It is not supported in Internet Explorer 8 and has somewhat buggy support in some other browsers. Firefox 3.5 does have support. In some situations however, you might want to consider using JavaScript to add this support to browsers that don\u2019t have it. This can be very useful if you are dealing with a Content Management System where you have no ability to change the server-side code to add classes into the markup.\n\nI\u2019m going to use jQuery in these examples as it is very simple to use the same CSS selector used in the CSS to target elements with jQuery \u2013 however you could use any library or write your own function to do the same job. In the CSS I have added the original class selector to the nth-child selector:\n\ntr:nth-child(odd) td, tr.odd td {\n\tbackground-color: #86B486;\n}\n\nThen I am adding some jQuery to add a class to the markup once the document has loaded \u2013 using the very same nth-child selector that works for browsers that support it. \n\n \n \n\nView Example 3\n\nWe could just add a background colour to the element using jQuery, however I prefer not to mix that information into the JavaScript as if we change the colour on our table rows I would need to remember to change it both in the CSS and in the JavaScript.\n\nDoing something different with the last element\n\nSo here\u2019s another thing that we often deal with. You have a list of items all floated left with a right hand margin on each element constrained within a fixed width layout. If each element has the right margin applied the margin on the final element will cause the set to become too wide forcing that last item down to the next row as shown in the below example where I have used a grey border to indicate the fixed width.\n\n\n\nCurrently we have two ways to deal with this. We can put a negative right margin on the list, the same width as the space between the elements. This means that the extra margin on the final element fills that space and the item doesn\u2019t drop down. \n\n\n\n\nThe last item is different\n\n\n\n\t
    \n\t\t\n\t
    \n\n\n\nView Example 4\n\nThe other solution will be to put a class on the final element and in the CSS remove the margin for this class. \n\nul.gallery li.last {\n\tmargin-right: 0;\n}\n\nThis second solution may not be easy if the content is generated from server-side code that you don\u2019t have access to change.\n\nIt could all be so different. In CSS3 we have marvellously common-sense selectors such as last-child, meaning that we can simply add rules for the last list item. \n\nul.gallery li:last-child {\n\tmargin-right: 0;\n}\n\nView Example 5\n\nThis removed the margin on the li which is the last-child of the ul with a class of gallery. No messing about sticking classes on the last item, or pushing the width of the item out wit a negative margin.\n\nIf this list of items repeated ad infinitum then you could also use nth-child for this task. Creating a rule that makes every 3rd element margin-less.\n\nul.gallery li:nth-child(3n) {\n\tmargin-right: 0;\n}\n\nView Example 6\n\n\n\nA similar example is where the designer has added borders to the bottom of each element \u2013 but the last item does not have a border or is in some other way different. Again, only a class added to the last element will save you here if you cannot rely on using the last-child selector.\n\nBrowser support for last-child\n\nThe situation for last-child is similar to that of nth-child, in that there is no support in Internet Explorer 8. However, once again it is very simple to replicate the functionality using jQuery. Adding our .last class to the last list item.\n\n$(\"ul.gallery li:last-child\").addClass(\"last\");\n\nWe could also use the nth-child selector to add the .last class to every third list item.\n\n$(\"ul.gallery li:nth-child(3n)\").addClass(\"last\");\n\nView Example 7\n\nFun with forms\n\nStyling forms can be a bit of a trial, made difficult by the fact that any CSS applied to the input element will effect text fields, submit buttons, checkboxes and radio buttons. As developers we are left adding classes to our form fields to differentiate them. In most builds all of my text fields have a simple class of text whereas I wouldn\u2019t dream of adding a class of para to every paragraph element in a document.\n\n\n\n\nSyling form fields\n\n\n\n\t

    Send your Christmas list to Santa

    \n\t
    \n\t\t
    \n\t\t
    \n\t\t
    \n\t\t
    \n\t\t
    \n\t\t
    \n\t\t
    \n\t
    \n\n\n\nView Example 8\n\nAttribute selectors provide a way of targeting elements by looking at the attributes of those elements. Unlike the other examples in this article which are CSS3 selectors, the attribute selector is actually a CSS2.1 selector \u2013 it just doesn\u2019t get much use because of lack of support in Internet Explorer 6. Using attribute selectors we can write rules for text inputs and form buttons without needing to add any classes to the markup. For example after removing the text and button classes from my text and submit button input elements I can use the following rules to target them:\n\nform input[type=\"text\"] {\n border: 1px solid #333;\n padding: 0.2em;\n width: 400px;\n}\nform input[type=\"submit\"]{\n border: 1px solid #333;\n background-color: #eee;\n color: #000;\n padding: 0.1em;\n} \n\nView Example 9\n\nAnother problem that I encounter with forms is where I am using CSS to position my labels and form elements by floating the labels. This works fine as long as I want all of my labels to be floated, however sometimes we get a set of radio buttons or a checkbox, and I don\u2019t want the label field to be floated. As you can see in the below example the label for the checkbox is squashed up into the space used for the other labels, yet it makes more sense for the checkbox to display after the text.\n\n\n\nI could use a class on this label element however CSS3 lets me to target the label attribute directly by looking at the value of the for attribute.\n\nlabel[for=\"fOptIn\"] {\n float: none;\n width: auto;\n}\n\n\n\nBeing able to precisely target attributes in this way is incredibly useful, and once IE6 is no longer an issue this will really help to clean up our markup and save us from having to create all kinds of special cases when generating this markup on the server-side.\n\nBrowser support\n\nThe news for attribute selectors is actually pretty good with Internet Explorer 7+, Firefox 2+ and all other modern browsers all having support. As I have already mentioned this is a CSS2.1 selector and so we really should expect to be able to use it as we head into 2010! Internet Explorer 7 has slightly buggy support and will fail on the label example shown above however I discovered a workaround in the Sitepoint CSS reference comments. Adding the selector label[htmlFor=\"fOptIn\"] to the correct selector will create a match for IE7.\n\nIE6 does not support these selector but, once again, you can use jQuery to plug the holes in IE6 support. The following jQuery will add the text and button classes to your fields and also add a checks class to the label for the checkbox, which you can use to remove the float and width for this element.\n\n$('form input[type=\"submit\"]').addClass(\"button\");\n$('form input[type=\"text\"]').addClass(\"text\");\n$('label[for=\"fOptIn\"]').addClass(\"checks\");\n\nView Example 10\n\nThe selectors I\u2019ve used in this article are easy to overlook as we do have ways to achieve these things currently. As developers \u2013 especially when we have frameworks and existing code that cope with these situations \u2013 it is easy to carry on as we always have done. \n\nI think that the time has come to start to clean up our front and backend code and replace our reliance on classes with these more advanced selectors. With the help of a little JavaScript almost all users will still get the full effect and, where we are dealing with purely visual effects, there is definitely a case to be made for not worrying about the very small percentage of people with old browsers and no JavaScript. They will still receive a readable website, it may just be missing some of the finesse offered to the modern browsing experience.", "year": "2009", "author": "Rachel Andrew", "author_slug": "rachelandrew", "published": "2009-12-20T00:00:00+00:00", "url": "https://24ways.org/2009/cleaner-code-with-css3-selectors/", "topic": "code"} {"rowid": 184, "title": "Spruce It Up", "contents": "The landscape of web typography is changing quickly these days. We\u2019ve gone from the wild west days of sIFR to Cuf\u00f3n to finally seeing font embedding seeing wide spread adoption by browser developers (and soon web designers) with @font-face. For those who\u2019ve felt limited by the typographic possibilities before, this has been a good year.\n\nAs Mark Boulton has so eloquently elucidated, @font-face embedding doesn\u2019t come without its drawbacks. Font files can be quite large and FOUT\u2014that nasty flash of unstyled text\u2014can be a distraction for users.\n\nData URIs\n\nWe can battle FOUT by using Data URIs. A Data URI allows the font to be encoded right into the CSS file. When the font comes with the CSS, the flash of unstyled text is mitigated. No extra HTTP requests are required. \n\nDon\u2019t be a grinch, though. Sending hundreds of kilobytes down the pipe still isn\u2019t great. Sometimes, all we want to do is spruce up our site with a little typographic sugar. \n\nBe Selective\n\nDan Cederholm\u2019s SimpleBits is an attractive site. \n\n\n\nTake a look at the ampersand within the header of his site. It\u2019s the lovely (and free) Goudy Bookletter 1911 available from The League of Movable Type. The Opentype format is a respectable 28KB. Nothing too crazy but hold on here. Mr. Cederholm is only using the ampersand! Ouch. That\u2019s a lot of bandwidth just for one character.\n\nCan we optimize a font like we can an image? Yes. Image optimization essentially works by removing unnecessary image data such as colour data, hidden comments or using compression algorithms. How do you remove unnecessary information from a font? Subsetting. \n\nIf you\u2019re the adventurous type, grab a copy of FontForge, which is an open source font editing tool. You can open the font, view and edit any of the glyphs and then re-generate the font. The interface is a little clunky but you\u2019ll be able to select any character you don\u2019t want and then cut the glyphs. Re-generate your font and you\u2019ve now got a smaller file. \n\n\n\nThere are certainly more optimizations that can also be made such as removing hinting and kerning information. Keep in mind that removing this information may affect how well the type renders.\n\nAt this time of year, though, I\u2019m sure you\u2019re quite busy. Save yourself some time and head on over to the Font Squirrel Font Generator.\n\n\n\nThe Font Generator is extremely handy and allows for a number of optimizations and cross-platform options to be generated instantly. Select the font from your local system\u2014make sure that you are only using properly licensed fonts! \n\nIn this particular case, we only want the ampersand. Click on Subset Fonts which will open up a new menu. Unselect any preselected sets and enter the ampersand into the Single Characters text box. \n\nGenerate your font and what are you left with? 3KB. \n\n\n\nThe Font Generator even generates a base64 encoded data URI stylesheet to be imported easily into your project.\n\nCheck out the Demo page. (This demo won\u2019t work in Internet Explorer as we\u2019re only demonstrating the Data URI font embedding and not using the EOT file format that IE requires.) \n\nNo Unnecessary Additives\n\nIf you peeked under the hood of that demo, did you notice something interesting? There\u2019s no around the ampersand. The great thing about this is that we can take advantage of the font stack\u2019s natural ability to switch to a fallback font when a character isn\u2019t available.\n\nJust like that, we\u2019ve managed to spruce up our page with a little typographic sugar without having to put on too much weight.", "year": "2009", "author": "Jonathan Snook", "author_slug": "jonathansnook", "published": "2009-12-19T00:00:00+00:00", "url": "https://24ways.org/2009/spruce-it-up/", "topic": "code"} {"rowid": 187, "title": "A New Year's Resolution", "contents": "The end of 2009 is fast approaching. Yet another year has passed in a split second. Our Web Designing careers are one year older and it\u2019s time to reflect on the highs and lows of 2009. What was your greatest achievement and what could you have done better? Perhaps, even more importantly, what are your goals for 2010?\n\nSomething that I noticed in 2009 is that being a web designer 24/7; it\u2019s easy to get consumed by the web. It\u2019s easy to get caught up in the blog posts, CSS galleries, web trends and Twitter! Living in this bubble can lead to one\u2019s work becoming stale, boring and basically like everyone else\u2019s work on the web. No designer wants this.\n\nSo, I say on 1st January 2010 let\u2019s make it our New Year\u2019s resolution to create something different, something special or even ground-breaking! Make it your goal to break the mold of current web design trends and light the way for your fellow web designer comrades!\n\nOf course I wouldn\u2019t let you embark on the New Year empty handed. To help you on your way I\u2019ve compiled a few thoughts and ideas to get your brains ticking!\n\nDon\u2019t design for the web, just design\n\nA key factor in creating something original and fresh for the web is to stop thinking in terms of web design. The first thing we need to do is forget the notion of headers, footers, side bars etc. A website doesn\u2019t necessarily need any of these, so even before we\u2019ve started we\u2019ve already limited our design possibilities by thinking in these very conventional and generally accepted web terms. The browser window is a 2D canvas like any other and we can do with it what we like. \n\nWith this in mind we can approach web design from a fresh perspective. We can take inspiration for web design from editorial design, packaging design, comics, poster design, album artwork, motion design, street signage and anything else you can think of. Web design is way more than the just the web and by taking this more wide angled view of what web design is and can be you\u2019ll find there are a thousand more exiting design possibilities.\n\nNote: Try leaving the wire framing till after you\u2019ve gone to town with some initial design concepts. You might find it helps keep your head out of that \u2018web space\u2019 a little bit longer, thus enabling you to think more freely about your design. Really go crazy with these as you can always pull it back into line later. The key is to think big initially and then work backwards. There\u2019s no point restricting your creativity early on because your technical knowledge can foresee problems down the line. You can always sort these problems out later on\u2026 let your creative juices flow!\n\n Inspiration can come from anywhere! (Photo: modomatic)\n\nTry something new!\n\nProgress in web design or in any design discipline is a sort of evolution. Design trends and solutions merge and mutate to create new design trends and hopefully better solutions. This is fine but the real leaps are made when someone has the guts to do something different. \n\nDon\u2019t be afraid to challenge the status quo. To create truly original work you have to be prepared to get it wrong and that\u2019s hard to do. When you\u2019re faced with this challenge just remind yourself that in web design there is rarely a \u2018best way to do something\u2019, or why would we ever do it any other way? \n\nIf you do this and get it right the pay off can be immense. Not only will you work stand out from the crowd by a mile, you will have become a trend setter as opposed to a trend follower.\n\nTell a story with your design\n\nGreat web design is way more than just the aesthetics, functionality or usability. Great web design goes beyond the pixels on the screen. For your website to make a real impact on it\u2019s users it has to connect with them emotionally. So, whether your website is promoting your own company or selling cheese it needs to move people. You need to weave a story into your design. It\u2019s this story that your users will connect with. \n\nTo do this the main ingredients of your design need to be strongly connected. In my head those main ingredients are Copy, Graphic Design, Typography, imagery and colour. \n\nCopy\n\nStrong meaningful copy is the backbone to most great web design work. Pay special attention to strap lines and headlines as these are often the sparks that start the fire. All the other elements can be inspired by this backbone of strong copy.\n\nGraphic Design\n\nUse the copy to influence how you treat the page with your graphic design. Let the design echo the words.\n\nTypography\n\nWhat really excites me about typography isn\u2019t the general text presentation on a page, most half decent web designer have a grasp of this already. What excites me is the potential there is to base a whole design on words and letters. Using the strong copy you already have, one has the opportunity the customise, distort, build and arrange words and letters to create beautiful and powerful compositions that can be the basis for an entire site design.\n\n Get creative with Typography (Photo: Pam Sattler)\n\nImagery and Colour\n\nWith clever use of imagery (photographs or illustrations) and colour you further have the chance to deepen the story you are weaving into your design. The key is to use meaningful imagery, don\u2019t to insert generic imagery for the sake of filling space\u2026 it\u2019s just a wasted opportunity.\n\nRemember, the main elements of your design combined are greater than the sum of their parts. Whatever design decisions you make on a page, make them for a good reason. It\u2019s not good enough to try and seduce your users with slick and shiny web pages. For your site to leave a lasting impression on the user you need to make that emotional connection.\n\n Telling the Story (Advertising Agency: Tita, Milano, Italy, Art Director: Emanuele Basso)\n\nGo one step further\n\nSo you\u2019ve almost finished your latest website design. You\u2019ve fulfilled the brief, you\u2019re happy with the result and you\u2019re pretty sure your client will be too. It\u2019s at this point we should ask ourselves \u201cCan I push this further\u201d? What touches could you add to the site that\u2019ll take it beyond what was required and into something exceptional? The truth is, to produce exceptional work we need to do more than is required of us. We need to answer the brief and then some!\n\nGo back through your site and make a note of what enhancements could be made to make the site not just good but outstanding. It might be revisiting a couple of pages that were neglected in the design process, it might be adding some CSS 3 gloss for the users that can benefit from it or it might just be adding some clever little easter eggs to show that you care. These touches will soon add up and make a massive difference to the finished product.\n\nSo, go one step further\u2026 take it further than you anyone else will. Then your work will stand out for sure.\n\nParting message\n\nI love being a designer for many of reasons but the main one being that with every new project we embark on we have the chance to express ourselves. We have the chance to create something special, something that people will talk about. It\u2019s this chance that drives us onwards day after day, year after year. So in 2010 shout louder than you ever have before, take chances, try something new and above all design your socks off!", "year": "2009", "author": "Mike Kus", "author_slug": "mikekus", "published": "2009-12-10T00:00:00+00:00", "url": "https://24ways.org/2009/a-new-years-resolution/", "topic": "business"} {"rowid": 174, "title": "Type-Inspired Interfaces", "contents": "One of the things that terrifies me most about a new project is the starting point. How is the content laid out? What colors do I pick? Once things like that are decided, it becomes significantly easier to continue design, but it\u2019s the blank page where I spend the most time.\n\nTo that end, I often start by choosing type. I don\u2019t need to worry about colors or layout or anything else\u2026 just the right typefaces that support the art direction. (This article won\u2019t focus on how to choose a typeface, but there are some really great resources if you interested in that sort of thing.)\n\nAnd just like that, all your work is done. \u201cHold it just a second,\u201d you might say. \u201cAll I\u2019ve done is pick type. I still have to do the rest!\u201d\n\nTo which I would reply, \u201cSilly rabbit. You already have!\u201d You see, picking the right typeface gets you farther than you might think. Here are a few tips on taking cues from type to design interfaces and interface elements.\n\nPerfecting Web 2.0\n\nIf you\u2019re going for that beloved rounded corner look, you might class it up a bit by choosing the wonderful Omnes Pro by Joshua Darden. As the typeface already has a rounded aesthetic, making buttons that fit the style should be pretty easy.\n\nI\u2019ve found that using multiples helps to keep your interfaces looking balanced and proportional. Noticing that the top left edge of the letter \u201cP\u201d has about an 12px corner radius, let\u2019s choose a 24px radius for our button (a multiple of 2), so that we get proper rounded corners. By taking mathematical measurements from the typeface, our button looks more thought out than just \u201cplace arbitrary text on arbitrarily-sized button.\u201d Pretty easy, eh?\n\n\n\nWhat\u2019s in a name(plate)?\n\nRounded buttons are pretty popular buttons nowadays, so let\u2019s try something a bit more stylized.\n\nHave a gander at Brothers, a sturdy face from Emigre. The chiseled edges give us a perfect cue for a stylized button. Using the same slope, you can make plated-looking buttons that fit a different kind of style.\n\n\n\nHeadlining\n\nYou might even take some cues from the style of the typeface itself. Didone serifs are known for their lack of brackets\u30fcthat is, a gradual transition from the stem to the serif. Instead, they typically connect at a right angle. Another common characteristic is the high contrast in the strokes: very thick stems, very thin serifs.\n\nSo, when using a high contrast typeface, you can use it to your advantage to enhance hierarchy. Following our \u201cmultiples\u201d guideline, a 12px measurement from the stems helps us create a top rule with a height of 24px (a multiple of 2). We can take the exact 1px measurement from the serif\u2014a multiple of 1\u2014to create the bottom rule. Voil\u00e0! I use this technique a lot.\n\n\n\nSwashbucklers\n\nAnd don\u2019t forget the importance of visual \u201cspeed bumps\u201d to break up long passages of text. A beautiful face like Alejandro Paul\u2019s Ministry Script has over a thousand characters that can be manipulated or even combined to create elegant interface elements. Altering the partial differential character (\u2202) creates a delightful ornament that can help to guide the eye through content.\n\n\n\nStagger & Swagger\n\nWhat about layout? How can we use typography to inform how our content is displayed?\n\nLet\u2019s take a typeface like Assembler. We might use this for a design that needs to feel uneasy or uncomfortable. In design terms, that might translate into using irregular shapes and asymmetry. Using the proportional distances and degrees from the perpendiculars, we could easily create a multi-column layout that jives with the general tone. And for all you skeptics that don\u2019t think a layout like this is doable on the web, stranger things have happened.\n\n Background texture generously offered by Bittbox.\n\nOverall Design Direction\n\nFinally, your typography could impact the entire look of the site, from the navigation to the interaction and everything in between. Check out how the (now-defunct) Nike Free site\u2019s typography echoes the product itself, and in turn influences the navigation.\n\n\n\nFind Your Type\n\nWith thousands of fonts to choose from, the possibilities are ridiculously open. From angles to radii to color to weight, you\u2019ve got endless fodder before you. Great type designers spent countless hours slaving over these detailed letterforms; take advantage of it! Don\u2019t feel like you have to limit yourself to the same old Helvetica and wet floors\u2026 unless your design calls for it. \n\nHappy hunting!", "year": "2009", "author": "Dan Mall", "author_slug": "danmall", "published": "2009-12-07T00:00:00+00:00", "url": "https://24ways.org/2009/type-inspired-interfaces/", "topic": "design"} {"rowid": 173, "title": "Real Fonts and Rendering: The New Elephant in the Room", "contents": "My friend, the content strategist Kristina Halvorson, likes to call content \u201cthe elephant in the room\u201d of web design. She means it\u2019s the huge problem that no one on the web development team or client side is willing to acknowledge, face squarely, and plan for. \n\nA typical web project will pass through many helpful phases of research, and numerous beneficial user experience design iterations, while the content\u2014which in most cases is supposed to be the site\u2019s primary focus\u2014gets handled haphazardly at the end. Hence, elephant in the room, and hence also artist Kevin Cornell\u2019s recent use of elephantine imagery to illustrate A List Apart articles on the subject. But I digress.\n\nWithout discounting the primacy of the content problem, we web design folk have now birthed ourselves a second lumbering mammoth, thanks to our interest in \u201creal fonts on the web\u201c (the unfortunate name we\u2019ve chosen for the recent practice of serving web-licensed fonts via CSS\u2019s decade-old @font-face declaration\u2014as if Georgia, Verdana, and Times were somehow unreal). \n\nFor the fact is, even bulletproof and mo\u2019 bulletproofer @font-face CSS syntax aren\u2019t really bulletproof if we care about looks and legibility across browsers and platforms.\n\nHyenas in the Breakfast Nook\n\nThe problem isn\u2019t just that foundries have yet to agree on a standard font format that protects their intellectual property. And that, even when they do, it will be a while before all browsers support that standard\u2014leaving aside the inevitable politics that impede all standardization efforts. Those are problems, but they\u2019re not the elephant. Call them the coyotes in the room, and they\u2019re slowly being tamed.\n\nNor is the problem that workable, scalable business models (of which Typekit\u2018s is the most visible and, so far, the most successful) are still being shaken out and tested. The quality and ease of use of such services, their stability on heavily visited sites (via massively backed-up server clusters), and the fairness and sustainability of their pricing will determine how licensing and serving \u201creal fonts\u201d works in the short and long term for the majority of designer/developers.\n\nNor is our primary problem that developers with no design background may serve ugly or illegible fonts that take forever to load, or fonts that take a long time to download and then display as ordinary system fonts (as happens on, say, about.validator.nu). Ugliness and poor optimization on the web are nothing new. That support for @font-face in Webkit and Mozilla browsers (and for TrueType fonts converted to Embedded OpenType in Internet Explorer) adds deadly weapons to the non-designer\u2019s toolkit is not the technology\u2019s fault. JavaScript and other essential web technologies are equally susceptible to abuse. \n\nBeauty is in the Eye of the Rendering Engine\n\nNo, the real elephant in the room\u2014the thing few web developers and no \u201cweb font\u201d enthusiasts are talking about\u2014has to do with legibility (or lack thereof) and aesthetics (or lack thereof) across browsers and platforms. Put simply, even fonts optimized for web use (which is a whole thing: ask a type designer) will not look good in every browser and OS. That\u2019s because every browser treats hinting differently, as does every OS, and every OS version. \n\nFirefox does its own thing in both Windows and Mac OS, and Microsoft is all over the place because of its need to support multiple generations of Windows and Cleartype and all kinds of hardware simultaneously. Thus \u201creal type\u201d on a single web page can look markedly different, and sometimes very bad, on different computers at the same company. If that web page is your company\u2019s, your opinion of \u201cweb fonts\u201d may suffer, and rightfully. (The advantage of Apple\u2019s closed model, which not everyone likes, is that it allows the company to guarantee the quality and consistency of user experience.) \n\nAs near as my font designer friends and I can make out, Apple\u2019s Webkit in Safari and iPhone ignores hinting and creates its own, which Apple thinks is better, and which many web designers think of as \u201cwhat real type looks like.\u201d The forked version of Webkit in Chrome, Android, and Palm Pre also creates its own hinting, which is close to iPhone\u2019s\u2014close enough that Apple, Palm, and Google could propose it as a standard for use in all browsers and platforms. Whether Firefox would embrace a theoretical Apple and Google standard is open to conjecture, and I somehow have difficulty imagining Microsoft buying in\u2014even though they know the web is more and more mobile, and that means more and more of their customers are viewing web content in some version of Webkit.\n\nThe End of Simple\n\nThere are ways around this ugly type ugliness, but they involve complicated scripting and sniffing\u2014the very nightmares from which web standards and the simplicity of @font-face were supposed to save us. I don\u2019t know that even mighty Typekit has figured out every needed variation yet (although, working with foundries, they probably will). \n\nFor type foundries, the complexity and expense of rethinking classic typefaces to survive in these hostile environments may further delay widespread adoption of web fonts and the resolution of licensing and formatting issues. The complexity may also force designers (even those who prefer to own) to rely on a hosted rental model simply to outsource and stay current with the detection and programming required.\n\nForgive my tears. I stand in a potter\u2019s field of ideas like \u201cKeep it simple,\u201d by a grave whose headstone reads \u201cWrite once, publish everywhere.\u201d", "year": "2009", "author": "Jeffrey Zeldman", "author_slug": "jeffreyzeldman", "published": "2009-12-22T00:00:00+00:00", "url": "https://24ways.org/2009/real-fonts-and-rendering/", "topic": "design"} {"rowid": 175, "title": "Front-End Code Reusability with CSS and JavaScript", "contents": "Most web standards-based developers are more than familiar with creating their sites with semantic HTML with lots and lots of CSS. With each new page in a design, the CSS tends to grow and grow and more elements and styles are added. But CSS can be used to better effect.\n\nThe idea of object-oriented CSS isn\u2019t new. Nicole Sullivan has written a presentation on the subject and outlines two main concepts: separate structure and visual design; and separate container and content. Jeff Croft talks about Applying OOP Concepts to CSS:\n\n\n\tI can make a class of .box that defines some basic layout structure, and another class of .rounded that provides rounded corners, and classes of .wide and .narrow that define some widths, and then easily create boxes of varying widths and styles by assigning multiple classes to an element, without having to duplicate code in my CSS.\n\n\nThis concept helps reduce CSS file size, allows for great flexibility, rapid building of similar content areas and means greater consistency throughout the entire design. You can also take this concept one step further and apply it to site behaviour with JavaScript.\n\nBuild a versatile slideshow\n\nI will show you how to build multiple slideshows using jQuery, allowing varying levels of functionality which you may find on one site design. The code will be flexible enough to allow you to add previous/next links, image pagination and the ability to change the animation type. More importantly, it will allow you to apply any combination of these features.\n\nImage galleries are simply a list of images, so the obvious choice of marking the content up is to use a