'Net Features : responsive design

Parallax Scrolling, Responsive Design Make Nice

Michael Garrity — Thu, 09 May 2013 18:40:00 GMT

Responsive design is top-of-mind these days for website owners and designers, alike. Plenty of developers are also talking about another hot new trend sweeping the Web known as parallax scrolling.

If you haven’t heard, parallax scrolling is where different layers of a Web page move across the screen at different speeds as the user scrolls up or down, allowing for a site contained entirely in a single page with sectional transitions taking place through the act of scrolling. And if you’re unfamiliar with responsive design, it’s a tactic that designers employ to ensure that a website or page renders in an optimal, user-friendly way on any device that someone may be visiting from.

However, while both of these topics are of interest to many Web developers, it can be difficult to make them work together, largely because of the technical complexities that can be involved in parallax scrolling. But one solution to this problem is the jQuery plugin known as Cool Kitten, a framework collection of HTML/CSS and JavaScript files that creates a beautiful, and responsive, parallax scrolling effect.

The plugin was created by Jalxob using Treehouse, Stellar.js, Normalize.css and other resources. It is currently available on the open source project hosting service GitHub.

The Web's Most Gorgeously Designed Websites

Administrator — Thu, 09 May 2013 17:00:00 GMT

:: By DJ Miller ::

Stagnant websites simply can't keep up in the continually evolving online world. Those that update often and experiment bravely with an eye to gorgeous, yet functional design are sure to grab visitors' attention. These top sites feature striking design elements that help them stand out at the head of the pack.

BBC – Design Across Platforms

Image via BBC.com

BBC's most recent page design features a look that's strikingly similar to what you expect in a mobile app. Don't be surprised if you're tempted to swipe your finger across your computer screen, even though you don't have a touch-screen monitor. The Web page features eye-catching images that quickly grab your attention and pull you into the stories. The site uses this same design across all platforms including tablets and smart phones.

Elysium Burns – Bold Typography

Image via elysiumburns.com

A diverse choice of eye-catching sans serif fonts gives Elysium Burns a memorable look. Article titles and site headings sit against subtle CSS image backgrounds. The simple white on charcoal color scheme really allows the shape and flow of the typography to take center stage on this page.

Disney – Highly Responsive Video Design

Image via disney.com

Responsive design is essential for any site, but creating a page that's user-friendly on any platform is more difficult for some features than others. Disney's site prominently features high-quality videos, so the challenge of their redesign was maintaining video size and quality across platforms. The result is a simple streamlined design that showcases video beautifully on any device.

Web Design Ledger – Where Serif and Sans Serif Meet

Image via webdesignledger.com

The intriguing look of Web Design Ledger combines both serif and sans serif fonts. The striking difference in font styles throughout the site effectively draws your eye to certain features, such as reader comments. Though this is an unconventional choice of typography styles, it works well in this simple text-heavy layout.

Combadi – High-Impact Images

Image via combadi.com

A growing number of sites now use large, high-impact images on their home pages to draw customers in. Though typography has its place, designs like these allow the eyes to rest a bit and take in something refreshingly different. Combadi features both a large image at the top of the page and a series of smaller images for added eye candy further down.

The Verge – Story Collage Layout

Image via theverge.com

The Verge features a story collage that highlights top features in a clean and visually pleasing way. Each headline is given ample space in its own candy colored box so the titles don't crowd each other out. Though the site has lots of content, visitors don't feel overwhelmed thanks to this simple design choice.

USA Today – Customizable Experiences for Every User

Image via usatoday.com

USA Today's design is simple and clean, making it easy to browse massive amounts of information in a short amount of time. This rigid layout is perfect for a site where readers want to navigate to items of interest as quickly as possible. One of the highlights of USA Today's site design is the viewing option, which allows readers to choose from a list or grid format. This allows for fast and easy customization to suit the tastes of each visitor.

A List Apart – Extreme Readability

Image via alistapart.com

With so many flashy and colorful design options available, it's easy to get swept away in the visual aspects of site design and forget about the finer points of readability. This is where A List Apart truly excels. The headlines, subheadings, quotes, and article body all feature clean fonts chosen with reader comfort in mind. The content itself is well-organized and flawlessly edited as well so your eye travels easily from one short digestible paragraph to the next.

Mea Cuppa Sweets & Coffee – Striking yet Simple Color Choice

Image via meacuppa.be

The stunning color choice of Mea Cuppa immediately grabs the visitor's attention. With a clean palette of black, white, and yellow, the imagery doesn't take away from the content, but rather makes the viewer want to hang around and feast on the delicious visuals for a while longer. This design proves that less is more and simplicity isn't inherently boring.

Postable – Fast Functionality

Image via Postable.com

Postable's purpose is simple. Users sign up for the free service which sends links out to their friends and family asking for updated contact information. Fittingly, the site design for this service is simple and easy to use as well. Three points clearly lay out everything the service does and a short sign up form lets you start in seconds. There's no clutter, no confusion, and no excess in this functional design.

Oliver Russell – Sleek Graphics and Simple Color Choice

Image via OliverRussell.com

Oliver Russell's page highlights his marketing services in a sleek design that speaks to his professionalism and Web expertise. The palette features bold warm oranges and yellows with a bright touch of cyan. Finding what you want is easy so visitors never get lost on this well-designed page.

University of Notre Dame – Strong Graphics and Cutting-Edge Design

Image via nd.edu

The University of Notre Dame handily broke out of the college website mold with their new design. Bold images highlight the campus in a visually enticing way that can't help but draw visitors in. A simple static toolbar at the top makes navigation easy from anywhere on the page. The responsive design looks just as striking on mobile phones as it does on a standard desktop.

Starbucks – Meeting Mobile Needs

Image via Starbucks.com

Not surprisingly, Starbucks found that a growing number of visitors were accessing the site on mobile devices. In answer to the clear need for a better mobile site, they moved to a responsive design that's equally functional across platforms. The images are simple and deliciously enticing while the functionality is everything users need, allowing visitors to find a store or check gift card balances right on their phones.

Web design is a continuously evolving field and innovation is essential for any business to stay at the top. Browsing these beautiful sites will give you plenty of inspiration for enhancing your own page design.

Author Bio:

DJ Miller is a graduate student at the University of Tampa. He is an avid gadget geek who spends most his time writing on anything tech related. His specialty is Web design and optimizing sites for mobile devices and ultrabooks. You can follow him on twitter @MillerHeWrote.

Six Questions for Responsive Designers

Pete Prestipino — Thu, 07 Mar 2013 18:30:00 GMT

The response in “responsive” Web design provides a clue about how to think about the practice. It’s essentially a set of actual techniques – and yes, sometimes tools too – that move elements of the page (e.g. images, navigation, text) based on the capabilities of the device it is being viewed upon. Responsive design enables websites to obtain information about the device and then display a version appropriate for the layout. There are actually quite a few digital moving pieces, so if you’re using responsive design right now – ask these six questions of yourself or your designer before making anything digital come alive.

You likely need no further explanation of why going responsive is the best design choice for your digital presence, but you’ll also need some practical guidance – just the kind of information that subscribers expect from Website Magazine. Here’s a quick guide for those interested in using responsive design, some things you should and need to know, and more importantly ask, about responsive techniques and tools, today and in the future.

A quick note, if you’re reading this on a desktop version you’ll quickly notice that WebsiteMagazine.com is not actually “responsive” per say. Aren’t we practicing what we preach? Well, sort of – we are mobile compliant. Responsive design is terrific for lots of things (like our Web 100 project) but not for every enterprise in every single scenario. Website Magazine, for example, opted for a mobile website over responsive layout as it provided us greater control over the complexity of information we publish and some unique opportunities related to our mobile applications. So yes, Website Magazine is mobile compliant, just not responsive (and it works!).

OK, enough defending our business decisions! You want to know as much as you can about responsive design… and you’re about to. The following outlines several guiding principles as you design (or redesign) your consumer-facing websites for modern desktop, mobile and tablet experiences.

Is the Code Simple or Complex?

Remove/Reduce Interfering HTML

Many might believe that responsive design will limit the amount of information (it does, at least in appearance) that can be made available, but responsive design demands nothing more than a thoughtful approach to the user experience. The way to achieve that is to ensure that the layout is kept as simple as possible.

Are you prioritizing the elements correctly for optimum consumption? Take a moment now to test – remove all styling CSS and styling information from your email or Web design and display it in a browser. If the content is easy to read and ordered appropriately, you’re on the right track. If not, you’re likely engaging in some poor HTML practices, such as the use of inline styles or unnecessary absolute or float positioning.

Another option is to use one of the many testing tools to see how your responsive designs hold up. One of my personal favorites is Responsi, a very straightforward design-testing tool, which provides drag-to-resize viewport and several standard device 'pre-sets'. Designers will find tools such as Responsi and others very useful in their day-to-day design tasks.

Are Media Queries In Place?

The IFTT of Modern Digital Design

If you’ve read anything about responsive design you have come across the term media queries; the code that queries the users device to understand how the site is best viewed and then providing an appropriate response for the width conditions. Essentially, depending on the client-side response, designers will load the right style sheet and even have the ability to add specific styles in different scenarios. Think of media queries as “if this, then that” statements.

Are Optimal Resolutions Targeted?

Know the Common Breakpoints

In order to create and use media queries however, it is important to know which are the most common resolutions used to view your digital assets. A business’ mobile efforts are best focused on the most popular devices, which fortunately makes quick work of the development process for designers. To work with these devices, designers must essentially just account for the minimum and maximum widths – 480, 768 and 1024 (in both portrait and landscape). Using a free tool like Responsi (listed above) or Screenfly helps to understand quickly if everything is appearing in an optimal way.

Is the Layout Flexible?

Adapt Quickly to the Viewport

When it comes to responsive design, layouts (obviously) need to be flexible, which means you’ll need to leave those pesky tables alone. The best option is to use a flexible, fluid grid (which uses columns to arrange content) and relative instead of fixed width to adapt to the right viewport size. If you’re using the right media queries in conjunction with a fluid layouts, you’ll have most if not all devices covered. To speed development on this front, consider the use of grid systems such as those listed here and here.

Are Images Acting Responsively?

Adaptive Sizing of Images

The use of pictures and images on a responsively designed website or email can cause headaches for designers – and if you’re not careful, it can create a poor experience for users too. The trick is to use adaptive sizing within the CSS to adjust the image width. The optimal way to set images with 100 percent width, but capped to not exceed the actual file size (it’s also important to consider the readability of images – read Design Principles for Master Developers for more.)

Is the Content Prioritized Appropriately?

Removal of Non-Vital Elements

Responsive design has forced both designers and the businesses that employ them to seriously consider element prioritization – or what goes where (and when) in a smartphone and tablet context. For example, it might make sense to include a third-party advertisement on the desktop version of your site, but doing so may interfere with the mobile or tablet experience of users. The best course of action is to remove non-essential items. In a mobile/tablet context the aim should be to have one path to action for each mobile page – whatever is most important should stay, every other path needs to be hidden. That can be achieved through the application of a special class, which hides non-essential elements from the view of the user.

Responsive Web design (RWD) is changing the way websites are developed. As more and more digital companies explore what's possible with RWD, they'll have questions that need to be answered. Start with these high-level responsive design questions and ensure your next project is truly prepared to handle all users on any device they may be using.

Responsive Design Gets Simplified

Michael Garrity — Thu, 14 Feb 2013 19:45:00 GMT

As a Valentine’s Day present of sorts, Adobe announced the release of a handful of new Web design and development tools for its Creative Cloud suite earlier today. This includes updates to the Adobe Edge Animate and Dreamweaver programs, but the real star of the show is the Adobe Edge Reflow responsive design tool.

Edge Reflow will allow users to create “high fidelity” CSS3 website designs that can realize and resize for the design surface that the user is visiting the site from, while allowing creators to select from a desktop or mobile-first design approach and to preview their work (in its various sizes) from within a browser.

Needless to say, this is going to be a handy tool for many Web designers and developers out there, as it makes it significantly easier to create a robust, feature-rich mobile-responsive website; and really, isn’t that the ultimate goal of most Web professionals these days? Of course it is, and that is why solutions like Adobe Edge Reflow are not only going to become more commonplace, but they’ll likely become something of a necessity for the designers and developers of the future.

Responsive Design: Then & Now

Traditionally, the bulk of the work of responsive design has been laid at the desk of a content management system (CMS), which most websites utilize in one form or another through a platform like WordPress or Drupal, or by using an internally developed system. Either way, the responsive design challenge has long been based upon the capabilities of a company’s CMS.

Building a responsive website starts by designing a liquid layout or set of fluid grids that expands with a page to fit the browser/screen from which the site is being accessed. But that isn’t the most important part, because next the developer has to include the CSS3 media queries that help websites to gather data about a sits visitor and use that info to conditionally apply CSS styles. These queries effectively control the site’s behavior and allow it to respond to the end user’s needs.

Until now, the challenge for responsive design has largely been trying to find a theme for a designer’s content management system that would be able to respond to a wide array of different screen sizes and device types, but thanks to new platforms, solutions and services (like Adobe Edge Reflow) that take automatically take care of the “responsive” aspect of website design, that is quickly changing.

No Longer Just a Special Consideration

If the release of Edge Reflow signifies anything, it’s that responsive design isn’t just a cool added bonus that only a select few websites have or need to worry about anymore. From now through the foreseeable future, mobile is going to be a major factor in company’s Web success, and responsive design is the simplest and most effective way to meet that problem head-on.

As a result, solutions that make it easy to not only create a website that is able to automatically respond to a user’s screen size or device, but also allows designers and developers to preview what their site will look like in a variety of different shapes and sizes as they’re designing it, will become some of the most useful tools available to them; so much so that we will likely begin to see a proliferation of similar services sooner, rather than later. We already are, to some extent.

Just yesterday, a new all-in-one CMS and marketing platform called Bislr was launched, born initially out of the desire to combine all of the different touch points for business owners, designers and marketers into a single, unified platform. With Bislr, companies can build their own “intelligent” websites from the ground up, using a simple drag-and-drop interface, that come equipped with built-in social media and marketing capabilities, including integration with CRM and marketing automation software. And on top of all that, the service creates sites that are immediately responsive “with no extra work.” Users can even adjust their interface’s size to see how the site will look when rendered on different devices, allowing them to make changes as necessary during the initial build.

Responding to Needs

As the need for responsive design increases exponentially, so will the need to simplify the process for designers and developers, as virtually every site they create will have to be able to operate across devices. Adobe Edge Reflow may be the first big-name solution to provide this kind of quick-and-easy functionality, but it certainly won’t be the last.

Customer Happiness via Responsive Web Design

Administrator — Thu, 07 Feb 2013 17:10:00 GMT

By Robert Patrick

Gone are the days where you just had to build a website to work in multiple browsers. Now, you also need to support a wide variety of screen sizes, from smartphones to televisions and tablets. Enter responsive HTML.

Responsive HTML allows you to design a website so that it automatically "responds" to the screen size of the device that is viewing it. For example, if you're looking at a website on your desktop monitor then you can view it in its full glory. But on a mobile phone, things often need to be re-positioned (e.g.) small links need to become touchable buttons and other elements need to disappear all together.

Responsive HTML is essentially three key pieces of technology all working together to seamlessly "resize" a website for any viewing device.

1. CSS3 media queries identify the screen size of device viewing the site. Initially introduced in CSS2.1, and later expanded with CSS3, this technology features the ability to test conditions on the device such as resolution, minimum height, maximum height, orientation and aspect ratio.

You also have the ability to combine queries and test for multiple conditions using AND, NOT and ONLY as logical operators. By creating media queries you can determine which CSS style to display to that device, which is critical to achieving responsive design.

2. Fluid grid layout using div-based HTML and CSS is the magic behind allowing the page to expand or contract as needed and relative to the display space available. By avoiding fixed-pixel sizing within the page, the design is free to adjust itself by percentages and can dynamically change positioning without breaking other areas.

3. Fluid images scaling allow an image to fluidly shrink its dimensions so that it stays within the viewable area of the screen without requiring the need to scroll. When images are sized using CSS relative to their container, they work in conjunction with the fluid grid layout to achieve design flexibility.

Another related technology that is being explored is adaptive images, which allows the website to return an optimally sized image based on the screen size. While image scaling is a great effect, it still has to download a higher resolution image. Adaptive images gives us the appropriate-sized image needed based on the space, thereby saving bandwidth. This is especially important when the user is on a mobile device with slower or limited connectivity.

What are the benefits of responsive HTML?

Get ahead of the game - With mobile Web browsing growing at a tremendous pace, it is increasingly important to provide viewers with a well thought out Web experience, regardless of what device they are using to view your website. As new devices come out with different resolutions and screen sizes, responsive HTML will allow your Web design to work properly on those devices right out of the gate. There will be no need to make any development changes in the future, which will save you money.

Save money with fewer platforms - A responsive website can also save you the time and cost of building and maintaining separate mobile apps because it offers many of the same advantages. For example, if you run a business where your customers often need to find you on the go, such as a restaurant, coffee shop, or hotel, a responsive website experience can be the difference between a customer choosing you over a competitor. Mobile browsing has already surpassed desktop browsing in some areas of the world, and a responsive website is the gateway to those users.

About the Author

Robert Patrick is founder and chief architect of PhD Labs, a Southern California company that specializes in social media, mobile applications and Web development solutions. Visit www.PhDLabs.com.

Responsive Design: Not So Simple

Administrator — Thu, 31 Jan 2013 20:30:00 GMT

By Mike DiMarco, Director of Media for FiddleFly, Inc.

Sometimes, a good idea on paper can blossom into a great idea in practice. Other times however, a seemingly great idea on paper can quickly turn into a wastebasket full of unexpected and unnecessary frustration. Such can be the case for those who decide to build a responsive website for their business.

If you’re not familiar with responsive Web design, it is at its most basic a website that is coded to reformat to fit whatever device screen it is being viewed on. While this may seem like a no-brainer solution, responsive design poses quite a few more hassles than it may at first seem.

Before we dig into the little (and a few rather large) things that have people pulling their hair out over their responsive sites, let’s take a second to acknowledge some real benefits. Of course the most obvious upside would be the necessity to build only one site versus building a site for desktop and a site for mobile. On top of this, responsive design only calls for one set of code, so redirects and links are much easier to organize and sync. With many users accessing a site from different devices, having a single site that is consistent can help streamline branding as well.

While all of this may seem like Web design Nirvana, it’s time for the bad news. Simply put, different features are more appropriate for different devices.

Responsive sites can be formatted to include or exclude certain content based on what device they are being viewed on, however the actual content itself remains the same. This means to build an ideal responsive site, designers need to build with mobile in mind first and then work around it. This mindset makes for great mobile versions of responsive sites, but can restrict the creative license designers allow themselves for desktop versions.

Another major issue with responsive design is that mobile users and desktop users have very different needs to consider. While desktop users may be researching your business and comparing prices or features, mobile users are more likely to be looking for things like directions or quick product information. As we mentioned, sites can be designed to show certain features depending on device. Designing specific sites for each platform however, allows for much more efficient and user-friendly versions of each versus a responsive site where small sacrifices must be made in both directions.

This is all by the way assuming that the responsive coding is done properly. Sure we could make this argument for any element that is not executed well, but responsive coding is simply much more difficult than most endeavors and often ends up not fully developed. There are plenty of developers out there doing responsive design, but unfortunately not a whole lot doing it well which is why we see far too often sites with images and text rendering on top of one another, or loading improperly due to a few misplaced lines of code.

If you are just starting a new business and intend to build a very simple site with little content, responsive may be the way to go. However for those businesses that already have a desktop site, redesigning it to be responsive can be very expensive and difficult. Beyond the restructuring that must be done to build a new site with mobile in mind, re-coding the entire thing brings a whole new set of complications.

Responsive sites not only suffer from stunted design creativity, they can also negatively impact your site’s SEO status. Building a separate site for mobile allows you to incorporate a whole new set of information, which in turn gives search engines more material to work with. When building responsive sites, the more content you include the more you risk slowing down or cluttering the mobile version of your site, whereas building two separate sites gives you the ability to incorporate more diverse material without losing any features on either version.

Now, I know some of you may be thinking we’re a bit biased on this whole responsive vs. mobile debate, and the truth is we are, but for a good reason. While we love the idea of responsive design, we see that there are far too many holes in it to be considered the be-all-end-all solution many people think it is. The much more practical implementation of responsive design is to use it in concert with mobile design. Build things like splash pages or individual campaigns to be responsive while your permanent endeavors all have fully specified versions built.

Businesses that are not looking to include dynamic media content, or simply need an informational site for reference purposes, can see great benefits in responsive design, while businesses that rely on more intricate or interactive web designs will see far better results by developing for individual platforms (e.g., desktop, mobile, tablet).

So, if you are among the many few who have the resources and the talent on hand to create responsive, intelligent sites then I say congrats. To the far more of you that aren’t looking to take the huge gamble that your responsive efforts don’t turn into a lingering frustration that will have you starting over again and again, it may be time to look into building for mobile.

About the Author

Mike DiMarco is the Director of Media for FiddleFly, Inc. He has been writing for publications around the Web, as well as film, television and print since 2006. Since 2011, his work has focused on researching and writing about the mobile Web.

Responsive Web Design Bookmarklet

Pete Prestipino — Sat, 11 Aug 2012 22:30:00 GMT

Responsive Web design (RWD) is on the mind of every ‘net worker – from designers and developers, to Internet advertisers and search marketers too.

The benefits of RWD are well documented, but whenever there is a new technology to explore, or even just a new way to do digital work, the tools and resources that make it truly useful (and even fun) are often slow to emerge. But emerge they do.

Case in point is Victor Coulon’s new (and free) RWD Bookmarklet.

With the bookmarklet installed (just drag the link to your browser’s bookmarks bar), visit any website and click the RWD bookmarklet link. A toolbar will then load where designers/developers can select a typical tablet and mobile resolutions and see if the site is responsive or test out new designs to see how well they render on different devices.

Web Font Fun with Javascript Plugins

Administrator — Thu, 28 Jun 2012 19:30:00 GMT

When I first started working on the Web in a professional capacity, there really wasn’t much you could do to dress up your website as it related to font choice.

Web designers had little control over fonts in the past, but that has changed dramatically over the past two years as the pace around jQuery development accelerates and responsive design becomes the norm (or at least more normal).

While it’s possible to manipulate text using CSS, that method still has its limitations. As a result, many turn to Javascript to solve the inherent problems - and the results are often worth a look.

Below you’ll find several javascript plugins that can help you, the designer/developer, modify text through kerning, introducing a responsive nature and even tossing aside all convention with some quite dramatic effects.

SlabText: This Javascript plugin splits headlines into rows before resizing each to fill available horizontal space.

FitText: The plugin renders font-sizes flexible, making it ideal for use in fluid or responsive layouts to achieve scalable headlines.

LetteringJS: For those willing to make a more daring design choices, LetteringJS fits the bill.

jqsloText: This plugin is another for those willing to make some edgy design choices, as it renders an arching effect (gets bigger as you approach the middle and then tapers off) on HTML text.

jQuery Glow: The plugin provides the ability to add a glow effect to text when hovered over.

BigText: This plugin automatically sizes text to fit inside a parent element, resulting in perfectly justified alignment.

Responsive Drop-Down Navigation with SelectNav (JS)

Pete Prestipino — Wed, 20 Jun 2012 00:00:00 GMT

There's a whole lot of interest right now on the part of both designers and those that employ them to make their digital properties as accessible as possible - meaning that they must work and appear well on desktop and mobile devices simultaneously.

As an industry we are learning how to make the most of responsive design and to our great fortune, there are numerous techniques and technologies to support this initiative. Case in point - SelectNav.js.

SelectNav.js is a JavaScript plugin that enables designers to convert their website navigation into a "select" drop-down menu (see images below). The JavaScript is used together with media queries to create a space-saving, responsive navigation for those using small-screen devices.

Inspired by TinyNav.js, SelectNav.js requires no external library, is very lightweight (only 1.5kb minified), is customizable, and compatibility with a variety of modern browsers.