These are some responsive awesome images.
These are some responsive awesome images.
The other day I came across a post from Paul Robert Lloyd answering some responsive questions for Net Magazine and I realised that I did the same thing last year, I should share my answers as well. These are from 13th November 2013….
Aaron JL Hatton @Aaron_JL_Hatton
CSS all the way.
Rachael Knight @Rach_Jenn
@netmag @justinavery media queries- good or bad?or should we simply sort when we find something that breaks?
Good? Better? Media Queries are the best, they are the special sauce that makes responsive design…. Responsive!
Always remember the first media query is the lack of a media query, so build your site mobile first. The chances are that the devices that don’t support media queries will require a mobile first approach anyway. As you expand your viewport watch the content stretch, and then included a breakpoint when the content looks rubbish. Use something like Brad Frosts ISH to help you find those in-between breakpoints.
E for Or @EforOr
@netmag @justinavery Breakpoints. RWD shouldn’t cater for specific devices, but iPhone/iPad screen sizes as standard regardless of content?
You should always let the content dictate your breakpoints. When something looks wrong, add a breakpoint and make it right again.
Today the most popular widths are the iPhone 5 and iPad, but if you look back 12 months it was the iPhone 4s instead (different dimensions). Who knows what the next most popular screen is or when it will come out, so why try and guess the size and lock yourself into something that will change?
At the end of the day you should focus on your traffic and find which users are accessing your site of what devices and base your decisions off that. We’ve even prepared an easy to use free google analytics dashboard to help you make that decision with your existing traffic.
Ideas occur to me at the strangest times.
Being on the internet all of the time means that it can be a bit of a struggle to stay focussed on just one thing. One of the benefits of this is that I occasionally have a moment of clarity and realise
“Yes, this is exactly what I need and why doesn’t it exist just yet”
The other day I had one of these thoughts, although I couldn’t tell you exactly where it occurred the main thing is that I had my notebook with me to jot the idea down before it was lost.
I’ve dropped the term “Responsive” off the heading here because at this point I’m going to assume that you’re all building responsive sites by default… and therefore we can just call it Web Design.
There have been some great articles about designing in the browser or deciding in the browser by folks much smarter than myself. Dan Mall, Stephen Hay, Brad Frost, they’ve all had something to say around the process.
Typically we would see this:
At this point we’ve got a few people working on the project. The client, project manager, art director, designer/UX, front end person…. maybe a few others.
Some of the issues that we might see are:
Each of these problems are unique, each of them involve various people. All of them are important.
The process after this is an email from X to Y explaining the problem, or if you’re working with Github or Basecamp (yay for the client) then it’s updated as a discussion. There’s usually a screenshot involved as well highlighting the potential issue.
This is great, but it’s not the best way to proceed through a series of reviews and fixes to keep everyone working together towards the same goal.
What would be nice is if there was a browser extension or bookmarklet that could help. The tool would….
This will help categorise the shots that are taken to focus on particular browsers/OS/URL’s etc.
I suggested using Evernote as the storage because a lot of people are already using it and it takes some of the complexity away, however this could just as easily be configured to run as a complete stand alone web app.
I’d love your feedback and thoughts, especially if something is out there that already does this kind of thing, or if there are other issues I’ve not thought of just yet.
Jeremy Keith recently wrote about podcasting over at https://adactio.com/journal/8091.
The article starts off as a bit of an overview of the article Ten Years of Podcasting: Fight Human Nature (https://medium.com/technology-musings/ten-years-of-podcasting-fighting-human-nature-1bf2de96d6e4)
In the article by Matt he gives kudos to HuffDuffer, a little web app that Jeremy put together that allows you to capture a list all of your favourite podcasts in one place. This allows you to collect and share and find other podcasts around the web that you may not have come across previously.
One of my favourite things about this particular service is that it relies on being able to access the MP3 file from the originating site rather than create a copy of this.
The second part of the article points out that folks that are getting in to Podcasting should be hosting their shows on SoundCloud. This is something that I did when I first started taking baby steps into the world of podcasting (I’m barely past the crawling stage to be fair, and often I’m still spitting up on myself and soiling my nappies if we’re going to take this baby analogy further).
Choosing somewhere to host your files…. in the process of deciding anything anything when building something online comes down to two thoughts/decisions.
There are many occasions where someone has chosen a particular path because it covers everything they’re going to need to do… but never actually launched because it was too complicated with too many overheads to get going. On the flip side, I’ve seen many things launched that don’t quite fit the requirements because it was the easy options and they were not away of anything else that might have been able to work.
On a total side note, THIS PROBLEM — complexity vs capability/knowledge — is why it’s okay to charge <insert large number here> for <insert problem here> when it only takes you <insert short time frame here>. It’s because you’ve managed to gain a wealth of knowledge about how best to do things over many many years of trial and error (it’s called charging for your experience, and trust me you’ve got some). I digress.
For me the things I wanted to achieve were this.
With my limited knowledge of podcasts I decided that Sound Cloud was the way to go. After setting it up super quick and simple I was away.
Unfortunately after the second week I started to run into problems.
Sound Cloud only allowed me to upload a certain amount of time worth of podcasts each month, and there was a limit on my overall storage. That, coupled with the fact I talk for a LONG time on the podcast, meant that I had to go onto the pro version of soundcloud.
Now my expenses had gone up to host them there.
Next issue was that people wanted to download the podcast, or add them to HuffDuffer. I didn’t have any file apart from the one I uploaded to Sound Cloud so I created a Bucket on Amazon S3, hooked up CloudFront to it and started storing the content there. At this point I considered moving to a HTML5 <audio> player but I still wanted to track the number of listens to the track.
The next problem came when I again needed to upgrade my Sound Cloud account because I was using too much content. At this point there was little point to keep it up there, in fact the only reason was tracking. AFter a bit of googling, reading and researching I found LibSys which allowed me to host podcasts with them and track them through their interface.
Now I had sound cloud that was doing nothing except providing a nice-ish (although Flash required) player for my podcasts, and if I used that then I would not get a real understanding on the analytics because they’d be split between SoundCloud and LibSyn.
At this point I bailed. I migrated all the old show across from soundcloud to Amazon S3 and pointed LibSyn to them, going back over the episodes and replacing the nested <iframe> with a more supported <audio>.
I must be friggin tired. It’s only 9:27 and I’ve already have 3 occasions where I thought of something that I could do, went to do it, and then struggled to recall just what I was trying to achieve.
The forgetfulness of what the task that I’m currently on is made worse by the fact that I’m working on the computer, and even worse in a browser on the internets.
In modern day life there are only so many things, physical things, that can capture your attention.
Imagine you are in your living room. There’s a bookshelf off to the right, in front of you the television is playing an ad in the middle of Quantum Leap where Sam has come back as lady (Oh’ Boy!). In between you and the television is a coffee table with a couple of design magazines, a few bank statements and the Men’s Fitness magazine you keep buying to lose that fat yet do nothing more than flick through the pages to read the work outs… and then check out the gadgets section.
There’s probably a few other things around the room, but the point is that your attention can only wander to a few things. Lets say the ad is about banking and it switches your attention to the statements on the coffee table. “I must file those” you think to yourself. Then the next ad comes on about Cravendale milk and you temporarily lose your train of thought. Scanning the room you only have 10-15 things that could lead you away from the bank statements. As you glance across them you remember that the previous ad was about banking and your on track again.
This is not how the computer works.
This is not how the browser works.
This is not how the internet works.
At the moment as I’m typing this (in distraction free mode with notifications muted) I know that behind this wall of peaceful white are 24 tabs open in my chrome browser. Twitter, Adium, Skype, Hipchat, Omnifocus, and iMessage are all running in the background as well. Oh yeah, those 24 tabs…. that’s in one of the chrome windows. Theres 3 other chrome windows open with a similar number still open from the stuff I was doing earlier.
Within those tabs is Facebook, a design forum, two unfinished you tube videos (one funny, one a tutorial about setting up grafana for front end performance). In another two tabs are two grafana dashboards that are almost finished, and across the others are Linked In, two WordPress Dashboards, a shopify developer dashboard and a client dashboard.
Now when I get distracted via a mention on a tweet I usually read it right away. While I’m there I have a quick scan through my twitter timeline and inevitably find a couple of links that people have shared. One of the links is to a new responsive website which I want to check out and feature in the examples section, and another link is to an article about performance. I open both a start reading the performance article and half way through they talk about a product that is made specifically for working on responsive sites…. “That’ll be good for the newsletter” I think, “maybe they might like to sponsor an edition too”. I open up the tool and have a quick look before deciding I like it. I head to their contact page to find an email address and open up another tab with Gmail (which I’m sure is open somewhere else… but chance are i’m half way through reading an email and don’t want to lose my place). I hit compose and paste the email address in just before a contact form comes through with someone asking about sponsorship. That looks interesting. Rather than email a possible I decide to review the probable opportunity. I read their thoughts and open their site to check out what they offer and… ohhhh, it’s a responsive images hosted solution. That actually reminds me that there was another similar solution I’d seen last week… perhaps I should get a list of them together a right a post about the different options. I could also see if the other one would like to do some advertising later in the year as well.
“Wait…. what was I doing again? It was something in one of these tabs. Ahhhh let me see… let me see….”
OmniFocus pops up to alert me that I’m supposed to get back to a DM on twitter. I head back to twitter to do the DM, but there’s another one there and some more mentions.
These are all the distractions you have just within a browser window…. never mind hipchat, adium, messages, skype etc coming through as well.
It’s incredibly hard to stay focussed when you are tired, but the best way I find to overcome this is choose 8 things to do today.
– 1 Major thing (will take 2 hours)
– 2 Minor things (will take 30-35 mintues)
– 5 Small things (5-15 minutes each)
I’m off to create my list.
Performance is the most important thing when it comes to your website. A lot of people say it’s the content, but a poor performing website will see users leaving in their droves if the load times are too slow (although they wouldn’t be going there in the first place if it weren’t for the content, so I see an argument against that too).
Please note this is an ongoing article. I’m blogging as I build, so expect a lot of updates as I progress.
Once Graphite is set up you can apply a prettier frontend by installing and configuring Grafana.
On your webserver download the latest version of grana
Next you need to unzip the .tar.gz file
tar -xvzf community_images.tar.gz
Now you need to copy the folder to your web root to access the interface. During the graphite installation you copied some details to
/etc/apache2/sites-available, this is
Afterwards I found you also need to download and run Elastic Search, instructions I found here
While I was trying to add cross scripting capabilities I received an error about HEADERS not being available. By default the headers module is excluded from Apache so the following line fixed that for me
Installing the chrome drivers I used the first part of this tutorial
… at least until it arrived at the install phantomjs (which should have already been done previously).
Here are some common issues I ran into during the configuration of this.
Each time I log back into the server to run sitespeed.io I get the following error
sitespeed.io: command not found
To overcome this you need to run
nvm use v0.10.33
which kickstarts node into use and allows you to run sitespeed.io
After installing google chrome as per the sitespeed.io instructions I was having trouble with running the command
sudo apt-get update. After a bit of searching I found that there were duplicate entries in
/etc/apt/sources.list.d/ for google.list and google-chrome.list, so I removed the entry for
sudo rm google-chrome.list. This article explains the full process for getting this working again.
I’m getting the following error after rebooting my Ubuntu Digital Ocean server
info: Starting proxy on port 9092, will wait at most 15000 ms
I was getting this issues when running
sitespeed.io -f urls.txt -b chrome,firefox --memory 16 --screenshot --profile mobile --viewport 480x320
-b chrome,firefox seems to be causing the issue. After I removed this it worked fine.
This may not be the best way to do this… but I wanted to get reports on the site I was working on every 60 seconds. To get this done I ran the following command while on the Ubuntu commandline
while true; do sitespeed.io -f urls.txt --memory 32 --name "Demo" --graphiteHost localhost; sleep 60; done
As you work your way through a problem that you haven’t faced before always try and make some time to document your process.
On a few occasions the results I have found have managed to get me 90% of the way, but some tweaks have been required to get it all working in my particular scenario. At this point I should have written down my actions and captured the results through here. My Blog. My Web Log of what happens. The place I write to remind me about stuff. This would allow me to reference my own instructions again should I need them, and also provide the 100% correct solution for someone with my same problem.
Unfortunately I’ve been a little lazy and not had as much time to document these findings recently, and as a result I can no longer remember what I had solved. What I do know is that some time down the track I will lose that time 10 fold trying to resolve the same problem.
Always write down what you’re doing when discovering something new, it will help me out one day too.
This is a fantastic short video as Aaron Draplin takes you through the approach to designing a logo. Super inspirational and made me want to start creating immediately.
Most logos aren’t designed in fifteen minutes, but most designers aren’t Aaron Draplin. Aaron’s a Portland fixture by way of the Midwest, the owner of Draplin Design Co., and an advocate of “blue collar” design: design that works. Here he takes our logo design challenge, creating a dozen iterations of a logo for a fictional construction company. Not inspired? Just wait. Watch as he sketches, brings his ideas into Illustrator, and tests and tunes the different iterations. The logos Aaron creates prove design can elevate any company or brand. Along the way, he provides tips for freelancing, finding inspiration, and providing clients context for logos that won’t just live in PDFs.
Make the world a better place. When you are building something ask yourself “is this making the world a better place?”
Most people come up with a Mission Statement. Most mission statements are developed through the following process.
Don’t have a mission statement, have a mantra.
Explain your goal in 3 words.
In the beginning there were ice farmers. Ice farmers would go to frozen lakes and rivers and cut lines in the ice and farm the ice. This is 1.0.
Next came centralised ice factories. These were huge buildings filled with giant freezers. The freezers would produce the ice and they would have vans that would go out and deliver the ice to people who needed it. This is 2.0.
Lastly came the fridge. This is your own personal ice factory. This is 3.0.
The Ice Farmers never jumped to become Ice Factories. The owners of Ice Factories never jumped to build Fridges.
You must be able to jump to the next curve.
You should always define yourself by what you provide, not what you do. These examples were all about providing a clean and cold environment, not about the farming or the factories or the machine.
You need to be able to stand out from the crowd. The chances are there’s going to be other people competing in your area. You need to roll the dice.
For that you need to focus on 5 things
Ship your product even though it has some shitty bits. That doesn’t mean ship a shitty product, it means it doesn’t have to do everything before you ship 1.0.
By being first to launch you gain all the benefits because there’s nothing else out there that can compete with you.
If people want to use your product in a different way, go with it and reproach the market in a new way.
A skin care product called “Skinbesoft” was released. It was a luxury product that was targeted at middle aged women to help keen their skin looking young and soft. The product sold well with their target market, however it wasn’t because it kept their skin soft. Instead the mothers found that it was an excellent insect repellent and wasn’t as harsh as DDT on the skin of their children.
This was the point at which they should have kept the product but changed their approach and marketed it in a different way.
Let your product blossom where ever it can.
Great products polarise people. Great products create emotion, emotions can cause polarity.
This of the Mac vs Windows, the iOS vs Android. The iPhone and Samsung S4. These consumers are polarised and LOVE their product. Great products polarise people.
Listen to your customers after launch. Adapt to your changing customers needs. If you’re willing and able to churn then you’re in the perfect place to jump to the next curve.
If you miss the next curve you’ll never make the double jump.
Don’t be afraid to churn and adapt to the changing market. Focus on what you’re providing, not how you’re doing it.
On a simple graph of Uniqueness vs Value. Gartner or another analysis will charge you $500,000 to explain this to you. Here’s the break down in 4 simple bullet points ($125,000 per point).
Customise your introduction. This creates a sense of comfort within the room that the pitch is designed just for the client. Take pictures of yourself with the product they sell, the the city they are based… something to customise your pitch.
Follow the 10 – 20 – 30 rule.
10: Slides. No more.
20: Minutes. No more. It could take 40 minutes to get the wifi and projector working… you need to be able to nail your pitch with the time you have left. No one has ever been disappointed that a meeting has finished before the hour mark.
30: Point Size. This is the easiest to read. If you need to reduce the point size to fit text on the screen then you’ve got too much text. What usually happen 15 seconds into a presentation like this is that the audience will realise you’re reading the slide and work out that they can read faster than you can talk… and then you’ve lost them. Another way to look at it is halve the audience age. 70yo=35pt, 60yo=30pt, 40yo=20pt.
One of the great things about The Web Is conference is the sideshows.
This year on the Thursday night there’s a musical get together at the Founders Hub. Apparently there are plenty of instruments for people to join in with, you just need to learn Walk (Foo Fighters) and 20th Century Boy (T. Red).