Web Design Dev » Web Development

How to use checkboxes and radio buttons in Flash

Iggy — Fri, 03 Feb 2012 14:40:33 +0000

When you are developing rich and interactive applications in flash, you need to provide the best communication between the user and the application. Flash has some very easy to implement UI components that you can use with your applications. These components will save you from the hassle of designing and programming the User Interface. In this tutorial I am going to show you how to implement the radio button and the checkbox component in your applications. It is important that you know a little bit of ActionScript 3.0 before you begin this tutorial.

Start by creating a new ActionScript 3.0 document in Flash. You can find the UI components in the components window. Press ctrl+F7 to open the components window and drag some radio buttons and checkboxes to stage.

I have dragged 3 of each to stage.

At this point these are pretty generic components but you can see that they are visually perfect, the only visual details that need to be changed are the text. If you press ctrl+ENTER to test the movie at this time you can click on these and see that they really work.

Now lets change some of the settings of these components. Select any of the components and head over to the “Component Parameters” section in the properties window. You can see some properties listed here. The properties are pretty much self-explanatory but I will explain them just in case. Lets go to the radio button’s property first.

The first thing here is the “enabled” checkbox. This would enable or disable the radio button to be selected. Group name sets the group that the radio button belongs to. A user can select one option from one set of radio buttons. The selected option specifies whether the button is initially selected or not. The value field sets a value that the radio button contains. So if a user selects this radio button then we can retrieve its value with ActionScript. At last the visible property selects whether the button is visible to the user or not. This property has some pretty limited applications.

If you head over to the checkbox component parameters you can see that all the properties are same except the label placement. This property selects the placement of label relative to the checkbox. Also note that there is not group name here. That is because there are no groups in checkboxes and each checkbox is independent.

I have labeled all the checkboxes and radio buttons with some names of foods. Now we examine the code that we need to process these components. For the code to work with these components, they need to have some variable names. I have given these the names of radio1_mc,radio2_mc,radio3_mc,check1_mc,check2_mc & check3_mc. I have also created a button that would be used to submit these values and I have named it submit_btn.

Now create a new layer for actionscript and insert the following code in it.

submit_btn.addEventListener(MouseEvent.CLICK,processButtons);

function processButtons(e:MouseEvent){

if(radio1_mc.selected){

trace(“Radio button 1 is selected”);

}

if(radio2_mc.selected){

trace(“Radio button 2 is selected”);

}

if(radio3_mc.selected){

trace(“Radio button 3 is selected”);

}

if(check1_mc.selected){

trace(“Checkbox 1 is selected”);

}

if(check2_mc.selected){

trace(“Checkbox 2 is selected”);

}

if(check3_mc.selected){

trace(“Checkbox 3 is selected”);

}

The code is pretty simple but let me explain it to you. First I add and event listener that handles the clicks on the submit button. In the event handler I check the “selected” property of all the radio buttons and checkboxes. If that is true then it means the radio button or checkbox is selected and so I trace on to the output that the radio button/checkbox is selected.

I hope you have learned how to use these UI components. Use these components to make your applications user friendly and save precious development time.

By the way, don’t forget to check out Wix, an awesome free Flash website builder.

10 World Class Athlete Websites

Scott Stanton — Fri, 06 Jan 2012 16:36:35 +0000

I have always appreciated an athlete who has their own website. Especially now days when they could call it good with a Facebook fan page, or really go above and beyond with a Twitter account. Some athlete’s are active members of charity organizations, or have their own product line, and they use their personal site as a platform to pitch and promote those organizations or products. In other words, they use it to generate revenue. Others aren’t trying to pitch anything and just want to give their fans a place to learn a little more about them. Let’s take a look at some of the better athlete websites out there.

Tom Cleverley

Tom Cleverley is not only quickly making his presence known on the football pitch, but online as well. His website allows fans to learn more about the England international and keep up to date with his accomplishments as well as what he’s up to. His site features his Twitter feed, a news section, and a monthly playlist of his favorite songs.

Bjoern Dunkerbeck

Bjoern Dunkerbeck is a world-class windsurfer with a world-class website. The Flash site features some stunning fullscreen background images, cool music, news, projects, and contact info, amongst other things.

Maria Sharipova

Maria Sharipova is not only stunning on and off the court, but on the web as well! Her personal website is packed full of content, including Facebook updates, photos, videos, news updates on her foundation, links to her various collections and products, as well as info on her sponsors.

Andres Iniesta

Hailed as one of the greatest modern day footballers, Andres Iniesta has a rather flashy Flash site to stay in touch with his fans. The site is packed full of photos, videos, news, bio and background info on the World Champion goal scorer at both club and international level. The site can also be viewed in Spanish, Catalonian or English.

Serena Williams

Serena Williams took the time to develop a site packed full of information on her and her various accomplishments. Amongst the standard, bio, pics, media, sponsor info, and contact links there is a schedule of her upcoming events, as well as a page about her foundation.

Troy Polamalu

Troy Polamalu is an American football player and a man to be feared on the field. If anyone was wondering how intimidating it may be to come face-to-face with him, you may now do so on his homepage. Along with a very stoic and intimidating background pic, Polamalu also has a store on his site where fans can buy his merchandise. You can also learn about the foundations Troy supports from his website as well.

Floyd Mayweather, Jr

Love him or hate him, Floyd “Money” Mayweather, Jr is a force to be reckoned with in the boxing world. You can access Money’s Facebook page, Twitter account and YouTube channel, as well as well as get info on the not-for-profit The Floyd Mayweather Jr, Foundation or shop his online store.

Lance Armstrong

Seven time Tour de France champion, Lance Armstrong has become a worldwide cancer awareness advocate since he gained worldwide fame as a cyclist. The site contains info on the Livestrong foundation, photos, news, pics, a bio, sponsors, and a whole lot more.

Felipe Massa

Felipe Massa is a Formula 1 driver for Ferrari with an extremely cool website. Featuring a fullscreen background image slideshow, multiple language options, and all of the standard, media, bio, and news content you’d expect. Felipe also has a fan club you can join from his site, as well as a link to the Ferrari merchandise store.

LeBron James

LeBron James has a site you must witness. A single page concept with a parallax scrolling effect that hovers over character drawings of the man himself, the site has your standard updates, and links to his social media presence. But the content gold mine comes in the way of “The LeBrons” cartoons.

There are some certain trends that you can see present throughout the majority of these sites, lots of color, emphasis on images, and basic content elements like bio, contact info, and links to social media platforms. These concepts can be applied to many other niches of web design and don’t have to be limited to athletes, the same concepts could work for artists, musicians, cooks, and many other professions.

Create a Full Page Background Image with CSS3

Scott Stanton — Thu, 05 Jan 2012 16:45:17 +0000

The other day we looked at 10 Awesome Websites With Full Screen Background Images. At the beginning of the article I had mentioned that there were a few ways of approaching this effect, some developers prefer to do it with jQuery, some with CSS, and others with Flash. In this article we’re going to take a look at how to achieve a full screen background image with CSS.

CSS3 allows us to choose between a few different values for the “background-size” property. The properties are, length, percentage, cover, and contain. The value that we’re going to use first is the “cover” value, which will scale an image to a size that will allow it to fill the content area. I would like to point out that in doing this some parts of the image may be cut off depending on the screen resolution or dimensions of the browser window. Centro Genesis is a good example. Look at how the background image displays in a widescreen browser.

Now look at how the image appears in a traditional square browser. The majority of the photo is the same, it just cuts off a piece of it in order to fill the height of the screen.

The code for this is method is really quite simple. All you have to do is insert these few lines of CSS in your external CSS file or in the head of your page.

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

That was easy. Now let’s take a closer look at what we did. With the first line we’re calling in our background image and applying some style to it, “background: url(images/bg.jpg)” is pulling up our actual image. Then “no-repeat” is telling the browser to not repeat the image, “center center” is telling the browser to center the image horizontally and vertically, and “fixed” is telling the image to fix itself in that position and not scroll with the rest of the content on the page if there is a need to scroll. After we’ve called the background image and styled it we target all of the major browsers, webkit covers Safari 5+ and Chrome, Moz is Mozilla Firefox 4+, -o is Opera, and the plain and simple background-size with no prefix takes care if IE9+.

This technique is simple and works, but you’re relying on one image to please all resolution sizes. How do you decide what dimensions to use for your one background image? If you have an image that’s 1900px wide and someone’s trying to view your site on their mobile phone, the image may take quite some time to load. But if you try to shoot the gap and go with an image that’s around 1,000px wide then the image may become pixilated and blurry to anyone viewing your site on a widescreen monitor with the resolution set to 1440px. And chances are even at 1,000px it’s still going to take that mobile viewer a while to fully load your site because of your large background image.

Before you curse the variables like screen resolution and monitor shapes that can make our jobs so frustrating at times, allow me to give you the answer you’re looking for: media queries. CSS will allow you to define different attributes for various parameters. In other words, you can set a media query that tells a browser to load a largeBG.jpg, mediumBG.jpg, or a smallBG.jpg depending on what the browser dimensions of the viewer are.

For example, rather than defining your background image within the HTML of your site let’s say you create a div for your page and assign it the id of “container”. Pretty standard. Much like we did in the first method, we’re going to assign our “container” div id with our background image, add some style, then tell it to cover. I would recommend making your “largeBG.jpg” image somewhere in the ballpark of 1440px wide to 1900px wide.

#container{
background: url(images/largeBG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Now that we’ve got the big version of our background image set, we can move on to the medium. This is a little different as we’re going to have to do a media query to tell the browser to load a smaller version of our background image. I typically set a media query for a screen resolution width of 1024, as this is the resolution of an iPad and the possibility of the viewer relying on a network rather than high speed wifi to load the page. To set a media query for 1024 you simply add this line in to your CSS.

@media only screen and (max-width: 1024px) and (orientation:landscape) {
#container { background: url(images/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

The background-size properties are somewhat optional at this point. You can’t adjust the resolution of your iPad, but you have to remember that this media query is not specifically targeting iPad’s, it’s targeting that screen resolution. Since there are surely still a large portion of web surfers on older monitors set in the ballpark of 1024×768, it’s an easy enough step to enhance their viewing experience a little more.

After defining the landscape view for iPad’s let’s make a media query for the portrait view. Depending on your image, you may want to consider putting in a cropped, taller version of your image here so that it display’s full screen without getting too distorted and pixilated. You’ll also want to adjust the positioning to make sure the image stays aligned properly.

@media only screen and (min-width: 768px) and (max-width: 991px) {
#container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

Finally, we can set another media query for mobile devices.

@media only screen and (min-width: 0px) and (max-width: 767px) {
#container { background: url(images/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

I would encourage you to play around with these tricks and leave a link to the page you’ve created in the comments section below so we can all see what you’ve come up with.

10 Awesome Single Page Websites

Scott Stanton — Wed, 04 Jan 2012 18:18:43 +0000

These days it seems like the term “webpage” and “website” are thrown around loosely, often being used interchangeably. I can’t recall how many times I’ve been in a meeting with a client and had them tell me they’d like a webpage, which I interpret as a basic, single-page website that is basically a digital business card. Something that gives them a web presence without breaking the bank, but then what they begin to describe is a fairly complex, multi-page structure, or something that I would define as a “website.” Thanks to jQuery, Java, CSS, and some good ol’ fashioned HTML, there are quite a few tricks that allow a singular webpage to function like a multi-page website. Let’s take a look at 10 Awesome Single-Page Websites.

Fandango Media Group

Fandango Media Group utilizes a very basic CSS fixed background trick to add heaps of character to how the content flows on the page. It’s not much, but it certainly gives navigating the page an edge over most other vertically scrolling sites or pages. I found it interesting that they opted to use images for a majority of their text. It certainly works, but more often than not people seemed to be concerned about their SEO, at least to some degree, and text is the best way to boost your SEO.

Bennett Feely

Bennett Feely has developed a very clever webpage for himself. I like his fixed position navigation bar at the top of the page, it’s both hidden and transparent, as to not intrude on the page too much, but enough to let you know it’s there. Bennett also a slider in his portfolio to showcase his work, and a fun CSS transition effect on his email contact link. It’s simple and minimalist, yet gives you everything you need.

HatBox

HatBox is another excellent webpage and I especially like that it’s responsive without any loss of content. I really admired how they opted for a creative icon tab navigation for their portfolio where I feel most companies would have gone with an image slider. HatBox is another example of not overwhelming the viewer with information and things to look at and click. You get what you need. The only minor critique I would give is to make the contact information a little more visible, the text for the email address is easy to overlook. Simply adding an icon in with the social media icons could do the trick.

Code Slingers

Code Slingers only has two sections, home and about. But they utilize parallax scrolling to give the page heaps of character. I’m also a fan of sites that utilize the header to put color in to a site and set the tone, then have the bottom of the header image set a single color background for the rest of the site.

CoFinery

CoFinery is another perfect example of a webpage that gives you exactly what you need, and nothing more. They have a large main image banner that helps set the tone for the site and give it a little character, along with some text explaining who they are and what they do. You’ll also find icon links to their twitter and dribble accounts. Below the belt you find the rest of the details you need, the who and what, along with contact info.

Pixelbacker

Pixelbacker reminds me of one of my favorite arcade games from the 80’s, Asteroids. The home page consists of some fun animations, with parallax scrolling asteroids in the background. The navigation system is very non-traditional and is set up more like a video game, with links placed throughout the page rather than featuring a standard navigation bar.

TM Design

TM Design isn’t the first site I’ve seen that features a full screen background image and origami on the homepage. But that’s not all this page has going for it, parallax scrolling, an easy to navigate portfolio section with multiple links rather than one decorating the middle of the page, and a footer that is more than just an afterthought round out the rest of the highlights. In fact, I really like the footer, it has a little mission statement, an image to tie the page together and all of their contact information.

Rareview

Rareview is exactly that, a rare view. They don’t rely on too many fancy scrolling or navigation gimmicks, but they don’t need it. There are some simple anchor links that quickly jump you further down the page, but that’s about it as far as a navigation system. The design is very clean, and just a basic, vertically scrolling site. It’s a timeless design that doesn’t instigate any popular trends, which means there’s no need to keep updating or redesigning the site as trends rise and fall.

Marcela Garces

ThisIsMarcela.com is a fun site to browse thanks to the color palette, animated graphics, icons, and soft textures. I enjoyed the ever-present navigation bar adorning the left side of the page. The page includes some fun facts about the designer, a healthy amount of portfolio samples, and is another great example of utilizing the footer as a design element, rather than a quick way to tie off the end of the page.

Ready When You Are

What better way to spruce up a taxi webpage than with a taxi driving through it? That’s what Ready When You Are has done, starting with a crazy driving cabby navigating through the various highlights of the page. Then, with each click, the taxi is right there behind you. This is another perfect example of giving the viewer enough content to keep them happy and encourage them to actually read it all, rather than overloading the page and overwhelming the viewer, which may cause them to leave the page without reading anything.

It’s clear from some of these examples that there is a blurred line between what constitutes as a single page, or a webpage and a website. A site may scroll left or right, giving the appearance that it’s a new page, but a quick look at the URL will show that the developer just used an anchor to take the viewer to a different section of the same page. As with developing any website, the most important thing is structure and navigation. If a viewer can’t figure out how to get around your site, or get to the information they’re licking for quickly, they’re going to get frustrated and leave. Keep that in mind if you’re planning on developing a creative, single-page, horizontally scrolling page.

10 Awesome Websites With Full Screen Background Images

Scott Stanton — Tue, 03 Jan 2012 12:22:14 +0000

10 Awesome Websites With Full Screen Background Images

When it comes to web design my tastes walk on a very thin line. I like simplicity and visual stimulation, which is a very difficult balance to pull off. However, one of the easiest ways to do so is by featuring a full screen background image on your site. Accomplishing this feat is not as easy as it may sound once you take in to consideration all the different sized monitors and screen resolutions out there, not to mention tablets and mobile devices. That’s not to say it can’t be done as there are multiple ways to approach this technique, but for now we’re just going to look at ten sites that utilize a full screen background image.

Go To China

If you drag, shrink, pull, push and widen this page you will notice that the background image not only continuously fills your browser window, but it’s also keeping the image in scale. Meaning the image is not a fixed size where someone who has their screen resolution set to 800×600 will miss the majority of the image, where as someone who has their monitor set to 1440×900 is able to see most of it. This site is able to achieve the effect thanks to the “cover” attribute for background-size in CSS3.

Bjoern Dunkerbeck

Pro surfboarder Bjoern Dunkerbeck has a pretty rockin’ website complete with a full screen background image. As a matter of fact, he has multiple background images that cycle through as a slideshow while you’re on his site. Bjoern’s site uses Flash in order to display the full screen image.

The Door Works

The Door Works use a full screen background image to establish their high quality craftsmanship to the viewer immediately. Through the use of jQuery the image is clipped and resized on the fly. This may sound similar to what the previous sites were doing, but those sites had the image dimensions set to 100% in order to fill the screen. Meaning the image colors won’t get blotchy if the window is shrunk much smaller than the original size of the image, or the image won’t become blurry and pixilated if it’s stretched much larger than the original size of the image.

Ben Thomson Photography

I’m a sucker for a good photography website, you’ve got a plethora of creative, high-res images to look at and capture your attention. And that’s exactly what Ben Thomson accomplished with his website. Ben keeps it clean and simple, only offering what’s necessary for a man of his profession to have on a website.

Fleming Steele

The Fleming Steele creative agency understands the importance of a website. They understand that a site should not only represent you and what you do, but encompass your personality and philosophy as a company. The full screen, black and white, background images of the city they’re based out of immediate triggers words in my head like “elegant”, “creative”, and “clever”.

Teletech

Teletech dishes up some phenomenal photos as their background images, but they don’t stop there. Their site features a miniature camera icon just to the right of their main navigation bar, towards the top of the page, clicking on it results in getting background information on the photo. Unique and educational.

Gravitate Design

Gravitate Design is a bit of a special case for me. On its own the image isn’t that interesting or intriguing. But in the context of the design and the website as a whole, it’s perfection in its simplest form. It delivers some character to the homepage, it’s simple, clean and full screen. Try picturing this website with out the image, you wouldn’t have the textures that the wood and wall offer or the character and creativity that the origami crane offers. Try putting in one of the images from the other sites and all of a sudden the site would become to cluttered and you wouldn’t know what to focus on.

Medis Bar

Medis Kitchen and Bar is another site featuring a full screen background image slideshow. In fact, I didn’t even need to know Swedish to know what the place offered or for the site to convince me I need to go there. Their images tell it all through pictures of the food, bar, coffee, cooks and servers.

Tour Alarm

I can only hope that the only thing this bus was used for was to get the background image for the Tour Alarm website. A couple aspects of the site that I really enjoyed and really worked for me was the ability to translate the page to English, from German, and the ability to close the content so you can see the full picture of the bus unobstructed. Now, whether the bus works or not is another story.

Davidia

Davidia is a Croatian company that knows multiple forms of design, or at least interior and web design. This site is another example of a full sized background image that maintains the proper scale and proportions as it is resized. The image also never looks to pixilated, blurred or blotchy.

Content is nice, but how many of the people visiting your site do you think read every word written on your site? And, let’s be honest, was the content written because you thought the visitor had an interest in it, or because you had an interest in optimizing your site for search engines? You will notice that with most of these sites you didn’t need to read a single word to figure out what the company the website was representing did, what the service was they offered, or how good they were at their job. All of those messages were conveyed through a handful of images that perfectly represented the company. Think about that next time you’re trying to type out a 1,000 word “About Us” page. After all, a picture’s worth 1,000 words.

Why People Are Not Using My Website the Way I Want Them To?!

Karol K — Thu, 22 Dec 2011 17:06:12 +0000

Bad websites. The internet is full of them. Ugly ones, slow ones, buggy ones, hacked ones, and the worst of them all – what-the-hell-is-going-on-here ones. It seems like creating a good website is pure witchcraft… only it isn’t. And here’s why.

We all have our reasons (or our clients have them) for creating a website. We always want to achieve something specific. We want it to be an asset. We want it to interact with users in a specific way. We want users to do something. Maybe to buy a product. Maybe to buy a series of products. Maybe to download our piece of software. Maybe to donate some money. It doesn’t matter.

What matters is the fact that you can’t afford to forget about one crucial thing – telling your users exactly what you want them to do.

It’s incredible how many designers forget about this. It seems like every day we see pages that were supposed to provide a download link for some software, but the link is not visible at all. Or online stores without a proper buy button. Or information portals with too much clutter, making the information impossible to digest. Or sales pages that are not clear enough, and stand absolutely no chance when trying to get a customer through a sales funnel of some kind.

Here’s a small piece of advice: There should be only one main element on each webpage. That’s it. Just one.

How to choose the right element?

It’s not that difficult actually. The only thing you have to do is to ask yourself the question: “what is the purpose of this page?”

If the page exists to provide a download link then the most important element should be indeed that download link. Not the description. Not the header. Not testimonials. Not the features description. The download link itself. Make it big. “Purple cow”-it.

If the page exists to sell some kind of a product then the most important element should be the buy button. Same rules apply. Big, purple-cow-like.

What about a blog? Every blog is about one thing and one thing only – providing good quality content (sorry for the cliché). The content itself should be the most visible element of a blog page. Invest in some good typography. You can also try minimalist design. It works well for a blog because it doesn’t overwhelm the text content.

For big news portals create one block that will feature the most important news of the day. Situation when every piece of news seems to have the same importance is not good. If you try to show that everything matters in the end nothing will.

In a nutshell. The main element should be the one that will attract the most attention. That’s why it’s crucial for it to be the most important element at the same time.

You can use a little trick while coming up with this element. Picture this: If you’d have to remove everything from your webpage and leave just one thing, what would it be? – That’s your main element.

But what to do when you have to create a sequence, or a funnel of pages?

Creating a funnel of pages

This has significant importance for all sorts of sales pages. Try to find yourself in a situation where you have to create a series of webpages, each trying to achieve a slightly different goal. Such a thing can’t be done without a clear focus on the most important element of each individual page.

Imagine you’re in a cinema. You know how it works. First you have to get a ticket. And surprisingly enough there’s only one kind of thing you can buy at the cash register (a.k.a. the first sales page) – tickets. Nothing else. Just the thing you visited the cinema for in the first place.

The cinema is perfectly clear about what it is they’re selling, and what is their “main element”. Buying a ticket is the entry point. You can’t go further if you don’t get a ticket.

Next you proceed to a different sales page (so to speak) – the food stand. This thing is so big you can’t possibly miss it. This is their main element at this stage of the funnel. They will try to upsell you on some food, and they’ll probably succeed. You feel almost weird if you don’t buy something.

Finally you find your chair and sit down. What’s the main element? The screen. Nothing else there because they don’t want you to be distracted by anything. That’s why the lights are off and you can’t see anything but the screen. At this stage you get what you paid for, at last.

As you can see each step has a different main element, but still the whole process turns out to be very natural and consistent. You don’t feel weird or uncomfortable at any point. Cinemas do a great job at providing a different main element at every stage of their sales funnel.

However, be aware of the many things that could have been messed up along the way. The food stand could have been not big enough. The screen could have been too small, and the lights too bright. Making it an overall bad experience.

There’s no doubt, these things just can’t happen in the real world. But guess what? They’re happening all the time on the internet. And when they do, you end up with a what-the-hell-is-going-on-here website.

Try to be very clear with your online message – just like you would have been in the real world. Clear about what you want to accomplish with your website. Clear about what its main element is.

(One bonus tip. Look around. The real world can give you some big inspiration for your online endeavors.)

If you end up remembering just one thing from this article, let it be this: You always have to tell your users exactly what you want them to do. Just put up a giant food stand, and dim the lights. Be obvious. Obvious = good.

What is your story? Have you ever visited a what-the-hell-is-going-on-here website?

About the Author

Karol K. (@carlosinho) is a 20-something year old web 2.0 entrepreneur from Poland, and a grad student at the Silesian University of Technology. He shares his thoughts at newInternetOrder.com. Tune in to get his advice on design and starting an online business.

10 Incredible Examples of Responsive Web Design

Scott Stanton — Wed, 21 Dec 2011 15:01:48 +0000

With more people surfing the web from their mobile devices, designers and developers have been trying to figure out the best way to cater to visitors on both mobile devices and computers. When internet capable phones first began gaining popularity the method was to have two separate sites, a mobile site and a “full” site. But that would limit the mobile viewers experience because the site would be so basic it would cause you to wonder if it was coded by chisel and stone. That was then, now everyone is jumping on the “Responsive Web Design” bandwagon and finding it to be a rather happy median.

Responsive web design refers to a site that is developed to degrade nicely across multiple screen sizes and resolutions, from the largest Mac display down to the minutest mobile device. It also works wonders on frame size, square or widescreen, as well as window size, as not everyone prefers their browser to be full screen. There are three key factors to developing a responsive website, flexible layouts, flexible images, and media queries. Let’s take a look at 10 excellent examples of responsive web design.

Sony

Sony is a big brand that has embraced responsive web design. You’ll notice there’s not much of a difference between the widescreen and traditional square screen versions other than everything looks a little more compact on the square screen. But if you start with it out wide and squeeze your browser window in, you’ll notice that the main image actually resizes itself to a smaller version. It resizes itself again once you get down towards mobile device width as well.

Gravitate Design

It’s no surprise that a design studio such as Gravitate Design features a responsive website design on their own site. Whether you are a freelancer or a large design studio, you always want your website to display the full extent of your design prowess and knowledge. I really like Gravitate’s site not only because it’s responsive but because it’s very clean and simple. Their color palette compliments itself nicely and they didn’t go overboard on shadowing, borders or putting all their content in boxes.

Spark Box

Spark Box is another web design studio that knows a good thing when they see it and doesn’t hesitate to implement it on their own site. One thing I really like about their website is how they use the width when they have it, but gracefully adjust when they don’t have it. Their little text blurb to the right of the monitor icons on the home page is a great example. It doesn’t look out of place aligned to the right in widescreen mode, nor does it look out of place centered underneath in square mode and mobile mode.

Food Sense

Food Sense is another great example of responsive web design. They use the width when they have it, but when they don’t they adjust without losing any of the clean look or flow to the site. The only unfortunate thing about the site is that once you leave their widescreen parameters you lose their latest tweet and Facebook plug that’s on the side column under the navigation. They still have links to both social networks in the footer, so it’s not a huge deal. But still would have been nice to see those features appear elsewhere in the skinnier designs.

dConstruct

dConstruct is a stunning example of dynamic images that are resized on the fly. As you drag the window left and right you will see that the padding between images isn’t what’s adjusting in width and size, but the images themselves are. Once you hit a certain parameter all of the images resize to a smaller, or larger depending on if you’re shrinking or expanding the site, version to accommodate the screen size.

Clean Air Challenge

Last week I talked about sites with parallax scrolling and this Clean Air Challenge site just barely missed making my list. The site itself isn’t totally parallax scrolling, just the clouds in the background are. However, the site is an excellent example of responsive web design. Another aspect of this site that I liked was that the only images that you lose once you hit the mobile sized version of the site is the repeat of the main navigation icons that appear in the footer.

Sasquatch Music Festival

Sasquatch is an annual music festival in my neck of the woods featuring some big name artists. When I came across their site and saw that it’s as fun to look at as the bands they book are to listen to, I was quite excited. This site sticks out from a lot of the others for me because of all the colors, images, icons and overall sense of style it has to offer. A lot of the responsive websites I come across seem to be heavy on text, light on imagery, and only two or three colors throughout the site.

Flexslider

It only seems fitting that Flexslider also has a flexible website to promote their handy jQuery image slider. And what better way to get people interested in the slider than to use pictures of cupcakes to show off how it works! One of the best things this site has going for it is that you don’t lose a single thing between widescreen mode and mobile mode, all icons, images, elements, comments, and everything stay there. This way visitor’s don’t feel cheated between missing out on content if they’re browsing the site from their mobile device or desktop computer.

The Cacao Trail

I can only imagine that The Cacao Trail website is almost as enjoyable to navigate as the actual trail is. You lose the main image on this site as soon as you go from widescreen down to a more traditional sized monitor, which I don’t mind as the image doesn’t really do too much for me and it would certainly save you a lot of load time on a mobile device. I do like how the main navigation links enlarge once you hit the mobile sized version, it can get to be a bit of an annoyance trying to touch tiny words to navigate a site on your touch screen mobile device.

Alsacreations

Alsacreations took another interesting approach to their responsive web design. Rather than worrying about keeping all aspects and elements of their site intact between different resolutions, they simply focused on what was important and dropped the bells and whistles. From widescreen to square they dropped their image slider, then from square to mobile they dropped all elements except their “About” blurb and their email form, while including links to everything else.

I like sites that maintain their appearance, at least to some degree, all the way down the resolution latter. But I also understand that specific industries and target audiences come in to play. In some industries a person may only be viewing a site from their mobile device to find that companies contact info. In those instances it’s probably best that’s what they get from your mobile sized home page as soon as it loads, you can always include links at the bottom to everything else. I would encourage you to help your clients figure out what’s best for them, and keep all monitor sizes and internet browsing devices in mind as you’re developing your next project.

Untangling the CSS3 :not Selector

David F. Weiss — Mon, 19 Dec 2011 00:39:33 +0000

The CSS3 :not selector may not be as flashy nor widely known as animations or media queries, but this simple pseudo-class packs a punch and is easy to use. Before we dig in, I’d like to point out (no pun intended) the excellent CSS reference section on the SitePoint website. You’ll find a nice description and browser compatibility table for the :not selector, as well as information about the other CSS3 pseudo-classes, like :nth-child, :last-child and :checked.

Why :not?

The :not pseudo-class is easy to use and if you’re at all familiar with the jQuery version of this selector, then you should feel right at home. Let’s take a look at the following example.

p.intro {
    color:#333;
    line-height:1.5em;
    margin-bottom:1.25em;
}
p:not(.intro) {
    color:#444;
    font-size:.875em;
    line-height:1.3em;
    margin-bottom:1em;
    width:80%;
}

Notice the second rule, which uses the :not selector. What this CSS3 pseudo-class does is first select all paragraphs, then exclude any paragraphs with the intro class. In other words, what comes before :not will be targeted and what comes after :not in parentheses will be excluded. You can target whatever elements you want, however there are some restrictions on what you can and cannot negate. Unsurprisingly, you can’t use the :not selector within a :not selector. And you also can’t use a pseudo element like p:before, not to be confused with pseudo-classes like li:last-child, which thankfully you can use. What’s nice about the :not selector is that we can really focus in on a specific group of elements, style them and not have to worry about the elements that were excluded. Now that you know a little more about this pseudo-class, I’d like to share two of my favorite uses for the CSS3 :not selector.

List of Links

li:not(:last-child) {
    border-right:1px solid #000;
}

Form Fields

input:not([type=checkbox]) {
    border:1px solid #999;
    border-radius:3px;
    color:#aaa;
    padding:4px 2px;
    width:40%;
}

How have you been using the CSS3 :not pseudo-class? Leave a comment below or tell me on Twitter.

David F. Weiss is a Front-End Web Designer/Developer & Web Enthusiast, who lives and works in Connecticut, USA. He is passionate about the web and spends way too many hours in front of a computer and not enough time with his wife and little princess.

CSS3 Buttons For Every Web Browser

David F. Weiss — Fri, 19 Aug 2011 14:29:58 +0000

The age of using images for buttons on websites is quickly coming to an end, thanks to expanded browser support for CSS3 properties like rounded corners, gradients and text shadows. Browsers, like Firefox and Safari, actually started supporting some of these properties long before CSS3 became a buzzword, but now with IE slowly getting into the game, there are no more excuses. Pure CSS buttons are easy to design, implement and manage — welcoming words to any front-end web developer!

I’ll show you, step by step, how to create CSS buttons, but if you’d like to view the demo now and grab the code, here it is. Of course, there are plenty of websites out there where you can generate a CSS3 button in seconds. My favorite is CSS3 Generator. Although, you don’t really learn from a generator, so we’ll build a CSS button from scratch and better understand how it works.

Input & Anchor Tag

In most cases, you’ll use either the input or anchor tag to display a button that will either trigger an action on the current page or send the visitor off to another page. Let’s go ahead and write the markup for our two elements.
Decline

Notice that we’re using the CSS class btn. This will be our base CSS class for our buttons. In an effort to keep object oriented CSS in mind, we’ll first create a simple class of btn, which all of our buttons will inherit and then extend that with additional classes for color and size differences.

CSS Round 1

First, let’s set some elemental properties on the btn class. This is mostly to override default browser styling of the elements and lay the groundwork for a button-like design.

     .btn {
          /* Round 1 */
          border:1px solid #666;
          cursor:pointer;
          display:block;
          margin:10px auto 0;
          padding:5px;
          text-align:center;
          text-decoration:none;
          width:140px;
     }

CSS Round 2

Now, for the fun part, let’s style these input and anchor tags and turn them into buttons, using the border radius, gradient, and text shadow properties, along with a few others for good measure.

     .btn {
          /* Round 1 */
          border:1px solid #666;
          cursor:pointer;
          display:block;
          margin:10px auto 0;
          padding:5px;
          text-align:center;
          text-decoration:none;
          width:140px;
          /* Round 2 */
          -moz-border-radius:15px;
          -webkit-border-radius:15px;
          background:#20c167;
          background-image:-moz-linear-gradient(top, #20c167, #157f44);
          background-image:-o-linear-gradient(top, #20c167, #157f44);
          background-image:-webkit-gradient(linear, center top, center bottom,
               from(#20c167), to(#157f44));
          background-image:linear-gradient(top, #20c167, #157f44);
          border-radius:15px;
          color:#FFF;
          font-size:.75em;
          font-weight:bold;
          text-shadow:-1px -1px 0 #444;
     }

As you can see below, our CSS3 buttons are taking shape. The gradient, rounded corners and text shadow combine to create one sexy button, if I must say so.

CSS Round 3

Let’s extend the btn class with one called decline, which we’ll use to, you guessed it, style the decline button. If we use our base button class to cover the browser overrides and general button styles, then we can use semantically named classes to change the button’s size, color and anything else we need to.

     .decline {
          background:#ad232e;
	  background-image:-moz-linear-gradient(top, #ff3443, #ad232e);
	  background-image:-o-linear-gradient(top, #ff3443, #ad232e);
	  background-image:-webkit-gradient(linear, center top, center bottom,
               from(#ff3443), to(#ad232e));
          background-image:linear-gradient(top, #ff3443, #ad232e);
          width:90px;
     }

Now we’re cookin’! Our decline button is a little smaller and has a nice red gradient. By using this approach, creating all sorts of buttons for your website should be no big deal. Just use a base class like btn and then extend it with custom classes to create different buttons.

What about IE?

Before you stop reading and start creating CSS3 buttons, we should probably talk about IE. Funny how that browser always wiggles its way into CSS discussions. Now, Microsoft does have its own proprietary gradient filter, but I’m not the biggest fan of using it. Instead, to make our buttons more cross-browser compatible, we’ll use a 1 pixel background image.

     .btn {
          background:#20c167 url(btnAccept-default.gif) repeat-x left bottom;
     }
     .decline {
          background:#ff3443 url(btnDecline-default.gif) repeat-x left bottom;
     }

With our gradient background image in place, we have an okay looking button in IE7/IE8 and a pretty nice one in IE9. Unfortunately, there still isn’t text shadow support in IE9, but at least we have rounded corners.

Finishing Touches

Lastly, for a nice button press effect, we’ll reverse the gradient colors on the active state of the element.

     .btn:active {
          background:#157f44;
	  background-image:-moz-linear-gradient(top, #157f44, #20c167);
	  background-image:-o-linear-gradient(top, #157f44, #20c167);
          background-image:-webkit-gradient(linear, center top, center bottom,
               from(#157f44), to(#20c167));
	  background-image:linear-gradient(top, #157f44, #20c167);
     }

So there you have it — a great looking button styled with the latest CSS3 properties that works in all the major browsers. For a closer look at the code, view the demo. Thanks for reading and feel free to leave comments or questions!

Web Design Dev » Web Development

How to use checkboxes and radio buttons in Flash

Top 10 Flash Slideshow Image Viewers

10 World Class Athlete Websites

Create a Full Page Background Image with CSS3

10 Awesome Single Page Websites

10 Awesome Websites With Full Screen Background Images

10 Awesome Websites With Full Screen Background Images

Why People Are Not Using My Website the Way I Want Them To?!

How to choose the right element?

Creating a funnel of pages

About the Author

10 Incredible Examples of Responsive Web Design

Sony

Gravitate Design

Spark Box

Food Sense

dConstruct

Clean Air Challenge

Sasquatch Music Festival

Flexslider

The Cacao Trail

Alsacreations

Untangling the CSS3 :not Selector

Why :not?

List of Links

Form Fields

CSS3 Buttons For Every Web Browser

Input & Anchor Tag

CSS Round 1

CSS Round 2

CSS Round 3

What about IE?

Finishing Touches