home of the “design for the web” coursean adult course focused on webstandards based webdesign
design for the web
02/05/2013 2 Comments
This is now a more and more commonly used technique which has great advantages for easy use – the sticky menu. I put together a quick demo which changes the position of the menu once the page is scrolled and highlights the current menu link, relevant page section reached.
This should help you with your site, Bart :)
22/03/2013 No Comments
Following on from yesterday – let’s setup an accordion menu :)
download the source files and implement the design by looking at the webpage (without peeking at my CSS!). We will then setup up the sliding panel and drop down menu with jQuery, gracefully degrading without JS, of course :)
continue reading ➤
21/03/2013 No Comments
Time for more practice using this sample design. Write the required CSS (working with the given HTML) to produce the layout as completed webpage. Take a look at the screenshots of the hidden/shown images and work towards the 3 break points shown.
Ideally, you’ll approach this task mobile first :)
14/03/2013 No Comments
Time to add some nice touches to your layouts - smooth scrolling as well as showing and hiding content elements. To keep you practising your coding skills in preparation for the production of your client project - create the following layout of this single sample portfolio page. The source files include the screenshots as well as the Illustrator file of the original cube graphic for the creation for the sprite rollover.
11/01/2013 No Comments
Let’s have a look the famous lightbox :)
There are a lot of different approaches, scripts and solutions around, from CSS3 to pure Javascript and jQuery plugins. Some options are well designed and consider graceful degradation, others are overly complex and even seem to ignore accessibility and usability. So if you do find a solution you’d like to try ~ make sure to read the documentation through carefully, look for comments and reviews or opinions which might give you an idea of how well it works across various browsers and devices.
Read all documentation thoroughly – implement with care & always respect the author’s rights & give credit where credit is due.
continue reading ➤
10/05/2012 Comments Off
With the current issue of this site’s ‘view menu’ link on small screens and the hunt for a solution, I thought it might good for us to take a look at some options of online editors and forums which can help get you out of trouble. Just consider our menu issue almost solved :)