    
|
|
|
 |
If you code websites, it’s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you’ll need a strategy to make images flexible, too — a responsive image solution.
The basics are fairly simple to learn, but once you’ve mastered them, you’ll find that scaling images is only the beginning — you might also have performance and art direction conundrums to solve. You’ll be faced with a wide field of responsive image solutions to choose from, each with its own strengths and weaknesses — and none of them is perfect! This article leads you through the basics, and then arms you with the information you’ll need to pick the best responsive image solution for your situation.
Styling foreground images to adjust to the width of their container is very easy. In your style sheet, perhaps in your normalize or reset style sheet, you’d add the following code:
img {
max-width: 100%;
}
In most cases, that tiny style rule will do the trick! Once it’s in place, if the container around the image becomes narrower than the width of the image, then the image will scale down to match the width of its container. Setting the max-width to 100% also ensures that the image does not scale larger than its actual size, which would significantly reduce the image’s quality. If you’re still stuck providing support for IE 6 or 7, you’ll want to add a width: 100% style rule targeted only to those browsers, because they don’t understand max-width.
High-resolution “Retina” images can make this basic implementation a bit tricky. Let’s say you want your 150 × 150-pixel logo to display at double the usual pixel density, and the image is small enough that having two separate versions wouldn’t be a problem. So, you create a 300 × 300-pixel version of the logo and plug it in — and now it’s huge! Your first inclination is probably to try something like this in CSS:
img.sitelogo {
max-width: 150px;
}
Unfortunately, this doesn’t work as expected — the logo image will now refuse to scale nicely with the other images on the page.
To limit the maximum width of an adaptive image, you’d have to limit the maximum width of the image’s container, rather than of the image itself! Let’s say you’ve wrapped your logo image in a module with a class of branding. Here is the style that will do the trick:
.branding {
max-width: 150px;
}
So, now we have scalable responsive images in our website’s fluid layout. Mission accomplished. Time to go find out what this strange “outdoors” place has to offer to a sun-starved developer, right?
Not so fast! We still have two main challenges to overcome.
With the responsive image solution outlined above, all devices are fed the same images. Small icons and logos might not be too bad, but the problem compounds quickly as the images get larger and heftier. Retina images exacerbate the problem — you don’t want to send a big Retina image to a device that isn’t capable of displaying its full detail!
Think about it. Should we really be sending a 990 × 300-pixel 100 KB image meant for desktop viewers to a mobile phone? Sure, the mobile visitor might be on their local coffee shop’s Wi-Fi connection — however, they might be on the road trying to get crucial information from your website, with one shaky bar of wireless service. Every mobile user who gives up when your page takes too long to load is a potential customer lost!
Many mobile websites that are just as big or bigger than their desktop counterparts can be found in the wild today. Guy Podjarny ran some tests a year apart, and there hasn’t been much improvement: in 2011, 86% of websites were the same size or larger, and in 2012 that number went down to 72%, but the overall sizes of websites increased. Dave Rupert also captured the problem beautifully in his article “Mo’ Pixels Mo’ Problems.”
When I first began wrestling with performance issues on responsive websites, my initial thought was to put all of the image variations on the page, and set up some CSS classes with media queries that would hide big images and show small images at small widths, and vice versa at desktop widths. It seemed logical: shouldn’t the browser only download the visible images?
The problem is that browsers are too quick for us! In order to provide the fastest loading time possible, browsers preload all of the images that they can identify in the source code before any CSS or JavaScript is processed. So, this approach would actually penalize mobile visitors more, by forcing them to download all of an image’s variants!
Because of this preloading, most solutions require either a back-end solution (to preempt the preloading) or special markup and JavaScript.
The last piece of the performance puzzle is network speed. We know that we want to feed only the large images to devices that are on a speedy network, but how do we determine that? A few techniques are out there to estimate network speed, but they aren’t foolproof yet.
The W3C has been working on a Network Information API, which could be very helpful in future, but currently it’s supported by only a handful of devices (and not the big ones, unfortunately). It is currently implemented in a few responsive image solutions, but I don’t expect it to be widely adopted until it’s more widely supported. Network measurements are difficult and as Yoav Weiss states in his Smashing Magazine’s article, reliable “bandwidth media queries” don’t seem to be something that can be accurately implemented in the near future.
Foresight.js by Adam Bradley uses JavaScript to test how long the browser takes to download a 50K image, then stores that information and uses it to make bandwidth decisions. It does have a few small drawbacks: it does add a 50K image download to your page, and it can block download of other images on your page until the test image download is complete. Many of the responsive image solutions that currently implement bandwidth detection use a variation or adaptation of Foresight.js.
Let’s say you’ve got a beautiful wide image on your home page. It shows a wide bucolic expanse of fields and forest, blue sky and fluffy clouds above, and a happy family having a picnic on the grass.
Now scale it down to 300 pixels wide, mobile-style. At this scale, our vacationing family looks more like the ants at the picnic!
Detail is lost when this large image is scaled down. (Image: Mark McQuitty)
Herein lies what we call the “art direction” problem. Some images just don’t scale well; fine detail is lost, and dramatic impact is reduced. In the case of our hero image, it would be much nicer visually if the mobile version of the photo was zoomed in, cropped and focused on our happy family. To solve this problem, we need a responsive image solution that enables you either to specify different versions of the image for different situations or to adjust the image on the fly.
Sometimes a different crop or zoom of the image is desirable for narrow widths. (Images: Mark McQuitty)
Luckily, the web development and design community has no shortage of creative, smart people who have been working to solve these problems. Of course, the flip side of that coin is that it’s easy to get overwhelmed by the sheer number of responsive image solutions out there. How do you decide which is best for you?
Choosing between them can be an extremely complicated matter, because so many factors come into play. No current solution is perfect for every situation; each was designed to solve a particular set of problems. To decide, you’ll need to weigh each solution against your project’s particular needs. Chris Coyier has done a great job of summarizing the deciding factors (including a spreadsheet to track them all, although some newer solutions aren’t mentioned).
Here are some factors to consider:
With this in mind, let’s look at some responsive image solutions that have been out there for a while and that are widely used within the developer community.
Please note: The list of solutions below is by no means comprehensive. They are the ones either that I’ve found most useful personally or that have proven track records for reliability. Have a favorite solution of your own that’s not here? Let us know in the comments!
The Web is truly worldwide, and we have to confront the fact that not everyone has access to fiberoptic connections and 4G networks. Scott Jehl encountered this digital divide first-hand while travelling and working his way through Southeast Asia, and he is a strong advocate of mobile-first and responsive websites that don’t put an undue burden on mobile users. His Picturefill script is a polyfill for the proposed <picture> element — JavaScript code that mimics the picture API, enabling us to use it on our websites today. The future is now, baby!
Picturefill does not require jQuery, but obviously it does require the picturefill.js script to be included somewhere in the page. Picturefill also requires some special markup, with divs to represent the image variations, differentiated by data-media attributes that act just like media queries in CSS. You may also optionally put an image in conditional comments for browsers that don’t support media queries (I’m looking at you, IE 8), and a fallback in a <noscript> tag for browsers that don’t have JavaScript enabled (I’m looking at you, BlackBerry).
Here’s an example of a typical Picturefill setup:
<div data-picture data-alt="Descriptive alt tag">
<span data-src="images/myimage_sm.jpg"></span>
<span data-src="images/myimage_lg.jpg" data-media="(min-width: 600px)"></span>
<!--[if (lt IE 10) & (!IEMobile)]>
<span data-src="images/myimage_sm.jpg"></span>
<![endif]-->
<!-- Fallback content for non-JS browsers. -->
<noscript>
<img src="images/myimage_sm.jpg" alt="Descriptive alt tag" />
</noscript>
</div>
That’s all you need to display adaptive images at page-loading time using Picturefill. Drop in the script, configure the markup, and everything just works. You can also call Picturefill programmatically if you need to add images to the page on the fly.
Picturefill requires a lot of custom markup, so it might not be the best choice for those who cannot alter their website’s source code for any reason. It also doesn’t do any bandwidth detection. If bandwidth detection is important to your project, then have a look at this next solution.
HiSRC, by Marc Grabanski and Christopher Schmitt, is a jQuery plugin that enables you to create low-, medium- and high-resolution versions of an image, and the script will show the appropriate one based on Retina-readiness and network speed.
To set it up, first make sure that jQuery and the HiSRC script is included somewhere on the page.
In your HTML code, first add a regular image tag to the page, and set the source to be the low-resolution (or smallest) version of the image. Add a class to the image or its wrapper (like .hisrc) to specify which images HiSRC should process. Then, add some special markup to your image tag: data-1x and data-2x attributes, pointing to the medium- and high-resolution versions, respectively. For example:
<img src="http://placekitten.com/200/100" data-1x="http://placekitten.com/400/200" data-2x="http://placekitten.com/800/400" class="hisrc" />
Then, after the DOM has loaded, just call the function on the image class that you’re using, like so:
$(document).ready(function(){
$(".hisrc").hisrc();
});
In practice, the browser will first load the image source — i.e. the mobile version of the image. Then, the script checks to see whether the visitor is using mobile bandwidth (such as 3G). If so, it leaves the mobile-first image in place. If the connection is speedy and the browser supports a Retina image, then the @2x version is delivered. If the connection is speedy but Retina is not supported, then the @1x version is delivered.
You might have noticed that the low-resolution image always loads, even if the script later decides that the user’s device is a good candidate for high resolution. Even though this is technically a double-download, it only penalizes those on speedy connections. I’m willing to accept that compromise!
HiSRC can handle images that are added to the page dynamically. It also allows for multiple images, so you can specify different crops and sizes to beat the art-direction problem.
As for weaknesses, HiSRC does require jQuery, so it won’t be useful unless you’re using that library. It also requires custom markup in the HTML, so it might not be the best choice if you have a huge website with a lot of legacy images or a CMS in which the output of the image tag can’t be altered. If that’s your situation, read on!
Unlike the previous two scripts, Adaptive Images, by Matt Wilcox, is mostly a server-side solution. It requires a tiny bit of JavaScript, but the real work is done via the Apache 2 Web server, PHP 5.x and the GD library.
To install it on your Web server, you’ll need to alter or add an .htaccess file, upload some PHP files to your website’s root directory, add some JavaScript to your pages (which will add a cookie to record the user’s screen resolution), and configure some breakpoint variables in the PHP files to match your website’s media queries.
The installation instructions are quite verbose — a bit too lengthy for the scope of this article. For more information, visit the official website and click the “Details” link at the top.
The best feature of Adaptive Images is that it requires no custom markup on any of your images. Once you’ve installed and configured it correctly, you’re all set! The PHP script will intercept any request for an image and will resize it on the fly as needed to your specified breakpoint sizes and serve it on your pages automatically.
The PHP has a lot of configurable options, such as image quality, breakpoints, caching, and even a sharpening filter to apply to the generated scaled images.
It has a few limitations:
.htaccess file). So, if your images are hosted elsewhere, such as on a content delivery network, then it won’t work.You may have noticed that all of the solutions thus far require JavaScript, and often some detailed configuration. If you’re looking for one that doesn’t require JavaScript and that is fairly simple to implement, then have a look at this next one.
Previously known as TinySrc, Sencha.io Src is a third-party solution that acts as a proxy for images, so you don’t need to configure anything on your server. Just point your image at Sencha’s servers (with or without some options specified), and Sencha will process it and send back a resized version as needed.
Let’s say you have a big image:
<img src="http://www.your-domain.com/path/to/image.jpg" alt="My large image" />
At its simplest, you’d just prefix the src attribute with http://src.sencha.io/, like so:
<img src="http://src.sencha.io/http://www.your-domain.com/path/to/image.jpg" alt="My large image" />
By default, Sencha.io will resize your image to fit the width of the device’s screen, using the user-agent string for detection. Phones might be sent a 320-pixel-wide image, tablets a 768-pixel-wide image, etc.
You can also configure the Sencha.io prefix string to return particular measurements, orientations, percentage sizes or any number of complex calculations.
Sencha.io is a free service for individual users and can be a very convenient adaptive image solution. However, you’re adding a third-party dependency, with the possibility of downtime and problems beyond your control. Weigh these risks carefully.
The solutions outlined till now are usable today, but they’re not the only fish in the sea. Some newer solutions show a lot of promise, and I’m keeping a sharp eye on them to see how they evolve with current Web technology. Below are two in particular that you might want to watch.
Capturing is a new feature of the in-development Mobify.js 2.0, which proposes to give you access to (or to “capture”) the HTML source markup before it is parsed or rendered by the browser. Accessing the source code at this stage enables you to swap an image’s src attribute before the browser downloads it. You can even craft a fallback to one of the other solutions, such as Picturefill, in case something fails.
Since this technique directly circumvents native browser preloading, it is a bit controversial in web performance circles. If misused, it could actually create performance problems on a site instead of alleviating them!
The other thing holding me back from running to this solution with open arms is its cross-browser support. Capturing won’t work in any version of IE lower than 10, so IE 8 and 9 users will be left out in the cold. I’ll keep watching, though — down the road a ways, when IE 8 and 9 finally fade into the sunset, this solution might be more viable!
If you’re interested in finding out more about Capturing, the Mozilla team goes into more detail in its blog post, “Capturing: Improving Performance of the Adaptive Web.”
ReSRC.it is another third-party solution (currently in beta) that delivers responsive images from the cloud. It seems to be very similar in implementation to Sencha.io Src, but adds image filters and bandwidth detection and doesn’t rely on user-agent detection or cookies.
To get started, you first need to sign up for a free beta account.
Then, suppose you have an image like this:
<img src="http://path/to/image.jpg" alt="My large image" />
You would prefix the image source’s URL with a path to one of ReSRC.it’s servers (it currently has two servers, one for the US and one for the UK):
<img src="http://app.resrc.it/http://www.your-domain.com/path/to/image.jpg" alt="My large image" />
ReSRC.it allows you to add parameters to the requested URL to perform operations on the image, such as rotating, cropping and flipping. This allows for quite a bit of flexibility and potentially addresses the art-direction problem. The parameters are processed in order from left to right and can be strung together.
Here’s an example of an image that’s being flipped horizontally, resized to 300-pixels wide, with the resulting image optimized to an 80%-quality JPEG:
<img src="http://app.resrc.it/F=H/s=w300/o=80/http://www.your-domain.com/path/to/image.jpg" alt="My large image" />
ReSRC.it can be a very flexible solution to the Art Direction problem; however, since image sizes are controlled by URL parameters, ReSRC.it needs to be paired with something like Picturefill in order to create a fully responsive solution.
Because ReSRC.it is currently in beta, it may not be the best solution to try out on a big website. It looks like the vendor will be offering various account levels once it’s out of beta (free, pro and enterprise), so it’s not clear how much of the functionality will continue to be free once it launches. Although one never knows — sometimes, being an early adopter and beta tester has its rewards!
After you’ve chosen and implemented a responsive image solution, testing the performance of your website is absolutely necessary to making sure that the solution is working well. Below are a few useful online testing tools to help you.
Created by Yahoo, YSlow is a client-side tool that analyzes your website against 23 testable rules that Yahoo has determined can adversely affect Web page performance. YSlow awards your website a grade for each rule, explaining each one and suggesting how to improve your website’s performance. YSlow is available for Firefox, Chrome, Safari and Opera (as well as by a few other means, such as the command line).
The online tool WebPageTest is an open-source project maintained by Google. You enter your website’s URL, perform a speed test from a chosen location, and specify which browser to use. Advanced settings allow you to perform multi-step transactions, pick a network speed (cable, DSL, FiOS, etc.), disable JavaScript, block ads and make other requests, and more. The results come in the form of tables, charts, screenshots, a performance review and a lot of great data to dig into!
The Yottaa blog has an article detailing how they used WebPageTest to test out their website both with and without responsive image loading — check it out!
If you read Smashing Magazine, you’re probably already on board with creating the best possible website experience for your audience. So, the next time you craft a beautiful, usable experience for mobile visitors, try out one of these responsive image solutions and take your website the extra mile. Your mobile visitors will thank you!
(al)
© Sherri Alexander for Smashing Magazine, 2013.
]]>
If done correctly, minimalist design is one of the best and most effective approaches to creating beautiful websites. Not only is the target audience subjected to less clutter and noise, but you can use colors, textures, and fonts to create a very simple yet very memorable experience for the person viewing your site.
Of course, switching to a minimalist design will mean that you only have a select few pages of information, but the result is desirable on multiple levels. Creating a mobile-friendly site will become loads easier, your audience will find your content easier to read, and your site will look more professional.
Read on to learn more about why minimalism works, and how to apply this beautiful approach to your designs.
This famous saying by Ludwig Mies van der Rohe is the ultimate representation of minimalism. These three words of wisdom really get the message across, while being concise and to-the point.
Likewise, a de-cluttered website can get your point across more efficiently. Many designers/developers use this ideology and “prune” their content, effectively cutting away useless, less visited, and unimportant pages, leaving sites left with higher quality content.
Not only will your website look clean, it will also be higher-quality and more refined.
Subconsciously we are growing more and more defensive to clutter and distractions. Every day, we receive dozens, if not hundreds, of business advertisements through spam, mail, newspaper inserts, internet ads, radio and TV commercials and more. This surge in advertising has caused people to learn how to avoid annoying ads.
Flipping channels during commercial breaks or clicking the “Back” button from an ad-filled website has never been easier. As web designers, we should keep in mind that not only is extra ad clutter on our websites distracting to users, it is also bad for SEO.
All good minimalist websites have a unique wireframe and a really good grid system. If utilized correctly, both of these can translate to a painless and easy transition to the responsive and mobile world.
With less content, fewer blocks and design elements, and a whole lot of whitespace, it won’t be hard to move things around for mobile device screens.
Furthermore, mobile users tend to have less patience. They are busy people who are either on-the-go, limited by data plans, working a hectic schedule, or all of the above. Getting concise, clear, and useful information as fast as possible is usually their expectation, so why not give it to them?
Having only a few pages with a minimal amount of text will mean a lighter website. Not only can this make the task of updating, and maintenance easier, it will also speed up your site.
The less content, widgets, and design elements you use, the less data has to be transferred, making a faster, lighter, and hence more enjoyable, user experience. And it helps with the data limits issues for mobile devices.
It’s no secret that implementing a minimalist style is much easier if you already have a pretty good foundation of design itself. A solid understanding of grids and layouts, and an expertise and finesse in applying that understanding can go a long way when designing minimalist websites, however a lack of these things should not stop you from learning this beautiful style.
If you are interested in adopting a minimalist approach for your designs, there are a few simple guidelines to follow.
First of all, you must minimize your content. Throw away as much as you possibly can. If you can remove it and it doesn’t significantly undermine the main message you are trying to get across, it’s probably junk.
One good piece of advice for those attached to their content is: Temporarily hide the content for 30 days. Don’t go back and read that content or remind yourself about it. After 30 days if your life is not in a state of absolute crisis, you are free to throw the content away.
One way to go about getting rid of and/or simplifying content is to review the usual culprits of lower-quality content:
Finally, when your content is minimized and you have stripped your site to the bare minimum, you must style it. Remember, minimalism is not about looking plain or boring, it’s about focusing your attention on the essentials. Having an attention-grabbing and consistent layout is key. The proper colors, typography, textures, and whitespace are also essential to your minimalist goals.
Converting to minimalism doesn’t have to be a chore. Think of it as a way to give your site a fresh look with new textures, interesting colors, and captivating fonts. After all, with less content to worry about, you’ll have more time to tone and master the look and feel that will attract an audience, and keep them.
Using textures in web design is the greatest thing since sliced bread. When used in conjunction with appropriate colors, fonts, and a simple layout, textures can really make your website shine.
If you are completely new to textures, it would definitely be worth your time to read up on how to create them in Adobe Photoshop, how to apply them, and the different types of textures.
Similarly, colors present an invaluable medium to present your website. Take caution, though, as colors and their associations can vary from culture to culture. Yellow, for example, may represent mourning when used in Egypt, while it may represent courage when used in Japan. With minimalist type designs, or any design really, having only 2 or 3 colors on your website is a good idea as this provides a consistent and simple experience for the user.
Finally, good fonts are truly vital when using a minimalist design.
Of course you don’t have to splurge on dozens of fonts; you could consider creating your very own fonts. Some designers even go to the extreme of having the typography become the sole visual effect of their website. While this is an interesting trend, it can be harder to pull off as it requires a complete mastery of typography.
This article has only scratched the surface when it comes to the principle of minimalism and its uses and benefits in respect to web design. I hope it has caused interest for those who are still not applying some of these techniques.
Although minimalism doesn’t work for all websites, the principles of discarding low-quality and or less valuable features of your website can be useful for all web designers and developers. Less really is more.
Do you take a minimal approach to design? Do you find minimal sites cold? Let us know in the comments.
Featured image/thumbnail, minimalism image via Shutterstock.
| Nexa Slab Font (24 styles) – only $9! |  |
|
|
If done correctly, minimalist design is one of the best and most effective approaches to creating beautiful websites. Not only is the target audience subjected to less clutter and noise, but you can use colors, textures, and fonts to create a very simple yet very memorable experience for the person viewing your site.
Of course, switching to a minimalist design will mean that you only have a select few pages of information, but the result is desirable on multiple levels. Creating a mobile-friendly site will become loads easier, your audience will find your content easier to read, and your site will look more professional.
Read on to learn more about why minimalism works, and how to apply this beautiful approach to your designs.
This famous saying by Ludwig Mies van der Rohe is the ultimate representation of minimalism. These three words of wisdom really get the message across, while being concise and to-the point.
Likewise, a de-cluttered website can get your point across more efficiently. Many designers/developers use this ideology and “prune” their content, effectively cutting away useless, less visited, and unimportant pages, leaving sites left with higher quality content.
Not only will your website look clean, it will also be higher-quality and more refined.
Subconsciously we are growing more and more defensive to clutter and distractions. Every day, we receive dozens, if not hundreds, of business advertisements through spam, mail, newspaper inserts, internet ads, radio and TV commercials and more. This surge in advertising has caused people to learn how to avoid annoying ads.
Flipping channels during commercial breaks or clicking the “Back” button from an ad-filled website has never been easier. As web designers, we should keep in mind that not only is extra ad clutter on our websites distracting to users, it is also bad for SEO.
All good minimalist websites have a unique wireframe and a really good grid system. If utilized correctly, both of these can translate to a painless and easy transition to the responsive and mobile world.
With less content, fewer blocks and design elements, and a whole lot of whitespace, it won’t be hard to move things around for mobile device screens.
Furthermore, mobile users tend to have less patience. They are busy people who are either on-the-go, limited by data plans, working a hectic schedule, or all of the above. Getting concise, clear, and useful information as fast as possible is usually their expectation, so why not give it to them?
Having only a few pages with a minimal amount of text will mean a lighter website. Not only can this make the task of updating, and maintenance easier, it will also speed up your site.
The less content, widgets, and design elements you use, the less data has to be transferred, making a faster, lighter, and hence more enjoyable, user experience. And it helps with the data limits issues for mobile devices.
It’s no secret that implementing a minimalist style is much easier if you already have a pretty good foundation of design itself. A solid understanding of grids and layouts, and an expertise and finesse in applying that understanding can go a long way when designing minimalist websites, however a lack of these things should not stop you from learning this beautiful style.
If you are interested in adopting a minimalist approach for your designs, there are a few simple guidelines to follow.
First of all, you must minimize your content. Throw away as much as you possibly can. If you can remove it and it doesn’t significantly undermine the main message you are trying to get across, it’s probably junk.
One good piece of advice for those attached to their content is: Temporarily hide the content for 30 days. Don’t go back and read that content or remind yourself about it. After 30 days if your life is not in a state of absolute crisis, you are free to throw the content away.
One way to go about getting rid of and/or simplifying content is to review the usual culprits of lower-quality content:
Finally, when your content is minimized and you have stripped your site to the bare minimum, you must style it. Remember, minimalism is not about looking plain or boring, it’s about focusing your attention on the essentials. Having an attention-grabbing and consistent layout is key. The proper colors, typography, textures, and whitespace are also essential to your minimalist goals.
Converting to minimalism doesn’t have to be a chore. Think of it as a way to give your site a fresh look with new textures, interesting colors, and captivating fonts. After all, with less content to worry about, you’ll have more time to tone and master the look and feel that will attract an audience, and keep them.
Using textures in web design is the greatest thing since sliced bread. When used in conjunction with appropriate colors, fonts, and a simple layout, textures can really make your website shine.
If you are completely new to textures, it would definitely be worth your time to read up on how to create them in Adobe Photoshop, how to apply them, and the different types of textures.
Similarly, colors present an invaluable medium to present your website. Take caution, though, as colors and their associations can vary from culture to culture. Yellow, for example, may represent mourning when used in Egypt, while it may represent courage when used in Japan. With minimalist type designs, or any design really, having only 2 or 3 colors on your website is a good idea as this provides a consistent and simple experience for the user.
Finally, good fonts are truly vital when using a minimalist design.
Of course you don’t have to splurge on dozens of fonts; you could consider creating your very own fonts. Some designers even go to the extreme of having the typography become the sole visual effect of their website. While this is an interesting trend, it can be harder to pull off as it requires a complete mastery of typography.
This article has only scratched the surface when it comes to the principle of minimalism and its uses and benefits in respect to web design. I hope it has caused interest for those who are still not applying some of these techniques.
Although minimalism doesn’t work for all websites, the principles of discarding low-quality and or less valuable features of your website can be useful for all web designers and developers. Less really is more.
Do you take a minimal approach to design? Do you find minimal sites cold? Let us know in the comments.
Featured image/thumbnail, minimalism image via Shutterstock.
| Top-Selling Vintage Veneer Font Family – only $9! |
|
The first few things you do after a potential client contacts you about a web design project are the most important. In fact, these initial steps can spell the difference between a good or bad project.
There’s plenty of information out there on how to identify bad clients and manage difficult situations. You may even have your own client horror stories of your own.
While it’s true that bad client situations sometimes can’t be avoided — it’s an inherent part of working with other people, after all — many of these situations are just simply the result of lack of communication and understanding.
Fortunately, if you create a good, thorough project scope statement, it will surely improve communication with your clients as well as eliminate many website production problems.
One of the important initial project tasks we need to do is defining the project scope.
A poorly crafted project scope statement results in miscommunication and wasted project time.
Project scope, in essence, defines what the deliverables for the project are going to be.
A good project scope should clearly and unambiguously state the client’s expectations, and it should describe how you have agreed to meet those expectations.
When something is added to a project’s scope, we call it scope creep.
Too much scope creep results in lots of unnecessary work.
Many web designers and developers are too casual about project scope. They fail to get the whole scope of the project before they start working on it, and this can mean lots of reworking and retooling all throughout the span of the project.
"Introducing ‘Feature Creep’, the nefarious designer arch-enemy." Source: blog.fueledbycoffee.com
A lot of scope creep means the project scope wasn’t properly defined and clearly stated at the beginning of the project.
Here are three common mistakes web designers make when they define scope:
Not getting the agreement in writing.
Scope should be included in a written agreement between you and the client. Scope should be reviewed and signed by both parties before you start the project.
Not asking enough questions.
Often, scope is incomplete and the web designer/developer didn’t ask the client for enough information to really understand the project requirements.
Making too many assumptions.
Assumptions are like guesses; sometimes they’re right, but often they’re wrong. A good project scope statement eliminates any assumptions.
The best way to develop a good project scope is to ask the right questions.
Here are some questions you can ask your clients during initial discussions that will help you produce a solid project scope.
Question #1: What type of website will I be building for you?
A landing page, a blog, and an e-commerce site all need good web design but your strategy, production process, planning process, project requirements, project time, techniques, and so forth will change depending on the type of site you’re creating.
Question #2: When do you need to have this website completed?
Misunderstandings about the deadline can be a big source of client unhappiness. Make sure you have enough time to do the work they want you to do.
Question #3: What is your budget for the project?
This question tells you what the client can afford to spend on this project, as well as if they are a serious prospect for your web design business.
Budget affects the size and features that will be defined in the project scope.
Determine the Constraints of the Project
The three questions above will help you determine the three primary constraints — scope, schedule, and cost — of the project management triangle model that will cooperatively determine the quality of the results.
Here are the not-so-obvious questions that you might forget to ask:
Question #4: Who is the typical user of your website?
A website that works well for one audience will not necessarily work well for another audience. The target audience will significantly influence the website’s architecture.
Question #5: What goals do you want to achieve with this project?
Is the client trying to use the website for sales, to generate publicity, or to build an online community?
Website goals make a big difference in how you will proceed with the website’s design.
Question #6: What types of content will be used in this website?
Content strategy should not be an afterthought. Content strategy should be an integral part of your web design process.
If your client hasn’t planned for their website’s content yet, at the very least, you should get them thinking about it right at the start of the project.
This question also clarifies who’s going to be in charge of content, and you should document this area of responsibility in your project agreement.
Question #7: Can you show me examples of websites you like and don’t like?
Examples can speak volumes. Pay close attention to why the client likes some sites while disliking others.
Question #8: What’s the message you’re trying to convey with your website?
The website’s message needs to be clearly communicated through the site’s look-and-feel.
The answer to this question also affects the website features that you need to implement.
Ask More Questions as Needed!
Of course, the list of eight questions above is just a starting place to help you define project scope; they cover the fundamentals that you absolutely must know before beginning the project.
If you still feel like you don’t fully understand what the client wants after asking these questions, you need to ask more questions until you’re confident that you comprehend their desired outcomes in full.
What’s negative scope? In a project’s scope, negative scope are items that won’t be a part of the project.
Discussing and documenting negative scope items can eliminate a lot of confusion and misunderstandings.
Negative scope could include these things:
By specifically bringing up negative scope items, you reduce the likelihood of the client assuming that these items are included in the project and of them claiming that the negative scope items were part of your agreement.
Negative scope brings more clarity to your project scope agreement, which is what we want.
Even if you asked all the right questions, you could still get into trouble if you don’t have a good record of the discussions that you and the client agreed upon.
Maybe you discussed the project in a series of phone conversations with the client. Maybe you met with the client in person.
Do you rely solely on your memory of what you and the client agreed on? If you do, you’re taking a huge risk.
Our memories can be faulty. Our recollection of conversations can be different from that of the client’s.
The best way to eliminate disagreements about project scope is to get it in writing and to get the client to sign off on it.
Fortunately, there are some good tools and resources out there to help you document project scope well.
There are, for example, project scope document templates that can be found on the Web. Here’s one example of a project scope template that you can download on another website:
You could also check out my web app, Osmosis, which incorporates project scope into the work agreement.
Find more tips on freelance web design contracts here.
Once you have the client’s acknowledgement on the work agreement, keep the information with your project files.
How do you define your web design project scope? What are some key questions you ask your clients that help you define the project scope? Share your experiences in the comments below.
Dominic St-Pierre is the owner and founder of Osmosis, an innovative web-based tool to help web designers, web developers, and other freelancers gather project requirements and create proposals. He has over thirteen years of experience as a web developer and entrepreneur. Connect with him on Twitter at @getosmosis.
The post Improve Your Web Design Projects with a Good Project Scope appeared first on Six Revisions.
]]>Page added by Susan Dawson
You can select from a variety of options, each with their own fees. The options and transcript processing fees for each are:
Regular Service – Official Mailed $8.00 Per Recipient
Regular Service- Official Pick up $8.00 Per Recipient
Fax transcript (US fax numbers ONLY) $8.00 Plus $15.00 ($23.00)
PDF $8.00
Expedited Fees:
Domestic Federal Express to Main 48 states $16.50 Per Recipient
Domestic Federal Express to Alaska or Hawaii $19.50 Per Recipient
International Federal Express $35.50 Per Recipient
Direct all mail/communication to:
Angela Blair
Academic Program Specialist
Transcript Processor
Was this helpful? Yes | No | Correct or Suggest an Article | Request Help
Page added by Susan Dawson
In order to allow someone else to pick up your transcript for you, you must send an authorization via your umbc email account. In the email, please include your order number, name, birthdate or student Id., and the name of the person that will pick up your transcript.
Was this helpful? Yes | No | Correct or Suggest an Article | Request Help
Page edited by Susan Dawson
Page edited by Susan Dawson