Since a smartphone landed in almost everyone’s pocket, developers have been faced with the question of whether to go with a mobile website or a native app.

Native applications offer the smoothest and most feature-rich user experience in almost every case. They have direct access to the GPU, making layer compositions and pixel movements buttery-smooth. They provide native UI frameworks that end users are familiar with, and they take care of the low-level aspects of UI development that developers don’t have time to deal with.

When eschewing an app in favor of a mobile website, developers often sacrifice user experience, deep native integration and a complex UI in favor of SEO and accessibility. But now that JavaScript rendering engines are improving immensely and GPU-accelerated canvas and CSS animations are becoming widely supported, we can start to consider mobile websites a primary use case.

Unicef’s latest campaign, Tap, presented us with the challenge of combining the accessibility of a mobile website with the native capabilities, UI and overall experience that someone would expect of a native app. Our friends at Droga5 came to us with a brief to create a mobile experience that tracks how long a user avoids using their phone.

Unicef’s 2014 Tap campaign presented the challenge of combining the accessibility of a mobile website with the smooth user experience of a native app.

For every 10 minutes that a user gives up their phone, a sponsor would donate a day’s worth of water to children in the developing world. While the user patiently waits, they are presented with real-time and location-based statistics of other users who are sacrificing their precious phone time.

We’ll discuss a few of the biggest challenges here: detecting user activity, achieving performant animations, and building an API integrated with Google Analytics.

Detecting User Activity

Detecting user activity through a mobile browser was an interesting challenge and involved a lot of research, testing and normalization across all types of phones. The slightest differences and inaccuracies between phones became suddenly apparent. To explain the process, we’ll break it down into three categories: user movement, user exiting, and device-sleep prevention.

User Movement

One core piece of functionality is detecting any movement by the user. Fortunately, most mobile browsers today have access to the built-in gyroscope and accelerometer via JavaScript’s DeviceOrientation event. The unfortunate exception is devices running Android 2.3 (Gingerbread), which at the time of writing has roughly a 20% market share. In the end, the project was not worth abandoning due to one version of Android, so we pushed on. This decision proved to be even better than we thought because most devices that run version 2.3 are old, which means less memory, a slower CPU and aging hardware.

To detect movement, we first have to detect an “idle” position. We instruct the user to set their phone down, while we check the readings on the x and y axis. We start a timer with a setInterval, and if that position’s values remain within a 6° range for a few seconds, then we save those values as the device’s idle position. (If the user moves, then we restart the timer again until the phone does not move for a few seconds.) From there, we listen for the DeviceOrientation event and compare the new position’s values to the idle values. If there is a difference, then we fire off a custom user_move event.

The concept was simple to implement, but we found that most devices fluctuate by a couple of degrees when lying still. The sensitivity to movement is quite high, so we first had to determine a threshold above which we could be confident that the user has intentionally moved their device. After some trial and error, we decided on a 12° range of difference (+ and -) from the idle position, on both the x and y axis. If any movement occurs outside of that range, we assume it to be deliberate. Thus, users can bump their phone slightly with no consequence.

    this.devOrientHandlerProxy = $.proxy(this.devOrientHandler, this);
    window.addEventListener('deviceorientation', this.devOrientHandlerProxy, false);
    
    MovementDetector.prototype.devOrientHandler = function(event) {
       var curr_x = Math.floor(event.beta);
       var curr_y = Math.floor(event.gamma);
       var curr_z = Math.floor(event.alpha);
    
       var didMove = this.calcMovement(curr_x, curr_y, curr_z, this.movement_threshold);
    
       if(didMove) {
          this.announceMovement();
       }
    }
    
    MovementDetector.prototype.calcMovement = function(new_x, new_y, new_z, threshold) {
       var x_diff = Math.abs(this.x_idle_pos - new_x);
       var y_diff = Math.abs(this.y_idle_pos - new_y);
       var z_diff = Math.abs(this.z_idle_pos - new_z);
       z_diff = z_diff > 180 ? 360 - z_diff : z_diff;
    
       return x_diff > threshold || y_diff > threshold || z_diff > threshold;
    }
    

As you can see in the first four lines of the calcMovement method, we are obtaining the difference between the idle position and the new position. Because the difference in values could be negative, we make sure to get the absolute value (Math.abs(val)). You’ll notice that the z_diff formula is a bit different. Because the value for z_diff is between 0 and 359, we have to take the absolute difference and then check to see whether the difference is above 130; if so, then we need to subtract that difference from 360.

This gives us the shortest distance between the two points. For example, if the device moves from 359 to 10, then the shortest distance would be 11. Finally, we check to see whether any of those three values (x_diff, y_diff, or z_diff) are greater than the threshold; if so, then we announce a user_move event.

Movement detection on iOS and Android (Samsung Galaxy S3 and HTC One). (View large version)

We had to test extensively across both Android and iOS devices. iOS was straightforward, whereas we found subtle differences between Android versions and manufacturers, especially with the stock browser. Certain devices would jump dramatically between values on the z-axis. Thus, we decided not to consider any movement on the z-axis in our detection — meaning that users could slide a phone laterally on a tabletop with no consequence.

User Exiting

Another action that we wanted to detect was the user exiting the browser, to signal their intention to end the experience. We had to listen for a couple of events via the PageHide and PageVisibility API. (PageHide or PageVisibility is available in Android only in later versions — in the stock browser in version 4.3+, and in Chrome 4+. iOS 6 has PageHide, and iOS 7 has PageVisibility.)

We knew we couldn’t detect across the board, but we felt that implementing it for browsers that support it would be worthwhile. The following matrix shows which mobile browsers support PageHide and PageVisibility:

Sleep Prevention

Keeping the device awake was the final core piece of functionality that we needed to detect user activity. This was crucial because the idea of the campaign is for users to stay away for as long as they possibly can. By default, all phones enter sleep mode after a few minutes. Some phones can be manually set to never sleep, or the user could keep it plugged in, but we could not rely on either of those options.

We had to think of interesting workarounds. iOS and Android had to be treated differently.

For iOS 6 devices, we make use of HTML5 audio and load a silent MP3 file asynchronously that loops endlessly during game play. We simply added the loop attribute, set to true, to our <source> element. For Android devices, we piggyback on what we do for iOS 6. However, Android’s display turns off after a few minutes even when an audio file is playing. Fortunately, unlike iOS, Android allows for inline video.

So, we run the same createMedia loop method shown above, but this time loading a 10-minute silent video with the <video> element, placed outside of the viewport. We found that the loop attribute doesn’t always work with inline video across Android devices, so we use HTML5’s media ended event instead. By looping a hidden video, we are able to keep Android devices from going to sleep.

Here is some sample code:

    //for iOS 6
    var media_type = 'audio';
    var media_file = 'silence.mp3';
    
    //for Android
    var media_type = 'video';
    var media_file = 'silence.mp4';
    
    ExampleClass.prototype.createMediaLoop = function(media_type, media_file) {
       this.mediaEl = document.createElement(media_type);
       this.mediaEl.className = 'mediaLoop';
       this.mediaEl.setAttribute('preload', 'auto');
    
       var mediaSource = document.createElement('source');
       mediaSource.src = media_file;
    
       switch(media_type) {
          case 'audio':
          //create an audio element in iOS 6
          //and play a silent MP3 file
          this.mediaEl.loop = true;
          mediaSource.setAttribute('type', 'audio/mpeg');
          break;
          case 'video':
          //create a video element for Android devices
          //and play a silent video file
          mediaSource.setAttribute('type', 'video/mp4');
          var _self = this;
    
          this.mediaEl.addEventListener('ended', function() {
              _self.mediaEl.currentTime = 0;
              _self.mediaEl.play();
          }, false);
          break;
       }
    
       this.mediaEl.appendChild(mediaSource);
       document.body.appendChild(this.mediaEl);
       this.mediaEl.volume = 0;
       this.start();
    }   
    

iOS 7 is much easier. Thanks to a UI update in the browser, the address bar always remains on screen, unlike in iOS 6. So, we call an update to the browser’s URL, running the method every 20 seconds, thus preventing sleep mode.

    setInterval(function(){
       window.location.href = 'tap.unicefusa.org';
       setTimeout(function(){
          window.stop();
       },0);
    }, 2e4);
    

We cannot use this method for iOS 6 because the user would notice the address bar slide into the view and then slide back out.

Animations

Animations are important in reinforcing the theme of water and making the experience fun. Whether we were creating a water-ripple effect, bubbles or waves, we isolated each animation and programmed different approaches to achieve the best result. Knowing that we had to do this for a slew of browsers by various manufacturers, we took the following into consideration:

• Performance
  Do frames get dropped when testing against supported devices? How does GPU rendering compare to CPU rendering?
• Value added
  How much does the animation really add to the experience? Could we conceivably drop it?
• Loading size
  How much does the animation add to the website’s overall load? Does it require a library?
• Compatibility with iOS 6+ and Android 4+
  Does it require complex fallbacks?

Bubbles

Let’s first look at bubbles, which animate from bottom to top. The design called for floating bubbles, whose size, focus and opacity would provide a sense of depth within the environment. We decided to test a few approaches, but these are the main two we were curious about:

• Animating DOM elements using hardware-accelerated CSS 3-D transforms (transform: translate3d(x, y, z));
• Rendering all circles on a 2-D canvas element.

Note: Animating via the top/left properties is not an option due to the lack of subpixel rendering and the long time to paint each frame. Paul Irish has written more about this.

We tested several approaches to find the best method to animate the bubbles. (View demo)

We pulled off the canvas method by creating two transparent canvases: one on top of the content and one below. We create our bubbles as objects with randomized properties in memory (diameter, speed, opacity, etc.). At each frame, we clear the canvas via context.clearRect(0, 0, width, height);, and then draw each bubble to the screen. To create a floating, bubble-like movement, we need to change each bubble’s x and y values in each frame. For the y-axis, we subtract a constant value in each frame: b.y = b.y - b.speed;.

In this case, we determine a unique speed for each bubble using (Math.random() / 2) + 0.1). For the x-axis, we need a smooth repetitive oscillation, which we can achieve by taking the sine value of its frame count: b.x = b.startX + Math.sin(count / b.amplitude) * 50;. You can view the extracted code and the demo.

The DOM-based implementation using CSS 3-D transforms follows a very similar method. The only big differences are that we dynamically create and insert DIV elements at the beginning and, using Modernizr, apply vendor-prefixed translate3d(x, y, z) properties on each animation frame. You can view the extracted code and the demo.

To optimize performance, we considered a canvas implementation because GPU acceleration has been enabled for the browsers we support (iOS 5 with its Nitro JavaScript, and Chrome for Android 4+); however, we noticed severe issues with aliasing and the frame rate on Android devices.

Timeline profiles using the canvas element and CSS 3-D transforms (View large version)

We also did some performance profiling in Chrome’s emulation mode on the desktop (better methods exist for doing more granular remote testing on a mobile device). The difference in results between the two was still interesting: A GPU-accelerated 2-D canvas showed better performance than GPU-accelerated CSS transforms, especially with a higher number of DOM elements, due to the rendering time for each one and the recalculation of styles.

After carefully considering several techniques, we went with CSS 3-D transforms to animate the bubbles. (View large version)

In the end, we used CSS 3-D transforms. We only need to animate 16 bubbles at a time, and the CPU and GPU on supported devices collectively seem to handle the overhead just fine. The performance and anti-aliasing issues with canvas rendering on old Android devices were the determining factors. At the time of writing and in this particular case, canvas wasn’t an option for us, but browser vendors certainly are not ignoring it, and the latest rendering engines of mobile browsers have seen massive improvements.

Waves

We use wave animations throughout both the mobile and desktop experience — specifically, as a design detail to reinforce the water theme and as a transition to wash away old content and bring in new content. As with the bubbles, we explored using both canvas and CSS-based animations. And likewise, CSS animations were the way to go. A wave PNG costs us only 7 KB, and we get much better performance from mobile browsers across the board.

As with bubbles, we explored using both canvas and CSS-based animations. (View demo)

Our isolated demo of the desktop implementation (which is similar to mobile) is really quite simple. Each wave is a background image set with background-repeat:repeat-x and a looping keyframe animation that moves left with linear easing. We make the speed of the waves in front slightly faster and the waves in the back slower to simulate depth. You can view the code, which uses Sass and Compass.

We also tried a very different vanilla JavaScript approach by creating a wave oscillation. We used a wave oscillator algorithm created by Ken Fyrstenberg Nilsen, adjusting it to suit our needs. You can view this demo, too.

We abandoned the oscillation effect because of poor performance on old Android devices.

The effect turned out to be really nice and organic, but the performance was lacking on old Android devices, so we abandoned the approach altogether.

API

During gameplay, we wanted to provide some insightful facts and location-based statistics, as well as encourage users to keep playing. We used several APIs, combining them with scores from our database.

The back end is run off of the Laravel PHP framework and a few APIs. For location-based statistics, we could have asked the user for their location via HTML5 geolocation, but we wanted a more seamless experience and didn’t want to interrupt the user with a confirmation dialog box. We don’t need a precise location, so we opted for MaxMind’s GeoIP2 service. This service gives us enough data to get the user’s rough location, which we can combine with other services and data.

We also want people to know that they are a part of a bigger community, so we wanted to provide statistics based on website analytics. The obvious choice was to use Google Analytics’ new API, as well as its newer Real Time Reporting API.

Because we have access to different kinds of data, we are able to display facts that are relevant to the user. For example, a user in the US would get a statistic on how their state compares to other states in the country, according to Google Analytics. By using Google’s Real Time Reporting API, we see how many active users are on the website, and we display that to the user, illustrating other people’s participation. In our PHP code, we use Google Analytics for Laravel 4 which works great and handles a lot of code, making it much easier to get data back from Google Analytics’ API.

    $ga_realtime_metric = 'ga:activeVisitors';
    $ga_service = Analytics::getService();
    $optParams = array('dimensions' => $this->ga_dimensions, 'sort' => '-'. $this->ga_realtime_metric);
    
    $results = $ga_service->data_realtime->get([google profile id], $ga_realtime_metric, $optParams);   
    

We also use GeoIP2’s service to record people’s times, to display the score of a particular city or state.

To prepare for spikes in traffic, to stay within each API’s rate limit (Google Analytics’ limit is 50,000 requests per project per day) and to optimize speed, we cache some data at 10-minute intervals. We cache certain other data, such as GeoIP2’s, even longer (every five days) because it doesn’t change that often.

Due to the ever-growing number of scores, the queries to retrieve certain statistics would take longer than is acceptable for each user. So, we set up a couple of CRON jobs to set these queries to run every 10 minutes, caching the updated statistics on the server.

When a user hits the website, an AJAX call to the server asks for the cached data, which is returned to the browser in a big JSON response. This increases loading times considerably and keeps us within the rate limit for each API that we use.

Conclusion

As mobile browsers continue to improve, offering new features and enhancing performance, new opportunities like this will arise. It’s always important to question whether you should build a native app or a Web app, and keep in mind the pros and cons of each, especially because the differences in their capabilities are narrowing rapidly.

Developing our Tap app for the Web not only was more affordable (with two Web developers working on a single code base, as opposed to a developer for each platform), but made it more accessible and easily shareable. We’ll never know, but we’re confident that we would not have reached 3.7 million website visits in the first month had we gone the native route. About 18% of those visits came from Safari in-app browsers — meaning that people had clicked on a link in their Facebook or Twitter feed and were taken directly into the experience. A native app would have seriously hampered that ability to share the experience or message quickly.

We hope this article has been helpful in illustrating both the thought process of Web versus native and the technical hurdles involved in building Tap. The project was really fun and challenging, it was for a good cause, and it introduced a unique mechanism for donating, one that we hope to see propagate and manifested in new and creative ways.

Further Ressources

• “This End Up,” Peter LePage
  A great article about DeviceMotion and DeviceOrientation events
• “Using the Page Visibility API,” Mozilla Developer Network
• Reporting Developer Guides,” Google Developers
  More information about Google Analytics’ APIs
• “Quote Management,” from “Real Time Reporting API: Developer Guide,” Google Developers
• “Why Moving Elements With Translate() Is Better Than Pos:abs Top/left”, Paul Irish

(al, il, ml)

© Nick Jonas und Francis Villanueva for Smashing Magazine, 2014.

CSS3 gives designers many new properties and modules (like the CSS Animations and CSS Transitions modules) that allow them to add fascinating interactivity onto their work.

If you want to take advantage of these modern CSS capabilities, one quick way to do that would be to use (or study) CSS effects libraries. Let me talk about a few open source collections of CSS that will help you craft great transitional interfaces.

1. Animate.css

Animate.css is a collection of over 60 CSS effects by Daniel Eden, a designer at Dropbox. Daniel Eden’s work on Animate.css is an inspiration to some of the other CSS effects libraries below.

• License: MIT
• Demo
• Docs
• Download from GitHub

2. Hover.css

This is a huge collection of 48 CSS3 hover effects by front-end developer, Ian Lunn. What’s cool about Hover.css is it comes with a SASS version, which is really, really handy for a whole lot of us.

• License: MIT
• Demo
• Docs (tutorial)
• Download from GitHub

3. fancyInput

fancyInput deals specifically with interactions related to your HTML <input> and <textarea> elements. It gives you the ability to implement interesting CSS effects when users type into your form fields.

• License: Unknown
• Demo
• Docs
• Download from GitHub

4. magic

(Note: The link above goes to an Italian-language website.)

magic is an interesting collection of CSS3 effects. The magic project is inspired by Daniel Eden’s work on Animate.css and is by an Italian developer who goes by the moniker, miniMAC.

With magic, you can easily trigger CSS animations and transitions using jQuery (or your preferred JavaScript front-end web development framework) simply by setting event listeners on your target HTML objects and then adding/removing the magic-specific CSS animation classes when the event occurs.

For example, say we have a button called #submit-button and we wanted to remove it from the DOM — which is a design pattern for critical interactions where you don’t want users to keep clicking on a button that’s intended to be pressed only once — but we wanted to do it in an impressive, transitional way to make sure the user doesn’t get confused and left wondering where the button went, all we would need to do is this (using jQuery):

$('#submit-button').click(function(){
      $(this).addClass('magictime vanishOut')
    });
    

• License: Unknown
• Demo [Has looping background audio]
• Docs
• Download from GitHub

5. Effeckt.css

Effeckt.css — which is still a work in progress — is a Mobile First library of animation and transition CSS effects. The effects included are contributed and curated by designers to make sure they’re tasteful. Effeckt.css strongly emphasizes on performance, one criteria being if it can’t run well at 60fps on mobile devices, it’s out. Read the 9 goals of Effeckt.css and watch the project’s 22-second video on YouTube to get a glimpse of Effeckt.css’s future.

• License: MIT
• Demo
• Download from GitHub

This isn’t an exhaustive list of CSS effects libraries. I’m sure I’ve missed some equally great projects out there. If you know of an open source project that should’ve been on this list, or if you’re working on one, please share it with us in the comments. Thanks!

Related Content

• 8 Ways to Add a Responsive Navigation Menu on Your Site
• 5 Reasons Why Metaphors Can Improve the User Experience
• Mobile UI Design Patterns
• Related categories: Tools and User Interface

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post 5 CSS Effects Libraries for Supercharging Your Designs appeared first on Six Revisions.

At this year’s 23rd International World Wide Web Conference (WWW2014), W3C organizes W3C tutorial and W3C tracks where conference participants are invited to learn from, meet and discuss with our team of experts. With the conference located in Korea, the W3C track sessions also cater specifically for the Korean industry. The presentations and discussions are about Web Cryptography, Web Publishing, Web & TV, and Web accessibility. W3C and Tim Berners-Lee will dedicate the last W3C track session to the Web 25th birthday; ideas for the Web came and are still coming from the WWW conference series, thus we will give the floor to the audience and ask conference participants how they see the Web evolving in the next 25 years. So, come and discuss!

It’s been a busy month for theme designers & developers as a large number of new themes were released, making this a great time to update your site if it is in need of a new look. Some of the overall trends in web design are showing through in theme design as well: flat design and big photos rule.

Every month we’ll be bringing you our pick of the best free WordPress themes released in the previous four weeks. Here are our favorites for April:

Aadya

This fully responsive, retina-ready theme is built on the Twitter Bootstrap framework and includes quite a few features often found only in premium themes. Some of the best options include 12 widget areas, multiple page layouts, a nice front page slider, custom logo and background options, multiple menu locations and comes “out of the box” search engine optimized.

Cubby

This fully responsive theme comes with an extensive admin panel with plenty of options to maximize your site and customize it. The theme is tested and works with most popular browsers. Plus, Cubby includes multiple social media icons that you can use in your overall site design and a nice homepage slider.

RedPro

Designed for business websites, RedPro is built on the Twitter Bootstrap framework and features a simple design. The theme includes three page layouts, is W3C validated and SEO friendly.

MaxFlat Core

This theme features fun styling effects with high color contrast and fun typography. The responsive theme allows for color and logo customization and includes a tool to see changes in real-time before you save. The theme is built on Zurb’s Foundation framework and would be a good blog option.

Midnight City

If you like options, then you will love Midnight City. This theme is packed with typography choices (including 220 Google fonts), one- or two-column layouts, two different header options, four different color schemes, multiple language translation and custom CSS options. The theme is also responsive and works in a variety of browser environments.

Socialize Lite

This lightweight theme is simple and would make a great fit for a blog or magazine-style website. Socialize Lite is responsive and features both top navigation and card-style posts and a sidebar area. As the name suggests, this theme is also packed with tools to help share posts on social media.

Agency

The free version of the Agency theme includes enough options to get started with a nice and clean website design. It includes a featured slideshow, multiple theme options, sidebars that can be used for widget areas, drop-down menus and threaded commenting. The theme also has a clean look, making it appropriate for a small business site.

New Gamer

This modern and masculine theme is designed just for video gamers, with a dark color scheme. Both the colors and layout are created to accommodate a game-based website. Neat Gamer also includes plenty of customization options and a widget area.

SunRain

SunRain is a powerful theme with a lot of extras, making it an option for almost any type of site from personal to business. The theme is easy to use and packed with customization options. SunRain also includes a multi-layer slider (a very popular option), widget areas, custom areas for menus and backgrounds, multiple page templates and “sticky” posts. The two-column format also features simple and modern type styles for a themed site that will stand out.

TaraLi

This simple responsive theme features locations for big images and plenty of text. The theme includes multiple sidebar options and complete customization of the header and home page. The SEO-friendly theme includes plenty of color and font options as well to help create a site that is your own.

WPChimp Countdown

Planning to launch a site soon? This is the countdown theme to use while you are putting the finishing touches on your final site. This simple counter tells visitors when the new site will go live and can help generate buzz for your product or site launch. The minimal and clean look has a modern feel and includes an email signup form.

Athenea

Athena is a fully responsive theme with a lot of different configurations for content. The theme also features a large main image area and header that collapses as users scroll down through the site. This theme is great for websites that will be viewed by international audiences as well with 25 language options.

Capture

While there aren’t that many free themes designed for photographers, Capture makes the most of showcasing images. The photo blogging theme features a full screen image slideshow tool and has lightweight code so that everything loads quickly. The design of the theme is super-simple, allowing the photos to stand out in the design.

Catch Kathmandu

You would not know from a quick look that Catch Kathmandu is a free theme, because it is packed with features that are often found in premium options. The theme is packed with customization options, is fully responsive and has plenty of space for text and visuals. This theme also includes a featured post slider; webmaster tools; custom favicon, header, footer, background and menu; and custom widgets. Plus Catch Kathmandu is WooCommerce ready and can be used for business websites.

DW Timeline

This theme makes the most of one of the big web design trends right now, blurred images behind a color overlay. This theme design can work for both blog and portfolio sites and supports six different post formats. The theme has customization options for the header image and background and call to action buttons.

Graphy

The top feature of Graphy is typography. This theme is made for bloggers who want to showcase their words with beautiful and elegant type and little else. The responsive design was developed using mobile-first thinking and includes five widget options.

Hemingway

Hemingway is a great theme for sites with impressive images or visuals. The two-column design features large image areas and multiple post formats. The theme is responsive and retina-ready, so your images will always look crisp and sharp. Available widget areas include feeds for video, Flickr and Dribbble, making this a good portfolio theme.

Radiate

Radiate is a great theme with a lot of modern extras. The theme includes a parallax header, customizable color options, customizable CSS, infinite scrolling, translation to several languages and supports the WordPress gallery. The header effect is especially nice with a hint of transparency. This is a robust package for a free theme with a modern look and feel featuring a flat design style.

Skeleton

Skeleton is a simple, responsive WordPress theme built on the “smpl” framework from Simple Themes. Skeleton features multiple widget locations—a popular element—multiple color palettes, multi-level navigation, SEO tools and Adobe Photoshop source files. The theme package also includes CSS customization options for more advanced users.

Circumference Lite

Circumference Lite is a clean, flexible and fully responsive theme for business websites, shops and organizations. The theme is built on the Twitter Bootstrap framework and comes with plenty of customization options for colors, layout and styling. This theme also includes multiple post formats.

Split Me

This super-simple theme features a split panel design for two types of content. In this design, you can pair text and an image, or navigation and posts, or an image and gallery. There are no bells and whistles here and very few options for customization, but the theme is clean, simple and ready to use.

StartPoint

This single-page theme has a super-clean layout and is made for simplicity. While it does not have a lot of customization options, users can download this theme and have a simple and easy to look at site online in just a few minutes. StartPoint is fully responsive and features full-width images.

Infinite

This responsive theme features a clean and simple design that could work for both business or personal portfolio websites. The theme is retina ready and includes a variety of customization options, including multiple color schemes. Infinite is built on the Twitter Bootstrap framework and uses the latest HTML5 and CSS3 tools for a great user interface.

Lupercalia

Lupercalia is made for social mavens. This theme includes tools for linking to a variety of social media sites, including Facebook, Flickr, Google+, Instagram, Pinterest, twitter, Vimeo and YouTube. It also includes plenty of customization options, sliders and featured posts. The overall look of the responsive theme is somewhat feminine but can be altered.

Market

This theme is designed with e-commerce in mind and is WooCommerce-ready. The theme is built in a minimalistic style and includes great spaces for images and some nice CSS3 animations. Market is fully responsive and if you like the look and don’t need the sales tools, it can be used without those plugins.

Minima Lite

This theme has a modern and flat design featuring a 12-column responsive layout. The free version of the theme includes a powerful appearance editor for changing color schemes, typography and layout options. Minima Lite also features a ton of blog elements such as short codes, custom widgets and is translation-ready.

Bundle of Gorgeous Handmade Image Fonts – only $39!

Travel Funds for Conferences!

• Keystone Conferences – Biomedical Sciences –  international opportunities — Assistant Professors, and Industry scientists
• College Park Conference – Hierarchical Modeling in Observational Studies, Complex Surveys and Big Data: Areas: statistics, biostatistics, survey methodology

BIOMEDICAL: KEYSTONE CONFERENCES

Diversity in Life Science Programs (DLSP) at Keystone Symposia has just been advised that it will receive additional funds to support assistant professors and scientists from industry at an equivalent level who wish to attend Keystone Symposia meetings. The particular meetings available to attend are listed below. These are the only meetings available for this particular funding. The award is a reimbursement award, and will cover registration fees, lodging, airfare and ground transit.

The time frame is very tight and I ask for your help in sharing this information with any assistant professor or scientist from industry at equivalent level in life and biomedical sciences. You can forward this message or advise individuals to contact me directly. Please share on your networks right away. The eligibility criteria are as follows:

• Applicant must be assistant professor or scientist from industry at equivalent level
• Applicant must be engaged in laboratory research and have a particular research question which they are working to answer
• Applicant’s research must  be applicable to one of the meetings listed in the lower portion of this message
• Applicant must be a member of a federally designated underrepresented population (African American, Hispanic American,  Native American or Alaska Native, Native Hawaiian or Pacific Islander)
• Applicant must be a United States Citizen or Permanent Resident of the United States
• Applicant must be in life or biomedical sciences
• We ask that the applicant, if awarded, consider mentoring a student in his/her laboratory for a period of one year

Keystone Symposia meetings available to attend using this funding:

Adult Neurogenesis (E1)

Scientific Organizers: Jonas Frisén and Fred H. Gage

May 12—17, 2014

Clarion Hotel Sign, Stockholm, Sweden

Keystone Symposia E1

Autophagy: Fundamentals to Disease (E2)

Scientific Organizers: Christina H. Eng, Daniel J. Klionsky, Guido Kroemer and Li Yu

May 23—28, 2014

Hyatt Regency Austin, Austin, Texas, USA

Keystone Symposia E2

The Brain: Adaptation and Maladaptation in Chronic Pain (E3)

Scientific Organizers: Frank Porreca, David Borsook and David W. Dodick

June 15—20, 2014

Keystone Resort, Keystone, Colorado, USA

Keystone Symposia E3

The Modes of Action of Vaccine Adjuvants (S1)

Scientific Organizers: Philippa C. Marrack, Steven Reed and Robert A. Seder

October 8—13, 2014

Sheraton Seattle Hotel, Seattle, Washington, USA

Keystone Symposia S1

Cell Death Signaling in Cancer and the Immune System (S2)

Scientific Organizers: Gustavo Amarante-Mendes, Douglas R. Green and Kim Newton

October 28—November 2, 2014

Casa Grande Hotel, Guaruja, São Paulo, Brazil

Keystone Symposia S2

If you have any questions, please contact Bridget Stacy at bstacy@keystonesymposia.org.

SOCIAL SCIENCE: CONFERENCE AT COLLEGE PARK

This announcement was shared by Dr. Kim Nickerson, UMCP Assistant Dean for Diversity, College of Social and Behavioral Sciences:

Conference Financial Support for Students and Young Researchers

The Joint Program in Survey Methodology (JPSM) is pleased to announce a limited number of awards to assist young researchers who graduated no earlier than 2009 and students currently enrolled in a graduate degree program in statistics, biostatistics, survey methodology or a related area in a U.S. university to attend the conference on Frontiers of Hierarchical Modeling in Observational Studies, Complex Surveys and Big Data.  The Joint Program in Survey Methodology (JPSM) is the nation’s oldest and largest program offering graduate training in the principles and practices of survey research.  Please visit  http://www.jpsm.umd.edu/ to learn more about JPSM.

This conference  will be held May 29-31, 2014, at the University of Maryland, College Park campus. The conference is hosted by the Joint Program in Survey Methodology (JPSM).  The awards, funded by the National Science Foundation (upon final approval), Westat, and the Washington Statistical Society (WSS), will support about 14 travel awards to cover registration and travel expenses up to a maximum of $800 and, in addition, about 14 registration waivers. Please visit http://www.jointprogram.umd.edu/ghosh/default.aspx for details about the conference and instructions on the application procedure. The conference organizers are especially interested in attracting minority/underrepresented students and junior scientists to this conference.

Applications must be sent to Prof. Yan Li at yli@umd.edu no later than April 15, 2014.

Frontiers of Hierarchical Modeling in Observational Studies, Complex Surveys and Big Data

Date:  May 29-31, 2014

Location:  College Park Marriott Hotel and Conference Center

University of Maryland, University College

Hotel Accommodations:  College Park Marriott Hotel and Conference Center

Conference Support Amount:  Maximum of $800 travel support, plus the waiver of conference registration fees

How to Apply:  Please visit http://www.jointprogram.umd.edu/ghosh/default.aspx for details about the conference and instructions on the application procedure.  Applications must be sent to Prof. Yan Li at yli@umd.edu no later than April 15, 2014.  The conference organizers are especially interested in attracting minority/underrepresented students and junior scientists to this conference.

Travel Funds for Conferences!

• Keystone Conferences – Biomedical Sciences –  international opportunities — Assistant Professors, and Industry scientists
• College Park Conference – Hierarchical Modeling in Observational Studies, Complex Surveys and Big Data: Areas: statistics, biostatistics, survey methodology

BIOMEDICAL: KEYSTONE CONFERENCES

Diversity in Life Science Programs (DLSP) at Keystone Symposia has just been advised that it will receive additional funds to support assistant professors and scientists from industry at an equivalent level who wish to attend Keystone Symposia meetings. The particular meetings available to attend are listed below. These are the only meetings available for this particular funding. The award is a reimbursement award, and will cover registration fees, lodging, airfare and ground transit.

The time frame is very tight and I ask for your help in sharing this information with any assistant professor or scientist from industry at equivalent level in life and biomedical sciences. You can forward this message or advise individuals to contact me directly. Please share on your networks right away. The eligibility criteria are as follows:

• Applicant must be assistant professor or scientist from industry at equivalent level
• Applicant must be engaged in laboratory research and have a particular research question which they are working to answer
• Applicant’s research must  be applicable to one of the meetings listed in the lower portion of this message
• Applicant must be a member of a federally designated underrepresented population (African American, Hispanic American,  Native American or Alaska Native, Native Hawaiian or Pacific Islander)
• Applicant must be a United States Citizen or Permanent Resident of the United States
• Applicant must be in life or biomedical sciences
• We ask that the applicant, if awarded, consider mentoring a student in his/her laboratory for a period of one year

Keystone Symposia meetings available to attend using this funding:

Adult Neurogenesis (E1)

Scientific Organizers: Jonas Frisén and Fred H. Gage

May 12—17, 2014

Clarion Hotel Sign, Stockholm, Sweden

Keystone Symposia E1

Autophagy: Fundamentals to Disease (E2)

Scientific Organizers: Christina H. Eng, Daniel J. Klionsky, Guido Kroemer and Li Yu

May 23—28, 2014

Hyatt Regency Austin, Austin, Texas, USA

Keystone Symposia E2

The Brain: Adaptation and Maladaptation in Chronic Pain (E3)

Scientific Organizers: Frank Porreca, David Borsook and David W. Dodick

June 15—20, 2014

Keystone Resort, Keystone, Colorado, USA

Keystone Symposia E3

The Modes of Action of Vaccine Adjuvants (S1)

Scientific Organizers: Philippa C. Marrack, Steven Reed and Robert A. Seder

October 8—13, 2014

Sheraton Seattle Hotel, Seattle, Washington, USA

Keystone Symposia S1

Cell Death Signaling in Cancer and the Immune System (S2)

Scientific Organizers: Gustavo Amarante-Mendes, Douglas R. Green and Kim Newton

October 28—November 2, 2014

Casa Grande Hotel, Guaruja, São Paulo, Brazil

Keystone Symposia S2

If you have any questions, please contact Bridget Stacy at bstacy@keystonesymposia.org.

SOCIAL SCIENCE: CONFERENCE AT COLLEGE PARK

This announcement was shared by Dr. Kim Nickerson, UMCP Assistant Dean for Diversity, College of Social and Behavioral Sciences:

Conference Financial Support for Students and Young Researchers

The Joint Program in Survey Methodology (JPSM) is pleased to announce a limited number of awards to assist young researchers who graduated no earlier than 2009 and students currently enrolled in a graduate degree program in statistics, biostatistics, survey methodology or a related area in a U.S. university to attend the conference on Frontiers of Hierarchical Modeling in Observational Studies, Complex Surveys and Big Data.  The Joint Program in Survey Methodology (JPSM) is the nation’s oldest and largest program offering graduate training in the principles and practices of survey research.  Please visit  http://www.jpsm.umd.edu/ to learn more about JPSM.

This conference  will be held May 29-31, 2014, at the University of Maryland, College Park campus. The conference is hosted by the Joint Program in Survey Methodology (JPSM).  The awards, funded by the National Science Foundation (upon final approval), Westat, and the Washington Statistical Society (WSS), will support about 14 travel awards to cover registration and travel expenses up to a maximum of $800 and, in addition, about 14 registration waivers. Please visit http://www.jointprogram.umd.edu/ghosh/default.aspx for details about the conference and instructions on the application procedure. The conference organizers are especially interested in attracting minority/underrepresented students and junior scientists to this conference.

Applications must be sent to Prof. Yan Li at yli@umd.edu no later than April 15, 2014.

Frontiers of Hierarchical Modeling in Observational Studies, Complex Surveys and Big Data

Date:  May 29-31, 2014

Location:  College Park Marriott Hotel and Conference Center

University of Maryland, University College

Hotel Accommodations:  College Park Marriott Hotel and Conference Center

Conference Support Amount:  Maximum of $800 travel support, plus the waiver of conference registration fees

How to Apply:  Please visit http://www.jointprogram.umd.edu/ghosh/default.aspx for details about the conference and instructions on the application procedure.  Applications must be sent to Prof. Yan Li at yli@umd.edu no later than April 15, 2014.  The conference organizers are especially interested in attracting minority/underrepresented students and junior scientists to this conference.

Alpha Software Corporation has announced the release of Alpha Anywhere 2.0, enabling developers to produce enterprise-level hybrid business applications that run on multiple mobile devices and the web.

Adobe and KelbyOne partner to bring free Lightroom Mobile Training to the public.