    
|
Check out the latest issue of "Women of Color" magazine. It contains great articles that apply to all engineering and computing majors.
]]>
|
|
|
|
I browse the internet everyday, on multiple devices. I use my Macbook Pro, iMac, PC, iPad, iPhone and yes even my television. So it really bothers me when I see websites that aren’t optimized for larger screen resolutions, or that take two minutes to load on my mobile device.
We’ve all embraced the concept of responsive design. Very few people argue against it. In fact, the only convincing repost I’ve heard recently is that a client is unwilling to pay for the extra time involved. But as with any new practice, myths have grown up to counterpoint it.
Let’s see if we can bust a few of those misconceptions…
Yes the mobile web is exploding and yes it is the driving force behind responsive design, but when we think of responsive design we need to consider more than just mobile. With the introduction of retina displays and video game browsers, internet users are now viewing websites on larger screen resolutions and in many different contexts.
Try to take into account different user contexts when designing and developing responsive websites. You need to think about what device a user is using: is the user on a mobile device or at home in front of the television? You need to think about where the user is located: is the user in line at the grocery store or camping out in the wilderness? Having good content means nothing if your site takes ten minutes to load while your users are sitting on the beach having a margarita.
Content is everything but context is everywhere and it is something that you have absolutely no control over. Which is why, realistically, your content should scale to any resolution, big or small. We have a set of tools at our disposal that will allow us to manipulate layouts, optimize text sizes, and increase performance for any context so remember to use them.
Remember context is shifting all of the time, which is why it’s so important to balance the visual layout, user’s needs, and performance when approaching a responsive design. It’s not just about mobile.
I used to argue that responsive web design will not work for every project and that it depends on the use case. Well, I’ve recently amended my view and I firmly believe that if we are going to be user focused designers and developers we need to approach every project with responsive design in mind.
Fixed width websites can be limiting on larger and smaller screen resolutions. The bottom line is that our web sites should be accessible to everyone no matter what device or screen resolution they are using, without restrictions.
I have noticed a trend emerging in the industry where designers and developers are building responsive websites that scale to certain device resolutions only, and I’m guilty of this as well. The three most common devices are of course laptops/desktops, iPads and iPhones (or other mobile devices). As designers we need to realize that responsive design is about design breakpoints and making content readable and accessible to everyone, not just the users of certain devices.
That being said, if you are designing websites in a software program, it is important to have some sort of framework with breakpoints to work off of. I suggest creating your own. Optimize your layout according to the content. The best way to find out what breakpoints work best is to sketch a few wireframes first to get an idea, then you can start laying down pixels in your software of choice. Make sure that you work off the same grid when wireframing and designing.
If you are like me then you code your wireframes and create a live prototype. This has helped me alot with my responsive workflow because I can create a fluid mockup and add breakpoints to the design as the design breaks instead of trying to cram pixels in Photoshop.
One of the biggest problems I’ve noticed on a lot of responsive websites is that typography is thrown to the wolves when designers and developers choose to use device breakpoints over design breakpoints. In my opinion choosing device over design shows a complete disregard for the content being published and the user consuming that content. The content should maintain its readability until it has to adjust to maintain that readability. Content will always be king and the accessibility and readability of your content should always be the highest priority.
One of the ways that I like to handle maintaining the readability of content in a responsive design is to use relative units such as ems for font-size, padding, margins and layout. Responsive design is all about proportionate layouts and, in my opinion, ems are a perfect fit.
Ems are relative units that are scalable to the font-size of parent elements, they can save you a lot of time and hassle, and they help to maintain the structure of your entire layout. What does this mean you ask? Well it means that as the base font-size increases or decreases, the layout adjusts evenly without fudging anything up.
Here’s an example, lets say we’ve found two design breakpoints, one for a very large desktop monitor at a super resolution and one for a small tablet. Let’s also say our base font-size is 16px which equals 1.0em and we bump the base font-size up to 22px when the site is viewed at a resolution of 3840 x 2160(super resolution) and we lower that base font-size to 14px at a resolution of 800 x 600(small laptop/tablet). We’ve just dramatically altered the size of the type and the layout of our website at two designated breakpoints, one large and one small. A headline at 1.4em with a 22px base font-size for larger resolutions means that 1.4em equals 30.8px and at the smaller base font-size of 14px, 1.4em would equal 19.6px. Even though our font-size got dramatically bigger at 3840 x 2160 we don’t have to worry about the layout breaking because it has also adjusted. Let’s say our containing element had a width of 50em. At a resolution of 800 x 600 that would be 700px but at the resolution of 3840 x 2160 it would be 1100px. Our padding and margins would adjust as well. At the larger resolution having font-sizes and layout set in ems has allowed our design to scale proportionally which makes our content more accessible and more readable.
The purpose of responsive design is to make your content accessible to everyone, even the disabled, across all screen resolutions and devices. Hiding content is never a good idea and, chances are, if you have to hide it you didn’t need it to begin with. Hiding content makes it unreadable to screen readers and you are now making your content inaccessible to those with visual or cognitive disabilities. Keep this in mind, content should be universal across all devices, don’t punish your users by limiting what they can view on a separate device.
That being said, I still find a few use cases where display: none; comes in handy. Mostly all of the use cases deal with some sort of navigation, and I use display: none; on navigation elements that change form on different devices. It’s never a good idea to limit or hide content on different devices because you’ve most likely based that decision on an assumption and some user, somewhere, will have a very bad experience.
There have been a number of websites that I have seen lately that have shown a lack of empathy towards users with low bandwidth. The majority of these sites have the same things in common, large images and large JavaScript libraries and a lot of these websites could have been optimized if they were designed with a mobile first approach.
Because there is still a lot of discussion about responsive images, it is hard for anyone to commit to any one solution. I understand the dilemma, but waiting around for a perfect solution that is standard across all browsers and devices is not making your current website any easier to use on devices with limited bandwidth. Find a solution that best fixes your problem and run with it. Not finding a solution means performance issues for everyone, and that completely defeats the purpose of responsive design.
Large JavaScript libraries can also cause problems on smaller devices. Try finding a way to call them conditionally based on screen resolution or type of device. Performance shouldn’t be an afterthought when it comes to responsive design.
The web has exploded, and with the advent of mobile and smartphone technology we can access content anywhere and in any context. It’s important to make sure we can reach all of our users and give them what they want, when they want it. Responsive design is a very new technique and in my opinion it’s the perfect technique to unify our content across the web.
What other myths about responsive design would you like to debunk? Are there any downsides to responsive design? Let us know in the comments.
Featured image/thumbnail, responsive web image via Shutterstock.
| Wallpaper Wizard for Mac (with 100,000+ Wallpapers) – only $4.97! |
 |
 |
Once again, it’s time to join in on a Smashing Magazine photography contest. You might remember or took part in our popular Coffee Mug Contest in 2011, which drew over 470 entries. This time, we are not interested in the vessel that holds your daily intake of caffeine, but rather in the object that fuels your creativity and inspiration.
Have a look around, choose the object that sparks your most creative thoughts and solutions, take a picture from an interesting perspective, and share it with us!
You may use any camera you like, whether a toy cam, mobile phone, SLR or point-and-shoot. Please keep in mind that the poster will consist of many photographs (the coffee mug poster accommodated 150 entries!). So, submit a picture that would also have significance among such a collection of entries.
john-peterson.jpg).john-peterson.txt).Here are some ideas to get you started:
(Image: Keoni Cabral )
(Image: Lawrence Rayner)
(Image: Ryan Aiyappa)
(Image: Ashish)
(Image: Alex G.)
(Image: vvaldzen)
(Image: Kathryn Rotondo)
The best entries and their photographers will be included in a huge poster created exclusively for this contest. The poster will be printed in a limited edition of 20 and will not be for sale. It will be awarded to 10 photographers of the most creative and original entries in the contest.
In additon, the best entries will also be rewarded with one of the four book gifts presented below, along with Cody, the one and only Smashing mascot. So… what are you waiting for?
Kern and Burn
“Conversations With Design Entrepreneurs” is a beautiful two-color book that features candid conversations with 30 leading designers who have founded startups, channeled personal passions into self-made careers and taken risks to do what they love.
The Shape Of Design
“The Shape of Design” is a meditation on the design process and the work’s potential effect when released.
The Manual, Volume I Gift Set
Includes issues #1, #2, and #3 of “The Manual”, a thrice-yearly publication on Web design as a discipline, capturing the voices of our profession as they explore what we do and who we are as designers.
An extra to your book of choice: Cody!
Please submit your photo by June 12th at the latest. Qualifying submissions and the winners will be announced soon after. We will showcase the most interesting photos here on Smashing Magazine (and in the big poster, of course), including the names of the contributors.
Please note that your photo will be used only for this event, and you will retain the full rights to it.
Send your photo to photos@smashingmagazine.com! We look forward to your shots, folks!
(al) (ea) (il)
© Melanie Lang for Smashing Magazine, 2013.
]]>New pricing schemes, content deals, and technologies are challenging net neutrality.
This fall, Verizon will try to persuade a federal judge to throw out U.S. Federal Communications Commission regulations requiring “net neutrality”—the idea that all content and applications must get similar treatment on wired and wireless networks.
]]>In this article we look at CSS3 Playground, another web-based tool for creating CSS3 Layouts.
]]>|
|