So... I'm normally a developer: I don't do design and I don't do architecture, I'm somewhere inbetween and I'm just fine there. UNTIL... I was asked to do a little design project! Well, not really design, because the day I become responsible for that oh so important first glance of a website, will be sad day in the history of web applications :)
Anyways, I was asked to convert a PhotoShop design to a HTML/CSS website. Although I am pretty familiar with both HTML as CSS, the hard part is shutting up the developer part of you that doesn't like static pages and is wondering where the database went.
So right about now, you might be looking for the point of this post, so here it is: in this short period of front-end developing, I want to share with you all of the new, cool, design-people tricks I learned.
First thing on the list: the HTML 5 Boilerplate template!
This is a brilliantly optimized HTML 5 template, that you can customize for your own needs. You can generate a customized copy of this template, if you need JQuery or Modernizr, you can include it by default in the template. To see all possiblities for a custom copy of the template, you can check this page: https://www.initializr.com/.
This template is a great starting point for a HTML 5 design and it includes some very nice HTML5 hacks. You can find the template here: https://html5boilerplate.com/. I really advise you to use this if you are interested in HTML 5, it will help you to get started and the code itself is a good thing to study as well.
While you're at it, you might be interested in this video: https://www.youtube.com/watch?v=oDlsOyPKUTM. This video by Paul Irish explains what the boilerplate is and why you need it. They just released version 4 of the template and launched a new website while they were at it.
Image sprites!
Image sprites is the concept of placing multiple images such as a link image and the hover version of this image in one file. Because both images are loaded at the same time when the file itself is loaded, there will be no lagging when switching the image. The correct image of the file is shown by setting positioning, when you want to switch between images, you use the same file but you just need to reset the positioning. This is a really cool topic which requires some graphics for explanation, therefor I will write a separate blogpost about this soon and reference it here as soon as it is done!
An example: a little digging helped me figure out that Twitter uses sprites as well and even recycles them. The blue parts of the image below is used as a normal, active and hover state background for a button. And yes, this is just one file but it contains about seven images.
Image replacement!
Image replacement is when you replace text with an image. Sounds logical doesn't it? :P The idea behind it however is to hide the text and show the image when displayed normally in a browser, but to reveal the text when images are disabled or when a screenreader is used. And offcourse, for SEO purposes.
Below you can find an example of the JSFiddle website (more about JSFiddle here: https://www.thiscouldbeuseful.com/2012/02/js-fiddle-old-news.html). As you can see in the html code there is no image tag, just a link tag. Using css the text is hidden by using text-indent and a background image is displayed. If you disable images or use a screen reader, it will show the text "jsFiddle (alpha) and not the image.
Screen reader optimalization!
This is not so much a trick as it is a part of best practices: completely building your HTML first, placing elements and text hierarchically and using no styling besides the header tags. Finally, you apply styling afterwards. This will garantuee that screen readers will get a proper view of your site and will force you to use HTML and css for what they were made :)
Next thing is: generators!
Don't be a fool and spend way too much time on tweaking things that you don't understand... let an online generator do it for you!
A great example of this is when you need to create an element with rounded corners, do you have to think about how to do that? No, you don't :) : https://border-radius.com/, this tool will do it for you and all you have to do is visualize it.
There is also one for generating box shadows: https://css3gen.com/box-shadow/. If I'm not mistaking, adding the "inset" keyword in front of the values will make it an innershadow.
If you need more generators, here's a nice list: https://www.aoclarkejr.com/10-really-awesome-css-generators.html (link intentionally broken as this website seems to no longer exist).
And finally: validators!
Use them!!! Besides validating your code (duh!) they are a good way of tracking errors. W3C provides a validator for HTML and CSS and you could use JSLint (make sure to check this out: https://www.thiscouldbeuseful.com/2012/07/must-have-developer-tools-jslint.html) for validating your (Java)scripts.
HTML validator: https://validator.w3.org/
CSS validator: https://jigsaw.w3.org/css-validator/validator.html.en
JSLint: https://www.jslint.com/
All developers in designer territory, be brave, good luck and keep an eye on this blog!
Could be useful, right?
This comment has been removed by a blog administrator.
ReplyDelete