Today’s post is all about enabling a very cool web design technique natively in a Twitter Bootstrap layout. We will be integrating a jQuery-based smooth scrolling effect that works responsively. Read More
We have spent a lot of time covering ideas behind responsive web design. However, up until this point we have focused almost solely on the “Big Picture”. So today, let’s take some time and dive into an element that is essential when it comes to designing responsively. Video!
After all, it would be easy to say that people love watching videos online, so it only makes sense that we should design responsibly to meet our users where they are, on the devices they are using. So with that in mind, let’s take a look at FitVids.js by Chris Coyier and Paravel.
FitVids is a light weight responsive web design jQuery plugin that allows designers to not only design responsively for small screens, but also for large environments as well. It could make sense that using a tool like FitVids could allow you to embed several blog format videos into a page, and also create awesome full screen video backgrounds! Cool huh?!
If you would like to use FitVids within your own projects, it would be a good idea to check out the video above and follow along. However, if you are in a hurry then simply follow these steps.
Step 1: Download FitVids.js
Step 2: Include the plugin within your javascript (See Video for Example)
Step 3: Activate FitVids
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
</script>
That’s it! Now you are up and running with FitVids and Videos placed within collapsing containers will bend to your will. So play around with it; I promise that you will find it capable of solving your problems and perhaps even providing a bit of inspiration! Just think of what you can create with a tool like FitVids in your pocket. So get back to designing your next cool site!
Responsive design is changing how we view the web, literally! Whether you are getting started with responsive design or are a seasoned responsive pro we have a few tips that just might help with your next mobile project.
When beginning a responsive design, it is important to start with the selection of a solid foundation. Since the framework will inherently inform many design elements, you will want to carefully consider your needs. Will you choose a bare bones framework like Skeleton? Or does the scope of the project that you are working on require something with a bit more meat to it like Twitter Bootstrap or Zurb Foundation?
If you would like to know more about Bootstrap and Skeleton we have covered them several times in the past.
It’s not rocket science but it is very easy to forget. Do you want your pages to perform to their maximum potential? Yes? Then get started with minifying your CSS & JavaScript.
Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.
Every website a user visits is downloaded in some form to their local computer. So, if you were downloading a large amount of files from a site, wouldn’t it be preferable if the content providers were to place all of those files into a single zip file? Minification essentially does the same thing, cutting out everything except for what is absolutely necessary. So be kind! Minify!
A majority of the time, the culprit for large download times is the ever-giant image size. So, why do we need to take care of image sizes? The very same reason that we minify CSS and Javascript. It is only to the benefit of our server and our users if, as a rule, we serve up the smallest file sizes possible that still serve to preserve the integrity of our vision.
Original size: 2.0mb
New size: 161kb … Which would you rather download on your phone?
We have talked about CSS preprocessors in the past, and if you have not tried them yet, then please do yourself a favor and give a preprocessor a shot today! Once you begin to preprocess styles, not only will you have access to amazing mixins and in-stylesheet calculations but also automatic organizing and minification of your stylesheets.
Want to get started working with a preprocessor? It doesn’t matter if you use a Windows PC or a Mac, here are some helpful tools to get you started.
Perhaps you have caught on to the general theme of this responsive design roundup. So much of what constitutes responsive design can really be summed up in responsible design. Bob Dylan said that “the times, they are a’changing” and he was right! Mobile ready websites are no longer a luxury. If a brand wants to engage with its customers or if a restaurant wants to attract new clients on their night out, a consumer better be able to engage them from his or her phone!
Mobile-first design would dictate that the design of your site no longer has much to do with the layout of your site. Mobile-first design would suggest that a web designer must look to communicate a brand image through the use of color, graphics, fonts and design elements first. So, don’t think of the phone or tablet as a hindrance to your artistic brilliance. Start designing on the phone first, then with every iteration simply enjoy the extra canvas that larger screens allow for.
Does your site look great on the desktop, and pretty rad on your iPhone? Congratulations! However, I suggest that designers and developers take a look at the other screen sizes just in case. Not only can new electronics be cool, but they are also useful for testing! So go for it, grab that Kindle Fire or Nexus 7 that you have been eyeing.
If you are using an awesome jQuery slider within your responsive design, it may be a good idea to double check that it is touch friendly. After all, having to mash around for little nav points on a slideshow is never fun. Engage your customers by integrating touch friendly elements.
Content delivery networks help to serve up files to your viewers in a responsive way that is likely closer to them than any single server company that you may host with. What’s better? Often, a good CDN will take care of image optimization and CSS/JS minification automatically for you.
Learn more about why we use CDNs by checking out these posts:
If you also serve up a bunch of videos on your site then maybe video size has become a problem. It can be hard to deal with video on responsive sites, especially since exact device widths can be unpredictable. We can fix that! The very kind folks over at Paravel and CSS-Tricks.com have created a few simple and lightweight scripts that will take care of large videos or even giant text for any screen that you can think of!
Responsive design is really cool! There are thousands of designers and developers that are learning how to morph their workflow to compensate for all of the new requirements that should be taken into consideration. So, take a look around! Check out cool sites like Dribble.com or Codepen.io and see how other pros are doing it! It is certainly cool to be inspired by the work of others and find ways to contribute as well.
WordPress is huge, and it is only getting bigger. Over the past few years more and more developers are turning to WordPress to deliver accessible websites to their clients. This means that at a very basic level it is advisable that no matter your position in the internet world, having a good working knowledge of WordPress is a must.
Welcome to WordPress! This area is dedicated to users that need to know the very basics of how to work within the context of a WordPress site. Need to know how to add your first post? This is the section for you! We assume that right now, you have no need or desire to learn to code your own sites and that is completely cool! A huge amount of the largest blogs and sites in the world are operated by users that have never touched a single line of code. You are in very good company with WordPress!
A landmark series for WordPress beginners. Not necessarily because it had never been tried before. WP101 is a landmark because it is an incredible resource, provided absolutely free that is of just about the best quality you will find.
Need a refresher on how to operate your new WordPress site? WPBeginner will help you through the process, from picking out a good hosting company to setting your new site up.
Spoilers! The WordPress Codex is pretty great. Not only is it great, but it is the go to place for the latest in WordPress best practices.
Lynda.com hosts a variety of training videos and courses. This WordPress essential training video series will take you through just about everything that you will need to begin your publishing journey.
Plug Alert! Our very own post on what to do once you have installed WordPress.
You know the basics. Perhaps you already create awesome sites for your clients using static HTML, CSS & JavaScript and are ready to let your sites go to the next level. WordPress will give you the power to offer clients interactive, editable and feature rich environments. This section is for you, we will cover a few incredible places that you can take your skills to the next level.
Chris Coyier will guide you through a surprisingly easy to understand tutorial on how to create your very own WordPress theme.
The home of some of the best darn WordPress tutorials around. Sneak back to the basics and theme development sections to take advantage of the TutsPlus+ resource.
A watershed publication in WordPress theme development. What’s better, one of your teachers is the CEO of the entire Envato network of sites… not too shabby!
Dive deeper into WordPress with this one. Know how to set up a general theme? Nice! Now understand how theme options and plugins work with part 2.
This should be on your bookmark bar. Take a load off and go read the codex for an hour or so. I promise you will learn something!
You have been there and done that but maybe not yet with WordPress. If you have spent the past few years custom coding your own CMS for your clients or maybe using another CMS like Joomla or Drupal. In this section, we will assume that you have a working knowledge of PHP and will feature some sources from a few WordPress masters!
Chris Coyier is back with Digging into WordPress. This book basicly defines extensive. Would you like to share in WordPress best practices? There is no better place to start than right here.
Are you noticing a theme here? I am not kidding when I assure that you need to make the codex your new best friend! I was totally that guy… “I’ll never need the codex”. Then I wised up. If you are a WordPress developer, the codex is simply the fastest and most searchable way to get the info you need!
Get to know WordPress from the theme masters themselves. These guys word at automattic and curate the giant library of free WordPress themes. Better yet, they have dedicated this as a resource to share their knowledge with fellow dev’s.
Past the mid-level tutorials, wp.tutsplus.com is really a place where you can dive into complex builds, solving niche problems. All throughout the comments of this site you will find a community of fellow dev’s that are solving problems right along side of you.
WPMU is a massive source of information, founded by some of the most advanced WordPress plugin developers on the planet. It would serve you very well to make WPMU a daily stop.
There you are, a few of the absolute best ways to learn WordPress no matter your skill level or need. Do you have a favorite that we didn’t cover? Let us know in the comments below!
Are you using a shared hosting server? Maybe you have wanted your site to run a whole lot faster, but you’re not quite ready to take the financial plunge of VPS or a dedicated server. Well, we have great news! There is a free way to significantly speed up your website or blog without having to dig deep into your wallet. Let’s get going!
“CloudFlare protects and accelerates any website online. Once your website is a part of the CloudFlare community, its web traffic is routed through their intelligent global network. CloudFlare automatically optimizes the delivery of webpages so your visitors get the fastest page load times and best performance. They also block threats and limit abusive bots and crawlers from wasting your bandwidth and server resources. The result: CloudFlare-powered websites see a significant improvement in performance and a decrease in spam and other attacks.”
On average, a website on CloudFlare loads twice as fast for its visitors, sees 65% fewer requests and saves 60% of bandwidth. That is a pretty big improvement over simply relying on your shared host to serve up your content. And guess what, the baseline plan that CloudFlare provides is absolutely FREE… (As in Free beer Free (cool huh?))
Getting going with Cloudflare is easy, but first things first. Head over to the Cloudflare website and click Sign Up in the top navigation menu. Next, fill out your account details. After you fill out your details we are ready to put the pedal down to the floor! Once you create your account you will be led to the next screen wherein you can add your first web site (or as many as you would like… go nuts!).
After you add your website, Cloudflare will begin the scanning process by gathering the appropriate DNS records. Check through the list that is displayed and make sure that your records are correct.
Next, you will configure your individual domain settings. Here, select your Cloudflare plan, choose your performance settings and adjust the security. Now this is the part that I can’t quite tell you exactly what to do as your mileage may vary depending on your site’s requirements.
Once you have successfully set up your domain on Cloudflare there is not much more to do than just sit back and watch as day after day your content is served up to more visitors, faster than ever!
According to national surveys done by Gomez.com, if your website is slow to load you may be losing revenue and possibly customer loyalty. A recent study found that 78% of online consumers went to a competitor’s site due to poor performance at peak times. According to the study, nearly half of web users expect a site to load up in a matter of two seconds or less. If the site does not load quickly, visitors are statistically more likely to navigate elsewhere after three seconds. Moreover, according the the survey, 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again and around 44% of them would tell a friend if they had a poor experience shopping online. Speed matters.
With CloudFlare CDN, you can make a significant speed improvement on the cheap. In a future post we will show you how to integrate the super speed of CloudFlare and power it up even more by pairing it with one of our favorite WordPress plugins.
The WordPress loop is an essential building block when a web designer or developer begins to better understand how WordPress works and moreover, how they might manipulate a theme to fit the needs of a web site. The loop is a very simple concept to grasp once you understand its necessity. The loop tells WordPress to go get the content that you need. It is that simple, but lets take a stroll through some code to see exactly how it works in practice.
Relax: It’s easier than you think!
In order to get the loop going, we just need to accomplish a few simple tasks.
In order to perform these actions we will need to ask WordPress to play fetch! This is called the “Query”. So in order for us to get the correct content on the correct page the incredible guys and gals at WP ask that we just tell them what we are looking for. So without further ado, lets take a look at some code.
ask WordPress to play fetch! …
So, in this simple line of PHP we are up to a few things, and it might be easiest to understand if we just look at it like a sentence. This statement first checks if posts exist on our website. Once we have found that there are posts, then we tell WordPress that as long as posts exist, we would like to display those posts.
Next, we would tell WordPress exactly what content we would like to be displayed from those posts. For instance, we could include items like our post title <?php the_title(); ?> or maybe our post content <?php the_content(); ?>.
After we have displayed all of our desired information we just need to close up shop (and tidy up a bit). It is always best practice, if not now entirely essential to close the WordPress loop in a clean manner, in case we want to fire up another content loop anywhere else in the page.
So to clean up, we will use the following code to stop our query.
[/crayon]
This snippet of code will essentially end our loop. Lets walk through this code step by step. <?php endwhile;else: ?> allows for us to tell WordPress to stop repeating the content loop of the queried posts. In the middle of that snippet you will find a helpful PHP bit that provides a helpful error message for users, just in case we didn’t have any posts related to our query. This type of message is a huge help in places such as search pages. After close out our cash register by ending our while statement, we simply turn out the lights by ending our “if” statement.
So our full beginners loop might look a lot like this.
Sorry, no posts matched your criteria.
[/crayon]
There! Wasn’t that easy? I hope that this post will make you a little more familiar with how the WordPress loop works. Admittedly, this is an enormously simplistic look at what can be a very involved function. But Hey! We need to start somewhere. Next we will start to take a look at how to eek out some neat loop functionality and eventually code up our own custom blog page.
