Responsive Images

As the web became a more mobile-friendly environment, developers produced various ways to deal with images. Due to data limitations and loading on mobile devices, inserting an image at its original resolution became unacceptable. When a user loaded a website that was not mobile-optimized, images had the potential to be several megabytes in size. This effectively ate through the meager and over-priced amount of data provided by our overlord ISP’s. Along with this, a large image caused a major time delay in loading the page.

For example, SpaceX’s website is not mobile-friendly and has three large images embedded within a slider. After testing the homepage within Chrome’s Developer tools, one image alone took 10.98 seconds to load on a 3G connection. The second image took 9.37 seconds and the third 9.12. These three images were between 465kb and 678kb.

Screen Shot 2015-04-26 at 3.08.50 PM
SpaceX Website image load test

As this became more of an issue, new and innovative solutions started becoming available:

After a few days of researching responsive image techniques, I’ve come to the conclusion that Picturefill 2.0 is currently the best solution for responsive images. I based this on several ideas:

  1. It seems to be one of the few (potentially the only) technique that has been updated in the past two years.
  2. While researching, Picturefill was consistently referenced as the more efficient technique.
  3. It’s simple to implement.

I put together an extremely basic example of picturefill on my school domain. In this example, I took one of the images from the SpaceX example and made images at different resolutions. There are four different images: one at 1920px, 960px, 480px, and 380px. As the viewport changes, the browser will load the image that corresponds with the associated width. When tested at a width of 400px, the browser loaded the smallest image I created (360×168 — 10.6kb) in 1.697ms.

While picturefill is mostly great, one of its downsides is that it relies on Javascript and markup changes. If you’re converting a lot of legacy content, adaptive images may be the best solution. Instead of requiring markup changes, adaptive images goes through PHP file to find the correct image size for the viewport width.

I tried HiSRC, but had no luck. It seemed to only want to load one image, no matter the viewport size. Foresight.js is now outdated — the repo says to use the picture element polyfill instead. I saw a third-party service, Sencha.IO recommended several times, but it seems to be nonexistent anymore. However, there are other third-party solutions around (,, but they charge per image and have a cap on size. Through my research, most of the techniques that I saw recommended had not been updated in the last two years — save Picturefill.

Until the picture element becomes more widely adopted, I’d continue to use Picturefill 2.0 with the srcset attribute. As of this writing, the picture element is only available as of Chrome 38, Firefox 38, and Opera 27 as well as Chrome for Android, while srcset is available on those and Safari — where a large number of mobile users exist.

Responsive Images


Outstanding Performance

After four group exercises with varying degrees of difficulty, I feel that I performed best in the egg competition. The egg drop competition was my favorite exercise, naturally making me more interested, but I’m horrible at any type of structural engineering. Because I’m absolutely horrible at anything involving my hands, the two tasks requiring building skills were not my best.

Leadership skiLLs

Honestly, I didn’t learn anything new about my leadership abilities. After working in teams at school and the workplace for several years, I feel that I know my leadership qualities. I’m someone who works better under massive amounts of stress, so these activities were not my strong suit. I also tend to take the backseat unless it’s a project or subject that I care deeply about. For example, if I were thrown into a political debate team, I’ll take the lead instantly. Generally, I tend to let others take charge and then I’ll state what is on my mind when the time is right.

Working in groups

Working in groups can be a good and bad thing. In this course, we all know each other fairly well, but these activities showed me what my classmates skill sets are. As someone who watches people and likes to observe what is going on around me, I noticed very interesting behavior. In the first activity, nobody in my group was a natural leader (myself included). Along with this, I noticed members who would do their own thing, regardless of the collective mindset of the group. In the second task, we were fortunate to have a natural leader, but I again noticed people who wanted to do their own thing. I don’t remember the third task and the fourth task was fun. Overall, I’d say that working in groups showed me who I’d want on my team for a long-term project and who I feel would be hard to work with.


Optimizing Images

tl;dr math!

In the age of finite mobile data, image optimization is becoming ever more important. By limiting the size of a picture in a webpage, developers are improving performance and potentially saving users money from carriers.

There is no one answer to image optimization, but it is generally suggested to take advantage of the newest technologies such as CSS3 or web fonts like Google Fonts. By using CSS3, the developer is nearly guaranteed to have assets that would look correct in ever resolution.

Pictures are one of the harder sources to optimize. Due to the amount of file types and their pros and cons, choosing the wrong filetype can cause your content to look fuzzy or blurry. If confused, Google it. Generally, photographs should be in jpeg format, while logos tend to be a png.

Like the bottom of the article says, experiment, experiment, experiment. The best way to find the correct way is to just do it.

Optimizing Images

Designing for the Modern Web

Before the internet became ingrained in everyday life, most website were…an eyesore. With no guidelines or best practices to follow, designers were left to make it up as they went. By using the greatest tool ever, more commonly known as Google, we can look at how bad the first sites were. Fast-forward 20 years from the White House website and the Internet has undergone a massive change.

As Derek Johnson states in his post, modern web design is similar to designing products based on user experience rather than fancy looks. While looks are important, some designers tend to forget about how the user will interact with the content in their browser. According to Derek, the three most important items needed from a client are clear goals, the nature of the web, and content.

Clear Goals

After the rise of Facebook, Twitter, and Google, it’s not uncommon to have someone ask for the “next Facebook.” Knowing what you want the website to do makes prototyping, developing, and testing a website quicker and easier. Saying that you want the next Facebook is ridiculous and shows that you’re only in it for the money…which means that you’re probably in the wrong industry.

The Nature of the Web

Over the past seven years, the way we access the Internet has dramatically changed due to the rise of smartphones and tablets. In January 2014, 55% of Internet traffic within the United States came from mobile devices – a number which is only expected to rise. Because of this, designers, developers, and clients alike need to understand that websites are no longer created only for desktops. Along with this, the amount of content on websites need to be considered due to the limitations of mobile carriers data caps. It is because of this that Ethan Marcotte coined the term Responsive Web Design, or the ability for websites to adapt to varying screen sizes.


Content, the meat of the sandwich, is arguably the most important aspect of a website. Why is the user here? What are they looking for? How will they access that article and share it to their friends? Can they customize that shoe that they’re considering buying?

The content is where the user learns about your company and interacts with it. This can be through a donation link, or a checkout page, or an analysis on 6 million tweets around the world. Content consists of multiple variables with numerous results; results that shouldn’t be ignored.

Lets make a website

Once the three previous variables are considered, a designer is able to begin prototyping. Because we spent time with the client setting goals and discussing content, we, as developers, are able to make a mock-up website. While this sounds simple, it involves careful thought and planning.

We need to consider the font, how readable it is, if the user would have it installed on their computer, and if it flows with the overall theme of the website. For example, we don’t want to use a Lord of the Rings font an a website for Apple.

Next, the user experience and interactivity. Sean Thielen states that no one wants to use your website. Instead, they’re using it to make their lives easier. Make sure that your site is straightforward and easy to use. Users average under 30 seconds on a website before clicking away. Make sure that they know why they’re there and how to use it within that time. If not, you’re wasting their time, your resources, and losing money. Don’t try to create your a new way of filling out a form to make it unique. Following the conventional uses make someone more likely to stay on a site.

Of course the final aspect would be performance. When pushing the final build to a production server, we want to make sure that everything works as expected. Everything from load times, page size, to efficient needs to be reviewed. By doing this we can make designing and building a modern website more efficient and better for the user.

Designing for the Modern Web

OP Googling

Learning how to fully exploit Google has become one of the most important life skills. It may sound crazy, but Google holds nearly all of the worlds knowledge within a half-second search. We’ve never had such easy access to vast amount of information until now, which is why it’s everyone should learn the basics of Google

Before we go too far, here’s a useful guide on how to use Google effectively.

Tip 1:

Learn how to type in the words relating to what you’re looking for.

Seriously, don’t skimp around with the information. Google is a huge database and just like every other database, more input = better output.

Tip 2:

Control+F all the things!


Looking for something specific on a wikipedia page? Pressing Control+F will allow you to search for any character combination possible.

Tip 3:

Sort by filetypes.

Use ‘filename:filetype’ to search for specific files on the internet. For example, If I’m looking for a powerpoint for class, use ‘flying yellow busses:ppt’. Google will only return results that are Power Points that are about the Magic School Bus.

Tip 4:

Google Now…the service…don’t go Google something right now!

This isn’t a tip on how to Google. It’s a tip on how to integrate Google into your life. Google Now is a service that can tell you the weather, schedule, sports scores, and many other things based on your search queries and geolocation. It works on iPhone and Android, but is far more integrated into Android.

Tip 5:

Google knows almost everything, take advantage of it.

Eric Schmidt, the current CEO of Google, estimated that there are roughly 5 million terabytes of data on the internet. 5 million terabytes equals 5.0 × 10-6 (44) yottabytes, currently the largest form digital storage. Schmidt says that Google has indexed 200 terabytes of that, or about 0.004%, which is still a lot of information. With all of this information freely available, you can find nearly anything you want online.

OP Googling

Leveraging the power of IFTTT

Thanks in part to the Internet, our lives continue to become more connected and busy than ever before. Because of this, two guys started a company called IFTTT in 2010. IFTTT allows users to automate a variety of things by connecting multiple services (e.g. Twitter, Pocket, Evernote, ESPN). IFTTT stands for ‘if this then that’ which is based on conditional statements. So, why would this be useful? Honestly, there are too many reasons to list on this website, but well cover a few.

How does IFTTT work?

To explain IFTTT, you need to understand how it works. IFTTT uses a conditional statement, or a set of rules that execute if a certain condition is met. In the following example (using Javascript), suppose the answer to math problem is 40. If that’s correct, which it is, the console will print “Correct!”. 

if(answer===40) {

This is similar to how IFTTT creates and executes its recipes, or conditional statements. For example, if the ISS passes overhead then insert a set amount of data into a Google Spreadsheet.

Why use IFTTT?

Simply put, IFTTT is awesome and offers hundreds of ways to automate your life. So, if you’re weird like me you enjoy numbers and databases, IFTTT can create easy spreadsheets for you. It can also link multiple services such as Twitter and Facebook for easy one stop changes. Generally, if you want to do something with a well-known brand, IFTTT has you covered.

I listen to a lot of music on Spotify and I want to find a way to quantify that information. With IFTTT, I can connect my Last.Fm account (which is already connected to my Spotify) to a Google Spreadsheet. When this recipe is active, it automatically pulls the data from Spotify and puts it into a Google Spreadsheet. Here’s an image of what it looks like when setting up an IFTTT Recipe:

Spotify Recipe

This is a sample shot of my spreadsheet from last week:


Once you’ve created the Recipe, it’ll look like this on your homepage:


As you can see, this Recipe was created on August 14, 2014. I’ve had it active for exactly one month (as of this writing) and it has been triggered 1,081 times. It was most recently activated 6 minutes ago.

Why would I want this information in a spreadsheet? At the end of the year, I like reading stats from everything that happened that year. Last year, Spotify created their own ‘End of Year 2013’ for its users. It looked like this:


I wanted to make my own, so right now I’m collecting the data. In January I’ll be writing a script to put all of the data into a user-friendly format via Javascript, CSS, and who knows what else.

Other IFTTT Recipes:

I’m currently using 10 Recipes, but that’s about to be cut to 8.

  • I have two that get the final scores from Arkansas and Texas A&M football games.
  • Everytime the ISS passes overhead, its trajectory, timestamp, and view time are entered into a spreadsheet.
  • Every Tweet I favorite goes into an Evernote Notebook.
  • Every photo I take on my phone goes into a Dropbox directory.
  • I get a weather forecast every morning from an app called Dark Sky on my phone. This one is more confusing because I have it strung through a different app to push its notification to my phone. IFTTT simply reminds the app that it is supposed to get the weather.

There are plenty of other great Recipes out there to check out because IFTTT allows users to share recipes. Here are a few:

  • The most popular Recipe puts all of your contacts into a Google Spreadsheet.
  • If you’re feeling creative, you can use geotagging on your phone to turn on your Phillips Hue lightbulbs when you arrive home.
  • If you have too much money and useless items, you can get breaking news alerts on your Google Glass.
  • If you’re a GitHub user like me, you can get your assigned issues inserted into iOS Reminders.


While IFTTT can be a great weapon in your arsenal, it also has a few shortcomings. With these recipes relying on specific API’s from various companies, IFTTT may not work exactly as expected. I’ve noticed that my ESPN alerts don’t hit my phone until an hour after the game is over. I’ve seen people use IFTTT for Twitter, but be restricted by Twitter’s strict API. Overall, it’s pretty awesome once you find how it can help you.

Leveraging the power of IFTTT


Week 1:

The first week of school is always pretty rough. But this week wasn’t that bad…seeing as I only have three on-campus classes. Of course my longest lecture is IT and Apps, but it’s been pretty fun this week. Rather than just sitting there listening to someone talk for three hours, we get to interact with everyone. We also got Chromebooks…that’s a pretty cool perk.




In this class, I hope to learn more about web development. As someone who already has experience in this area, I’m looking forward to working with, and possibly helping, others. My past experience has been from online courses or self-teaching, so this will be a major difference. The closest I’ve been to working with others in this field is a QA/Programming internship I had over the summer…something I’d recommend to everyone who has the opportunity.

For example, I never planned to use Crouton (a croot environment that runs Chrome OS and Ubuntu simultaneously), but I just downloaded on my Chromebook. I have no idea what I’m doing, but that’ll come with time.

Beginning the install of Crouton

If you want to put Crouton on your Chromebook, follow this link.