Showing posts with label responsive. Show all posts
Showing posts with label responsive. Show all posts

Friday, August 02, 2013

Sketchsheets for Responsive Web Design

Sketchsheets for Responsive Web Design

With the constant evolution and popularity of mobile devices, designing web sites responsively is essential. Unlike designing for a static or fixed web site, the fluidity and flexibility of a responsive site can make the design process tricky and at times almost impossible to successfully convey visually your design ideas.

Sunday, July 28, 2013

Pure: What, Why, & How?

Pure: What, Why, & How?
This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I'll guide you through the creation of a simple page in order to highlight how you can use some of the library’s components.

Why Create Responsive Layouts?

Over the past few years in web development, three words that are bouncing around, over and over again are: Responsive Web Design (RWD).

Wednesday, July 24, 2013

Simple Responsive Images With CSS Background Images

Simple Responsive Images With CSS Background Images
On an iPhone, a 290 × 183 pixel image that is 18 KB in size looks identical to the 452 KB, 1940 × 1229 pixel image on the MacBook Pro.

With all the talk of new HTML5 standards such as the srcset attribute and <picture> element, as well as server-side techniques such as Responsive Web Design + Server Side Components (RESS), you'd be forgiven for concluding that simple, static websites can’t support responsive images today. That conclusion might be premature, however. In fact, there's an easy, straightforward way to deliver responsive images that's supported by all of today's Web browsers: CSS background images.

Tuesday, July 16, 2013

Coding A Responsive Resume In HTML5/CSS3

Coding A Responsive Resume In HTML5/CSS3

Almost everybody in the business section has created a resume at some point. When working as a freelancer you are always vying to land new projects. Because of this transitory work cycle it helps to offer potential clients a brief peek into your past experience. And what a better opportunity than offering your professional resume online?

Saturday, July 13, 2013

30 Useful Responsive Web Design Tutorials

30 Useful Responsive Web Design Tutorials

This list is not meant to be an exhaustive one but it will get you started on understanding the basics of designing an adaptive website that will cater to all sorts of screen sizes.

We'll start off with introductory tutorials in "Breaking the Ice", something like an RWD: 101 class you should attend to get the hang of the concept before we move on to "Start Building" exercises.

Friday, July 12, 2013

Life Beyond 960px: Designing for Large Screens

Life Beyond 960px

The premise behind a responsive web isn't purely that websites be built in a mobile-friendly way. It's about setting our content free so that it can be experienced by whatever means necessary – and that includes at large scale. Let's take a look at the design considerations behind the often neglected huge desktop screen.

Tuesday, July 09, 2013

Expanding Search Bar Deconstructed

Expanding Search Bar

Summarized, this is what we want the search component to do:

  • Initially, we only want to show a button with a search icon.
  • When clicking on the icon, we want a search input to slide out.
  • The component should be fluid, meaning that we can use it in a responsive context.
  • When we type something we want to be able to submit the form by either hitting enter or clicking on the search icon.

Tuesday, July 09, 2013

Responsive Icon Grid

Responsive Icon Grid

A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.

Saturday, June 08, 2013

Text-align: Justify and RWD

Text-align: Justify and RWD

Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?

Friday, May 10, 2013

Vertical Timeline

Vertical Timeline
This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.

Thursday, April 25, 2013

Customize an HTML5 Webpage using the Bootstrap Framework

Bootstrap Framework
Many web developers are familiar with Twitter Bootstrap and have seen this library on a number of projects. The Bootstrap core is fantastic when you need a CSS reset along with other common layout features. It may not be the right fit on projects where you need a whole lot of customization. But for landing pages and smaller websites I think Bootstrap has become one of the easiest resources to start using.

Thursday, April 18, 2013

Advanced cross-browser flexbox

Advanced cross-browser flexbox
Figure 1: An image of the final layout example

The CSS Flexible box module level 3 — or Flexbox for short — brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly and dispensing with some of the illogical hacks and kludges that we've traditionally used. I dealt with the basics of Flexbox in my article Flexbox: fast track to layout nirvana? In this article I will go a bit further, looking at a more advanced example and using Modernizr to serve different styles to browsers with differing levels of flexbox support, providing the best level of cross browser support currently available.

Thursday, April 18, 2013

Element Queries

Element Queries
The idea of Element Queries is pretty simple - it's like a Media Query (specifically, the min-width/etc queries), but for a parent or ancestor element, rather than the viewport.

Tuesday, April 09, 2013

6 Problems Hindering Responsive Web Designing With Solutions

Problems Hindering Responsive Web Designing With Solutions
The emerging trend of using internet through Smartphones is making web designers think about responsive web designing. However, there are several problems that web designers have to encounter while creating such designs. The problems usually occur in the technical areas. Some common RWB problems that web designers face along with solution are given in the lines below.

Tuesday, February 19, 2013

Getting Started with Responsive Typography

Responsive Typography

Responsive design is the "in" thing when it comes to website design. Responsiveness allows for one design scheme to work on websites, tablets and mobile devices and look great in a variety of sizes and orientations.

But have you thought about how this evolving, adaptable design outline relates to type?

Tuesday, February 19, 2013

Responsive, Horizontal Multi-Column Layouts

Responsive, Horizontal Multi-Column Layouts

The problem with responsive multiple columns

When the multiple column syntax was first introduced, I was hopelessly optimistic about the possibilities that this new layout technique would offer us in crafting good reading experiences.

Tuesday, February 19, 2013

Responsive Tables

Responsive Tables
A few smart folks have already put together their thoughts on responsive tables and, while I think the proposed methods are pretty good, I think there might be room for improvement. As such, I've been tinkering for a while and came up with the following strategy when it comes to tables.

Step 1: Use data-* attributes to hold information about the column header(s) associated with the markup:

Friday, December 21, 2012

Giving content priority with CSS3 grid layout

Giving content priority with CSS3 grid layout

Browser support for many of the modules that are part of CSS3, have enabled us to use CSS for many of the things we used to have to use images for. The rise of mobile browsers and the concept of responsive web design has given us a whole new way of looking at design for the web. However, when it comes to layout, we haven't moved very far at all. We have talked for years about separating our content and source order from the presentation of that content, yet most of us have had to make decisions on source order in order to get a certain visual layout.

Thursday, December 20, 2012

FooTable: a jQuery plugin for responsive data tables

FooTable

These days, everyone is jumping on the responsive bandwagon. Apart from responsive layouts, everything is going responsive: sliders, lightboxes, galleries, you name it! But then one day, when I was working on an HTML table with a lot of columns, I thought "How is this going to look on my iPhone?". And then I searched for "responsive tables" and found Chris' roundup post on a few solutions out there.

Tuesday, December 18, 2012

Responsive column layouts

Responsive column layouts

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn't require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.