Responsive Web Design (RWD) vs Adaptive Web Design (AWD)

We’ve heard the terms Fluid, Adaptive, and Responsive used interchangeably when describing a theme’s ability to resize according to browser specs or device (mobile or not) size. Are they really different from one another or are they referring to the same characteristics found in themes described as such?

What is Responsive Web Design (RWD)? Responsive Layout?

Let’s take a closer look.

Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) – Wikipedia

Responsive design is the methodology behind making a website respond to whatever platform you are viewing it on regardless of resolution and orientation. It may change how certain elements display but it will not remove elements or change the core functionality of their behaviours. Responsive design uses a fluid grid and it is usually possible entirely through HTML and CSS, without the need for DOM (Document Object Model) manipulation. – Matthew Freeman

According to Ethan Marcotte, The 3 Elements of Responsive Web Design are:

A flexible, grid-based layout – A layout based on proportions rather than absolutes; uses a flexible grid, which in turn ensures that a website can scale to a browser’s full width.

Flexible images and media – Layouts based on percentages resize gracefully according to the size of the browser window rendering them. However, it is problematic to ensure that the content within a site resizes.
Images and media should scale with the flexible grid; images that work in a flexible context, whether fluid themselves or perhaps controlled through overflow mechanisms. CSS addresses this problem with its max-width property

Media queries – Content based breakpoints; optimize the design for different viewing contexts and spot-fix bugs that occur at different resolution ranges. CSS3’s media queries directly address these usability problems by allowing browsers to serve different styles for different viewing contexts. CSS3 greatly expands support for media queries, adding the ability to target media features such as screen and device width and orientation.

These 3 elements of Responsive Web Design find their way into 3 different types of Responsive (RWD) Layouts:

The Basic Fluid Lay­out
Con­tent con­tin­u­ally flows or adjusts in a word-wrap fash­ion as screen width is increased or reduced. There are no “dis­tinct” dif­fer­ences in con­tent pre­sen­ta­tion. Fluid layouts are dynamic and user sensitive – adapting to the available real estate on the user interface and providing increased content accessibility.

The Adap­tive Lay­out
There are pre­de­fined sizes were dif­fer­ent lay­outs are trig­gered. These are called breakpoints. Typ­i­cally there are three or four break­points to accom­mo­date desk­top, tablet and mobile screen sizes.

The Respon­sive Lay­out
This is a hybrid of Basic Fluid Lay­out and Adap­tive Lay­out. There are pre­de­fined break points, how­ever in between these breakpoints con­tent will flow to expand or con­tract.

According to his article for the Adobe Blog, Carl Sandquist states that:

“Cur­rently, most RWD web sites use Respon­sive Lay­out since it offers a best-of-both-world expe­ri­ence. Con­tent snaps into the appro­pri­ate approx­i­mate posi­tion for a device type (e.g. Tablet) and then fine-tuned adjust­ments are made for the exact screen size on a par­tic­u­lar device.”

What is Adaptive Design (AWD)? Adaptive Layout?

“Adaptive design is the manipulation of layouts to best perform on certain screen resolutions inclusive of elemental removal or behaviour changing techniques. Adaptive design usually requires Javascript to efficiently manipulate the DOM. Javascript can be avoided if you plan on having duplicate on-page elements and then show or hide them based on screen sizes, this might be appropriate for smaller elements but not whole columns or navigation elements.” – Matthew Freeman

“This technique adapts what is displayed depending on the capabilities of the device being used, as well as the screen size. It centres on the context of the user, so even when the same content is used, it is adapted (with some or even all of the design elements changing), depending on whether the user is using a mouse and keyboard or touch screen. AWD also uses different layouts for tablets and mobiles with certain. ‘Responsive’ elements built in to reduce the number of different templates required. AWD can be taken to further extremes with content being completely repackaged and reworded, while images and video are either reworked or completely removed.” – Danny Bluestone

According to Aaron Gustafson, author of Adaptive Web Design, Crafting Rich Experiences with Progressive Enhancement:

“Progressive enhancement isn’t about browsers. It’s about crafting experiences that serve your users by giving them access to content without technological restrictions. Progressive enhancement doesn’t require that you provide the same experience in different browsers, nor does it preclude you from using the latest and greatest technologies; it simply asks that you honor your content (and your users) by applying technologies in an intelligent way, layer-upon-layer, to craft an amazing experience.

He encourages designers to: Think of the user, not the browser.”

Which one is better?

A better understanding of the differences between Responsive Web Design and Adaptive Web Design is a starting point to deciding which solution will work well for you, or your clients, if you are a WordPress professional. Knowing what solutions are available and having the ability to distinguish and implement whichever design approach best meets the specifications of the end user is an important element. Of course, nothing is carved in stone. Future designs may be a combination or a hybrid of both – employing the best features of each one. The goal is to ensure that the user experience at the point of searching and eventually finding your website is the best experience they get at that particular moment – fully hoping that it will be the first of many more visits and not their last.

Nimble Theme by Elegant Themes

Nimble Premium WordPress Theme is a well balanced theme in a lot of aspects. The theme’s demo displays a combination of colors that is pleasing and attractive to the eyes. Its styling is bold but still effectively leaves makes clever use of white space giving the eyes a place to rest strategically. The overall design is balanced and looks beautiful on large monitors as well as on smartphone displays. It is indeed aptly called “Nimble” as it is flexible enough to adapt to various types of websites.

Nimble’s homepage is deliberately section giving it that clearly defined look. Each section has its own color scheme, effectively transitioning users from one section to the next as they scroll through the page. The top section contains a beautiful, full width slider for showcasing attention grabbing works and taglines. Clicking on a slide takes you to a page that contains details of the featured work or post. This section transitions into another section which can be used to give a bird’s eye view introduction about important information such as the company, mission, vision, product/service summaries or other types of information. This is further enhanced by call to action buttons at the bottom of the boxes that take you to pages where you find more exhaustive descriptions. There is also a section that can be used for special quotes, taglines or announcements. The next sections can be configured to contain recent news and updates, recent blog posts, recent portfolio additions, and even a price table to complete the whole layout. All these customizations can be easily handled via the ePanel Theme Options feature included in all Elegant Themes WordPress themes.

Nimble’s responsive design is quick and impressive. Images and content quickly resize to the width of your browser or the screen size of your handheld device. This means that your visitors can expect a pleasant browsing experience all the time.

More Features:

  • Responsive design
  • ePanel Theme Options
  • Large collection of shortcodes
  • Premade Page Templates
  • Perpetual Updates
  • Secure and Valid Code
  • Browser Compatibility
  • Complete Localization
  • Five Unique Colors
  • Unparalleled Support

Nimble Premium WordPress Theme includes top-notch tech support provided by Elegant themes’ support staff to help you setup your site and get it running in no time.

Nimble Theme: $39 | Demo & Download

Free WordPress Themes 2013: Trends

Free WordPress themes have come a long way since Kubrick. Twenty Ten, Twenty Eleven, and the latest – Twenty Twelve – is the newest Kubrick as far as Free WordPress themes go. Twenty Twelve is the current default WordPress theme.

Let’s take a look at some of the features of this free default WordPress theme:

  • Front Page Template where you can add text, images, video
  • Responsive, Mobile-first Layout
  • Custom ”Open Sans” Font
  • Custom post formats: links, quotes, asides, statuses, images
  • Widgets and No-sidebar layout
  • Custom menu, custom header image, custom background color and image
  • Multi columns
  • Sidebar
  • Flexible width
  • Editor style
  • Flexible header
  • Featured images
  • Full width template
  • Post formats
  • Sticky post
  • Theme options
  • Infinite Scroll

Those are a lot of features coming from a free WordPress theme, don’t you think? And most of these features are what you also get from a lot of Premium WordPress themes. If we use Twenty Twelve as our standard, what then can we expect in 2013, as far as Free WordPress themes are concerned?

  • All of the features listed above will become standard features
  • More Premium-like features
  • eCommerce options
  • Typography options
  • Drag and drop options
  • Page-builder options
  • More Single Page Themes
  • Free themes for email, mobile, etc.
  • HTML5 and CSS3 and adhering to WordPress Coding standards

Many WordPress themes authors, providers and developers give away free themes as samples of their work. These samples, albeit free, are not necessarily inferior to Premium themes being sold in the marketplace. In truth, some of them are even better (or Best – shameless plug). The fact that these free samples are marketing tools to introduce these new authors to the market should be a weighty incentive for them to release high quality products that will catch the attention of WordPress professionals who are always on the lookout for something fresh.

Comment Management Solutions for WordPress

Who doesn’t love Spam? We’ve consumed cans and cans of this comfort food and we never get tired of it. Unfortunately, spam has become synonymous with what the internet hates the most – especially by bloggers. Too much of it is just pretty hard to ignore.

Comments – Love ’em. Hate ’em.

Admit it. When you started out blogging, you would check your blog everyday to see if someone left you a comment on your post. AND, you were absolutely thrilled when someone actually did. Never mind that it wasn’t from some popular blogger or someone famous. Someone left a comment. Hooray!

Soon after, someone left another comment. And another comment. And another comment. And another comment – this time with a link. More comments. More links. And pretty soon, your dashboard is exploding with millions of comments and links that have nothing to do with your blog post. “Hello world.” just turned into “Hello spam.” Now, you’ve probably realized that more doesn’t exactly mean great. What to do?

Approve. Reply. Delete. Trash.

WordPress has a built-in system that can handle all the basic comment management requirements necessary like approving, replying, deleting, or trashing comments. However, the native WordPress system, albeit simple and easy to use, has its limitations and the more savvy users need more than just the basics. Features like social media integration, media support, public user profiles, or better spam filtering options cause people to turn their heads to third-party solutions especially when comments flood the back end and become challenging to monitor and manage.

Ban-The-Spam Solutions

Why ban the spam? Spam is a global problem and often WordPress comments are the place when bots try to enter bogus content full of links to their sites. Here are some of the blog comment systems and/or plugins you can use on your websites to help you manage those annoying spam comments.

  • WordPress Default Comment System – built-in comment management system that’s simple and easy to use but needs supplemental plugins to ban spam effectively.
    Cost: FREE
  • Akismet – It is an external service for battling spam with a database of known emails, IP addresses, and usernames used for sending spam. This advanced hosted anti-spam service efficiently processes and analyzes masses of data from millions of sites and communities in real time. When a visitor submits a comment, it is checked by Akismet and put in a special Spam folder to be managed by the website admin later on.
    Cost: FREE (Personal, Non-commercial sites/blogs)
    • $5-$50 (For commercial, business, and professional sites / For publishing networks, agencies, hosts, and universities)
  • Disqus – Disqus, Inc. is a blog comment hosting service for web sites and online communities that uses a networked platform. The company’s platform includes various features, such as social integration, social networking, user profiles, spam and moderation tools, analytics, email notifications, and mobile commenting. Features a powerful moderation dashboard and all the filters you’d expect: blacklists, whitelists, spam controls, and word filters.
    Cost: FREE (core version)
  • Livefyre – Livefyre Comments 3 is a comment platform for real-time conversations. Important features include real-time user generated content-publishing, mobile device-friendly, real-time profanity filters that administrators can moderate and flag comments from directly within the stream, or block by IP address and Web Browser, social media and multi media support.
    Cost: FREE (basic version)

Other practical tips to manage spam:

  • Control which comments are automatically published and which ones need to be moderated. WordPress has a built-in provision for this.
  • Tag comments that have more than one link to be manually approved.
  • Create a blacklist and/or white list of frequent commenters.
  • Disable comments on older posts and pages.
  • Install tried and tested WordPress plugins or 3rd-party plugins to beef up your comment management system.
  • Wipe out your spam folder regularly.

WordPress and Cloud Storage Apps – How Safe is Your Data?

Up, Up, and Away!

We somehow have this picture in our minds that all the stuff we upload online is somehow floating over our heads, whisked way, way up into cyberspace. But what do we know about Cloud Storage and what really happens to all the files we upload? Maybe some people can probably relate to this old song about clouds by Joni Mitchell.

I’ve looked at clouds from both sides now
From up and down and still somehow
It’s cloud’s illusions I recall
I really don’t know clouds at all

Is Cloud Storage all that it promises to be? Convenience, accessibility, tons of file space. Is it possible that this nice, fluffy, feel good Cloud could go wrong and cause seemingly irreparable damage to its users? Case in point, the recent celebrity photo hacks, Dropbox, iCloud, Snapchat, etc. Is Cloud Storage really safe to use?

Of Dropbox, Copy, Box, and other Cloud Storage Apps

Cloud storage service is an amazing innovation, which allows you to upload, store and share images, videos, and other type of content online. How does it work?

Cloud storage is a model of data storage where the digital data is stored in logical pools, the physical storage spans multiple servers (and often locations), and the physical environment is typically owned and managed by a hosting company. These cloud storage providers are responsible for keeping the data available and accessible, and the physical environment protected and running. People and organizations buy or lease storage capacity from the providers to store end user, organization, or application data.

Cloud storage services may be accessed through a co-located cloud compute service, a web service application programming interface (API) or by applications that utilize the API, such as cloud desktop storage, a cloud storage gateway or Web-based content management systems. (source: Wikipedia)

Ok. That’s a mouthful. In other words, Cloud Storage “refers to saving data to an off-site storage system maintained by a third party. Instead of storing information to your computer’s hard drive or other local storage device, you save it to a remote database. The Internet provides the connection between your computer and the database.”

Hacker Proof Cloud Storage

Does it exist? Probably not. Just like secrets, keeping digital information from getting into mischievous hands is like pinky swearing. There is no fool-proof way. Ever tried to format, erase or delete photos from your memory card or your hard drive? Guess what. They still live there, way below the recesses of your storage device and can still be extracted using recovery software. Yup, even after you’ve formatted or reformatted (quick reformat and not full format) And that’s just local storage. Still very much within the scope of your control. But what about cyber storage? Does this mean that you shouldn’t use Cloud Storage at all?

Secure Your Online Data

People are paranoid about large-scale theft of personal information. Unknowingly, they post more than just the usual profile information required when joining a social or public website. (Check out this amazing mind reader.) Their entire lives are posted blow by blow on social media – voluntarily. But the operative word here is – voluntarily. Quite the opposite of theft, where someone takes away from someone against his or her will or permission.

There will always be risks. Whether online or offline. Once anything is uploaded and publicly shared, the risks should have been supposedly counted already. It can be stolen, shared without permission, downloaded, altered, wrongfully claimed, disputed, etc. It’s a reality. Of course, the expectations change when information is shared with restrictions.

People need to be fully aware of what they are sharing, to whom they are sharing it with, and where (websites, online storage, etc.) they share, post, or upload. Make sure to read and understand (someone said this is the biggest lie online) the terms of use of websites and note if there are any third party clauses that allow these websites to share, sell, or pool personal information to their suppliers or sponsors.

Use a strong password and don’t repeat the same password in different places. Consider a password manager. Use the two-step verification or two factor verification option if a website provides one. Do manual backup instead of automated backups. It doesn’t hurt to create your own self-policing practices to ensure that your rights to privacy or ownership rights are not violated.

An Easy Way To Find Free WordPress Themes

Did you every go through hundreds of google page results in the search for a fitting WordPress theme and got frustrated that there is no place where you can find hundreds of themes at one glimpse and just find what you’re looking for without wasting time?

intro-spl

We’ve come across a site that is exactly filling this niche and makes it easy to filter and browse through themes and download them with one click.

Themes Town is a project that basically is providing you with an overview of hundreds of free WordPress themes you can demo and if you like them download all on one single site. If you want to narrow your results down you can use the multi select filter to find exactly what you need. If you only want to find responsive themes no problem! Simply filter by “Responsive” or if you would like to know which ones are the most popular themes you can see a list of how many times a certain theme got downloaded.

Download 177 WordPress Themes For Free Now!

Searchable, Crawlable, Optimized Content – The SEO Fix You Are Looking For?

Website owners are constantly looking for that one SEO formula or template that will assure them of that coveted top spot on the search engine pages. Many webmasters have retracted from their black hat ways and are cleaning up their acts – deleting link building campaigns, url redirects, keyword stuffing, etc. – and are turning to more Google-friendly methods to avoid being penalized. One of the many SEO strategies that people are investing in is CONTENT – good, relevant, easily crawlable content. But is it THE magic SEO formula that people are looking for?

Imagine ordering a decadent looking 3-tier specialty cake baked by Cake Boss Buddy Valastro himself – intricately designed and made with absolutely the finest ingredients. It’s got everything in it to definitely make it a conversation piece among the guests. But, what if someone forgets to display this wonderfully made cake and it stays in the kitchen where no one gets to see it except the kitchen staff. No doubt it’s a wonderful and probably the best tasting cake your guests will ever taste but unless they see it, admire it, slice it, taste it – they will never know what they are missing. Same thing goes with your wonderful, relevant, crawlable, well-written content. Out of sight, out of mind.

But hey, you can have your cake and probably eat it too if you take a wholistic approach to SEO. Yes, by all means, go ahead and build relevant, optimized, searchable great content. But don’t stop there. Make sure that you get it out there and give your audience a taste of it. Get people engaged enough to share it, link to it, and make them want to come back for more. Use and maximize social media. Add that tested and reliable SEO plugin. Market your brand. Plan your public relations campaign. Grow your audience. Junk those outdated SEO concepts. Analyze and study your statistics. Realize that it’s not a one-time event but it’s something that needs to be maintained constantly. SEO is not a one-template fits all type of thing. It is anything and everything that contributes to your website’s visibility and helps you land on that top page in the SERPS.

For more on this topic, check out this helpful article on Moz.com.

WordPress-Friendly Ghost Themes

Ghost started out as a Kickstarter project by John Nolan with the goal of creating

… a blogging platform with all the open source benefits of WordPress, but simpler in every way, and just focused on publishing. Ghost is unique in its philosophy of focusing entirely on publishing. Everything about the administrative system is designed around making writing simple and pleasurable. Everything about the theme system has been created to facilitate personal blog, magazine, and news themes.

The biggest difference between Ghost and other platforms from a technological point of view is that it’s built entirely in JavaScript. A modern technology stack means that Ghost can push the boundaries of what’s possible with the web. You can install and run a blog on a 16MB USB stick, a Raspberry Pi, or a high powered Virtual Private Server.

Although this new ecosystem is fairly new compared to WordPress and may not appeal to everyone’s liking, there have been several beautiful and interesting themes that have been released with a WordPress version counterpart. Here are a few of these Ghost-inspired WordPress themes that you can check out.

CASPER

Casper WP theme, is essentially a port of the gorgeous default theme from the Ghost blogging platform built using Underscores as a base. It is a clean, minimalist, and lightweight theme that’s designed to highlight content without the unnecessary frills. Author, Lacy Morrow, gives a short demonstration of the theme’s features with a blog post that was written in Markdown (the language used by Ghost)and uses the Jetpack Markdown plugin for parsing. Other WordPress features are also integrated into the theme.

RAIN

RAIN is one of the best selling Ghost themes on ThemeForest and also has a responsive WordPress theme counterpart. This minimalist WordPress “Ghost” theme has a background that is 100% dynamic where you can imply upload your own photo and it also includes audio files in the package free of charge. This theme is designed primarily for writers.

ASTRO

Astro is a content focused responsive theme, originally a Ghost designed theme, built for the WordPress platform. Designed from the bottom up to be high performance, user friendly, and accessible on all devices. Astro adapts to the users viewport, so it looks great on smartphones, tablets, TVs, and even the latest 4K monitors. Astro includes two different post styles. The standard style is designed for update posts and short articles. The featured style includes full title images, suited towards larger articles, tutorials and other documentation.

Top Themes Featured on Theme Forest

Every week, Themeforest features promising WordPress themes that are worth noticing. Here are some of the latest themes that have been featured on Themeforest you need to see. Check these out.

Forgiven – A Powerful WordPress Theme for Churches

Forgiven Premium WordPress Theme is a powerful parallax enabled church theme that includes major features such as: Visual Composer plugin, Slider Revolution, Envira Gallery, the unique and exclusive Blur Slider, support for Church Theme Content, WooCommerce support, Page customizer, Gravity Forms and Contact Form 7 support, Sermon functionality, The Events Calendar and the Events Calendar Pro plugin integration and support, and so much more.

FlatAds – Classified AdsWordPress Theme

FlatAds Classified Ads WordPress Theme is a super flexible and fully responsive Premium Directory/Listing WordPress themebuilt with HTML5 and CSS3. FlatAds is compatible with WooCommerce 2.1, bbPress, and MailChimp for WP plugin. Other key features include custom fields for categories and subcategories, interactive Google maps Geolocation support, integrated PayPal payments support, and WPML (multilingual) support.

Faculty – Responsive Academic WordPress Theme

Faculty Responsive Academic WordPress Theme is a magazine or personal blog styled page that can be used to build personal or professional websites specifically for academic people. This simple and yet well structured responsive theme is especially designed as an online cv of professors and PHD students. Key features include publications management, option to present research, teaching and blog pages, and provision for downloadable CVs for interested visitors.

KLEO – Next level Premium WordPress Theme

KLEO – Next level Premium WordPress Theme is an extremely flexible, fully customizable BuddyPress and bbPress compatible WordPress multipurpose theme to help you create a community, a corporate portfolio, or a membership website. This membership ready theme allows you to create membership levels and restrict content based on member access quite easily. key features include: WPML and Translation Ready, WooCommerce Ready, Google Maps integration, Contact Form 7 compatible, among others.

Time Travel – Timeline WordPress Theme

Time Travel – Timeline WordPress Theme is an ultra modern next generation premium theme developed with cutting edge technology and design. The built-in voice control makes it both revolutionary and at the same time super intuitive to use. You can set up your own language to be used in the voice commands control, so it is as easy as possible for your visitors. The design of the site is a 3D time travel path, ideal for displaying chronology data, posts flow by date, history info or just any type of timeline content in a modern and futuristic way.

It is ideal as a blog, a portfolio site, a corporate site aiming to display the history of company or brand, an artist’s portfolio to display albums / films / books in a chronological way, an agency website to showreel projects and team by date, etc.

Hooray – Premium WordPress Blog Theme

Hooray Premium WordPress Blog Theme is one of the most colorful and user friendly personal blog themes. Key features include: easy to use powerful Admin Panel, full Arabic RTL support, social counter integration, translation and multi language ready, page templates, review and rating system, unlimited colors and sidebars, and so much more.

Moustachey: A Blog theme with extra gusto

Moustachey Premium WordPress Theme is a fun, quirky WordPress blog theme playing on the moustache design. Key features include: Author support, social share enabled, typekit web fonts integration, adobe edge web fonts integration, Google analytics support, Google API v3 integration, configurable donate/message block at the top of the page, localization support, and so much more.