A while back we took A Look at Responsive Web Design and how different designers utilize it in different ways. Now that we’ve seen a few examples in action, let’s create a responsive website of our own. In this installment we’re going to set up the structure of our homepage and add in a few media queries that will help the site load quicker, navigate better, and keep our desired appearance across multiple devices, platforms, and resolutions. Before we dive in to the HTML, let’s cover the “viewport”...
This week we’re going to finish up our series on how to develop a clean website by laying out a secondary page. We’re going to include a secondary navigation bar along the top of our design, as well as include all of our text for the section on one page. This will eliminate the unnecessary loading of other pages when all that’s changing is the text. It will allow the visitor to browse your site quicker and be less work for you to develop. When all is said and done, this is what you’ll have developed:...
This is our third installment of how to design a clean a minimalist website. First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3. Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3. Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage. We left off in part two after we pulled our header, navigation and main image in to our layout. Now that we have...
Responsive web design is widely thought of as a design trend, but it’s much more than that. It is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions, and platforms, be it a computer, tablet or mobile device. It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time. In this tutorial, we take a look at what responsive web design entails for the developer....
Last week we discussed how important navigation is to a website and how developing an interactive navigation system will help give a clean, minimalist website a bit of character and make it feel modern and current. It’s too easy to make a clean website look dated and as though it were developed in the 90’s, so by injecting modern user interfacing techniques that are popular today you’re able to put the viewer at ease and reassure them that the content is fresh and up to date. We’ll pick up where...
There is one design style that can withstand the fluctuating trends that come and go in the design world, and that is to have a clean, simple, minimalist site. Think of sites like Apple, Amazon, and The New York Times. One thing you will notice that they all have in common is perfectly executed use of white space. However, there are some very subtle guidelines to follow or tips that you should consider when designing your own clean website. This tutorial will take you through the development process and...
Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005. But it wasn’t until the release of HTML5 that web developers have had a lightweight solution to playing the video. In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video. This was one more thing that would weigh down your site, causing pages to load slower, and be one more thing you’d...