Responsive Design in 2015

With the proliferation of many devices with access to the internet, web designers have been playing catchup to make sure websites look good on all devices. Gone were the days where web designers would only design for the desktop. Today’s designers have to account for big screens, tablets as well as smart phones.

The design has to be flexible, fluid and accessible to all. This means objects, images and videos are fluid increasing and decreasing in size as the screen expands and retracts. In some cases, certain objects are turned off or displayed off screen. Responsive design wouldn’t be possible without the help of CSS 3, in particular the use of media queries.

Media queries allow designers to specify certain objects to behave a certain way based on the screen resolution. For example, an image that is flexible will have a CSS element such as this, img { max-width: 100% }. As the screen size increases and decreases, the images will shrink and grow, always maintaining a width of 100%.

Another trick is to use flexible layouts. In the past, most layouts would use fixed widths such as #page { width: 760px; }. In responsive designs, layouts would often use percentages instead of fixed number of pixels. In this case, the element would look like this, #page { width: 65%; }.

Another trick is to turning off elements on certain resolutions. For example, if you were to turn off the sidebar on small screens, you would set the display to none like this, @media (max-width: 480px) { #sidebar { display: none; } }. Or you can also set the element to be completely off screen such as this, @media (max-width: 480px) { #sidebar { margin-left: -3000px; } }.

If you want to learn how to design responsive websites, there are many tutorials out there. Most importantly, learn how to code in CSS, learn how to use media queries, learn how to manipulate elements within CSS. There are many responsive sites out there. In technology, Sony, Squarespace, Microsoft and Twitter Bootstrap come to mind. In e-Commerce, there’s Indochino, Skinny Ties, eBags, Garmin and PureCostumes are great examples.

Feel free to look around the web and look for ideas and inspirations.

Typekit is Down

Adobe Typekit is partially down. Some websites using the hosted web fonts service are looking a bit normal. A few websites have fallen back to the standard Arial font. On this site, I use Google fonts called Francois One and Bitter. It’s designed to fall back to sans-serif. It’s unusual for a web font service to go down, but just like everything else, they do go down occasionally.

Opera Browser Maker On Sale

The makers of the Opera browser is considering selling the company due to interest from several companies. The Opera browser, while innovative at times, they were the first one to implement tabs, have never been able to get a large share of the market. It’s currently standing fifth behind the more popular browsers on the personal computers market, and a shrinking share on the mobile market as well. Read the rest of the article.

Permissions To Webroot

I was wondering about the best way to implement and give permissions to webroot, also known as the root directory of your web server. I’m familiar with Ubuntu’s structure, so I’ll use Ubuntu’s default webroot directory, which is /var/www.

Based on numerous documents and discussions I’ve read online, the proper way to give permissions to webroot is to (1 ) add a user to the www-data group, (2) change webroot’s ownership to www-data, (3) give all members of www-data group read and right access.

ulysses = user
webroot = /var/www
www-data = user and group for Apache

Here are the commands to run from the Terminal.

Step 1

Add new user to the www-data group.

sudo adduser ulysses www-data

Or

Add existing user to the www-data group.

sudo usermod -a -G www-data ulysses

Step 2

Make www-data the group owner of /www/data

sudo chown -R ulysses:www-data /var/www

Step 3

Give members of www-data permissions.

sudo chmod -R g+rw /var/www

That’s it. Pretty straightforward.

Linode Kicks Ass

Get a web server running within minutes. Choose a Linux distro, resources, and node location. That’s essentially Linode in a nutshell. I signed up with Linode about two weeks ago. I’ve been playing around with it since then. I can happily say that I’m very impressed with Linode. It has exceeded my expectations.

If you want total control of your web server, Linode VPS is really the way to go. You will be asked to choose server size when you sign up. They come in many configurations. I chose Linode 512. You also need to choose a data center location. There are six data centers worldwide. I choose the one in Fremont since I live in California.

So far, I’m loving the guaranteed server resources. My websites are running faster . I chose Ubuntu 12.04 LTS 32 bit because it’s a Linux distro I am very familiar with. Apparently, 57% Linode users have chosen Ubuntu as well. I already transferred a couple of domains over to Linode. The websites are screaming.

I plan to migrate more websites later. If you are curious about how Linode works, here is a short list of features to get you started:

  • Full ssh and root access
  • Guaranteed Resources
  • 4 processor Xen instances
  • Out of band console shell
  • Dedicated IP address, premium bw
  • Six datacenters in the US, Europe, and Asia-Pacific
  • HA and Clustering Support
  • Bandwidth pooling
  • Managed DNS with API