I haven’t written about website design or code for a while now and things have changed hugely in the past three years. So I thought I’d put together some thoughts just to catch up.
I can remember, around 2009, designing Web pages that were no more than 600 pixels wide, so that people with smaller older screens would be able to read the important information these mainframe-using companies were giving them. I also had to create numerous separate pages so that the information didn’t go too far down the page—‘below the fold’ as we used to say in the days before everyone got used to scrolling down-and-down on their smartphones.
Now, I design pages that spread all the way across the page, no matter how big the page is going to appear on the device looking at it. Responsive websites work on computer screens, smartphones and tablets. You simply design once and cater for all the device sizes in one go.
The obvious problem with this is the menu that usually sits at the top of the page. As the page size reduces, the menu items get closer together and then start wrapping around making the layout look really rubbish. So, what’s the solution? It’s the hamburger icon. If you’re not familiar with the name, the hamburger icon is three short straight lines, one above the other—metaphorically representing the top bun, the burger and the bottom bun.
Typically, when you click on the hamburger, the menu appears and drops down over the page. Many sites are now hiding the menu at the side of the page, so when you click on the hamburger, the menu appears from the left or right side of the screen and slides across. Other alternatives are available, for example some sites are using sticky menus; these stay in position, no matter how much scrolling through the site takes place.
There are estimates quoted that more than half of all website traffic now comes from phones and tablets
. That means that your page length can be quite long because users are happy to scroll down-and-down the page to find the information they want (and not too bothered about not clicking).
The other advantage of having a long scrolling page is that you can make the landing page look fantastic. You can use an impressive photo or some video as the background, and then put very few words in a giant font on top. This makes the landing page look like a movie or TV advert (if you’re using video), or like a book or catalogue (if you’re using a graphic). For the technically minded, the HTML5