This excerpt references lesson files, which are available with the purchased book. The basics of webpage design How to create page thumbnails and wireframes How to use Photoshop to generate site image assets automatically This lesson will take about 45 minutes to complete.
Whether you use thumbnails and wireframes, Photoshop, or just a vivid imagination, Dreamweaver can quickly turn your design concepts into complete, standards-based CSS layouts. Developing a new website Before you begin any web design project for yourself or for a client, you need to answer three important questions: What is the purpose of the website? Who is the audience?
How do they get here? Will the website sell or support a product or service? Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit card payments or electronic transfers? Is the audience adults, children, seniors, professionals, hobbyists, men, women, everyone? Knowing who your audience will be is vital to the overall design and functionality of your site.
A site intended for children probably needs more animation, interactivity, and bright, engaging colors. Adults will want serious content and in-depth analysis.
Seniors may need larger type and other accessibility enhancements. A good first step is to check out the competition. Is there an existing website performing the same service or selling the same product?
Are they successful? Click to view larger image How do they get here? This sounds like an odd question when speaking of the Internet. But just as with a brick-and-mortar business, your online customers can come to you in a variety of ways.
For example, are they accessing your site on a desktop computer, laptop, tablet, or cellphone? Are they using high-speed Internet, wireless, or dial-up service? What browser are they most likely to use, and what is the size and resolution of the display? These answers will tell you a lot about what kind of experience your customers will expect.
Dial-up and cellphone users may not want to see a lot of graphics or video, whereas users with large flat-panel displays and high-speed connections may demand as much bang and sizzle as you can send at them. So where do you get this information? But a lot of it is actually available on the Internet itself. W3Schools, for one, keeps track of tons of statistics regarding access and usage, all updated regularly: In , they started to track the usage of mobile devices on the Internet.
If you are redesigning an existing site, your web-hosting service itself may provide valuable statistics on historical traffic patterns and even the visitors themselves.
If you host your own site, you can incorporate third-party tools, such as Google Analytics and Adobe Omniture, into your code to do the tracking for you for free or for a small fee. Click to view larger image Analytics provides comprehensive statistics on the visitors to your site. Google Analytics, pictured here, is a popular choice.
As of the fall of , Windows still dominates the Internet 80 to 85 percent , with most users favoring Google Chrome 60 percent , followed by Firefox 21 percent , with various versions of Internet Explorer 7 percent a distant third. The vast majority of browsers 99 percent are set to a resolution higher than pixels by pixels.
But designing a website that can look good and work effectively for both flat-panel displays and cellphones is a tall order. Responsive web design Each day, more people are using cellphones and other mobile devices to access the Internet.
Some people may use them to access the Internet more frequently than they use desktop computers. This presents a few nagging challenges to web designers. For one thing, cellphone screens are a fraction of the size of even the smallest flat-panel display. How do you cram a two- or three-column page design into a meager to pixels?
Another problem is that mobile device manufacturers have dropped support for Flash-based content on their devices.
Until recently, web design usually required that you target an optimum size height and width in pixels for a webpage and then build the entire site on these specifications. Today, that scenario is becoming a rare occurrence. Now, you are presented with the decision to either build a site that can adapt to displays of multiple different dimensions responsive or build two or more separate websites to support desktop and mobile users at the same time adaptive.
Your own decision will be based in part on the content you want to provide and on the capabilities of the devices accessing your pages. Building an attractive website that supports video, audio, and other dynamic content is hard enough without throwing in a panoply of different display sizes and device capabilities. The term responsive web design was coined, in a book of the same name , by a Boston-based web developer named Ethan Marcotte; he describes the notion of designing pages that can adapt to multiple screen dimensions automatically.
As you work through the following lessons, you will learn many techniques for responsive web design and implement them in your site and asset design.