Responsive Web Design
We all know that mobile devices and tablet computers are experiencing explosive growth right now. So how do you make sure that a new website today looks as good on an Android phone and an iPad as it does on a large computer screen?
Responsive Design is the idea that development and design on the web today should fluidly respond to the user’s environment based on the device platform, orientation of the device, and the overall size of the screen.
When incorporating Responsive Design into a website there are some key things to consider. The site needs to be built inside of a flexible grid. This will account for the screen size of the device and render the site differently based on it. Any images used within the design need to be flexible as well. And be sure to enable different views for different behaviors using media queries.
Creating the site within a flexible grid will allow the layout of the website to change based on the size of the browser’s viewport. You can create this grid manually or use a pre-built framework such as Skeleton. Skeleton is a great framework already built to support responsive and mobile-friendly development.
The next piece to consider is what to do with the images you place in the design. Images will need to scale and move within the flexible grid to allow users to see them on all kinds of devices. There are several solutions for this, but here are two popular ways of adding flexibility to your images:
1. Use the CSS overflow property (overflow: hidden) to dynamically crop images as the size of the containers they are in shift and change. The “Berkshire Salon and Day Spa” is a beautiful example of images cropping or disappearing altogether to accommodate device width — try resizing your browser window, and notice how the design responds to the viewer’s new dimensions.
2. The use of the CSS max-width property is an easy fix. Set the <img> with a max-width of 100%. This will narrow and widen your image to the width of the device or browser size.
Lastly, utilize media queries via CSS3. This is nothing new to style sheets — defining what kind of media your style sheet will use has been around for quite some time. A stylesheet designed for printing websites on paper (print.css) will differ from your core style sheet. The same concept is used when defining style sheets for devices. For example, you could create a style sheet that will only be used on devices with a maximum width of 480 pixels:
|
1 |
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css" /> |
Basically what this is doing is checking to see if the device uses a screen (as opposed to, say, print or braille) and if the device’s screen has a width equal to or less than 480 pixels (for example, an iPhone held in its portrait orientation). If so, the page will be rendered using the CSS in the “style.css” style sheet. For some great information on media queries and responsive design check out this amazing article by Ethan Marcotte.
The recipe for responsive design is fairly simple, but it does require designers and developers to change their way of thinking to create for entirely new experiences and audiences. Nevertheless, it’s exciting to think of the new era we are entering, creating custom solutions for a wide range of users on a wide range of devices.
Tagged flexible, mobile, responsive design | Leave a comment
Extending User Model in Django
When building nearly every application in Django there comes a time where you want to associate more information with a user then just the built in ones. Django lets you as the programmer control how and where you want to handle this information.
There are several ways to do this, and there is no absolute right or wrong way. This is just one way to manage extra user data and we find it very easy to use and manage.
First we create a user profile model (Like to create a separate ”accounts” app to house this data).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
from django.contrib.auth.models import User
from django.db.models.signals import post_save
class UserProfile(models.Model):
user = models.OneToOneField(User)
#other fields here
def __str__(self):
return "%s's profile" % self.user
def create_user_profile(sender, instance, created, **kwargs):
if created:
profile, created = UserProfile.objects.get_or_create(user=instance)
post_save.connect(create_user_profile, sender=User)
User.profile = property(lambda u: u.get_profile() ) |
As you can see above is a normal model with a foreign key to the Django User model. Then add any other fields you would want to store for a user: date of birth, website, favorate color, or whatever. Then we are going to tie a signal to the creation of users. In this case we use the django post_save signal and set the sender as the User model. When a user is saved it will then call create_user_profile.1
On line 17 we are monkey patching the User object to have a new property. All this does is create a shortcut for our own use later. So rather then typing my_user.get_profile().fav_color we can simply type my_user.profile.fav_color
Under the hood they are the same but I find one is more aesthetically pleasing then the other.
Lastly we need to tell django that we have a user profile so that my_user.get_profile() works. In your settings.py simply add:
|
1 |
AUTH_PROFILE_MODULE = 'YOURAPP.UserProfile' |
You can read more about this in the django docs for storing additional information about users.
1 if created is not really needed but is a good double check along with UserProfile.objects.get_or_create. Using this we should never have an error of any user duplications or any other weird bugs/quarks your code may produce.
Tagged django, tutorial | 3 Comments
Some Trends for 2012
This is the time of year when tech bloggers everywhere post predictions for the new year. My prediction for 2012 is simple: this year will be about convergence. The previous software application waves called “desktop”, “web”, “social”, “mobile”, and “cloud” will converge, as the lines between them will continue to blur.
In the end, an application is an application. And users today want to be able to use that application anywhere, from any device, and have their personal content just magically appear.
This is as true for consumers as it is for office workers. As a consumer, I want my Amazon.com experience to be seamless on my computer, my iPad, and my iPhone. And when I’m at work I want to be able to create a spreadsheet, work on it anywhere, and collaborate on it with my office colleagues anywhere.
For developers, of course, the challenge is creating software applications which deliver a high-quality user experience across many different devices. But 2012 technologies will make it easier than ever for software engineers to “write once, run many”. New applications will no longer need a desktop version, a web version, and a mobile version. Convergence allows us to develop one version, available to users everywhere. That’s a huge opportunity.
Here are some other trends we expect to be a big part of the year ahead:
Mobile First
For most websites and applications, mobile is clearly the growth area. According to Gartner Research, smartphones and tablets will represent more than 90 percent of the growth of device adoption in the coming four years. So any new online initiative needs to start by looking at how to create a high quality experience for mobile users.
Open Standard Technologies Rule
Making a software application perform well across multiple platforms requires an absolute commitment to open standards. In 2011 we saw Flash, a proprietary (“semi-open”) technology die-off for just this reason. At Tivix our standard development stack is LAMP (P=Python), Django, HTML, CSS, and JavaScript – all open-source, standards-based technologies. In 2012 HTML5 will be the most important standard of all, bringing a whole suite of open technologies which work across all devices – from computers to tablets to mobile phones.
Infrastructure Disappears
The essential benefit of cloud computing (and its cousin, Software-as-a-Service) is that users don’t to have to purchase, install, and configure anything; computing is just delivered to them as an on-demand service. The same is true for us as developers. Today, with solutions like AWS or Linode, we can have an entire set of servers configured and running in a half-hour, with zero capital investment. This is huge, especially for the kind of development speed and agility our clients want from us today. In 2012 infrastructure will continue to become invisible, reliable, and essentially infinitely-scalable.
User Experience is More Important than Ever
The bar is set high today. Users expect even a simple website or enterprise application to have the same quality of user experience they get on Facebook or Google. On top of that, a user interface today has to work well on many different screen sizes, from large monitors to tablets to small smartphones. 2012 will see the embracing of Responsive Design techniques, where the design of the user interface automatically and fluidly adjusts for the user’s device and screen size. For some great examples of Responsive Design, see Foodsense, the Boston Globe, and Illy (open and close the width of your browser window and watch how the design automatically adjust itself for any screen size, including mobile).
2012 will feature many other tech trends as well, of course. Social will continue to be huge, as will the geolocation capabilities of mobile. And the combination of the two will continue to drive opportunities to deliver context-aware content to users. The proliferation of mobile payment solutions will mean that consumers will become increasingly comfortable using their smartphones for shopping and purchasing. And video of all kinds will continue to be the largest growth category of online content.
But mostly, 2012 will be about convergence. At Tivix, we see nothing be great opportunities ahead. It’s going to be an exciting year.
Leave a comment