Responsive Web Design (as if there is another type)

I realize that when my students first start out building basic, single-page HTML and CSS websites, they are not fully responsive web pages, but looking at it from an industry stand point, I am surprised that we haven’t dropped the “responsive” from the front of this phrase yet. I mean, shouldn’t all modern sites be built with responsive web design in mind? I am not sure where it would come into play that anyone would desire a non-responsive site with the constantly changing sizes of smart phones, tablets, and laptop screens.

So, I decided to gather together some articles/videos on responsive web design into a single resource page.

First, Video: Responsive Web Design In Photoshop – A Mindset Not Just Technique
In this video they explore how to design in Photoshop with a responsive mindset and grid at your disposal. I realize that many think that designing with a grid structure hinders creative web design and for certain sites that push the boundary, I am sure that is true, but when you look at how diverse the layout grid can be with a system such as Unsemantic, there are few shapes within a layout that you can’t use.

responsive web design with a grid

 

Admittedly, it is not as freeform as a mindmap or freeflow design style, but with a little creativity, you can bend the grid layout to meet your design aspirations.

Secondly, according to Google, responsive web design factors into search results now. Therefore responsiveness is even more important if poor responsive design knocks you out of google search rankings. What is the use of a great site, if it can’t be found in a search? We can definitely knock Google for using search engine priority to force the hand of designers, but it is their tool and if we want to be found, there isn’t much of a way around optimizing. Read more about how responsive web design effects Google rankings here- What Is A Mobile-Friendly Website, And Why Does It Matter? There is a tool in Google developers that can test your site for mobile-friendliness (according to their algorithms) which can be found here- https://www.google.com/webmasters/tools/mobile-friendly/ Remember to check multiple pages on your site, not just the home page!

Finally, as we head into the last few weeks of 2015, did responsive web design change at the pace we expected back in January of this year-The State of Responsive Web Design 2015? Were the predictions accurate? Any new players on the field that we weren’t expecting? What will the 2016 bring that changes the way we look at responsive web design moving forward?

Web development is an exciting field to be a part of, but you better buckle up because it doesn’t slow down!

 

Styletiles tool to communicate with clients

One of the most difficult jobs of a web designer is to accurately communicate with clients. Some clients have a very good idea of what they want their website to look and feel like, but have difficulty communicating their vision. Then there are clients that hand all the creative decisions over to the designer, but then can’t figure out what they don’t like about the mock-ups of the proposed design. Either way, as web designers, we need to come up with quick, easy ways to get our ideas down in a way that visually communicates the website design to a client in a clear way.

Style tiles are a way to create style guides for a website prior to building it.

Style tiles are a way to create style guides for a website prior to building it.

 

There are many tools out there for this purpose, but lately, I’ve been interested in the process of using style guide, especially on team-based projects. One tool that serves this purpose is Styletil.es.”A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicates the evolution of a visual brand for the web.”  Continue…

Chrome DevTools for Mobile

This is a great article exploring the newer features of Chrome DevTools and how they interact with mobile development. The video is short and sweet and you can see how big of a jump these tools now are in debugging and testing mobile websites.

Developing for mobile should be just as easy as it is developing for desktop. We’ve been working hard in the Chrome DevTools to make things easier for you and it’s time to unveil some new features that should dramatically improve your mobile web development. First up, remote debugging and then we’ll unveil proper mobile emulation.
Continue…

What does Responsive Website Design actually mean?

Responsive website design infographics

Responsive Website Design is one of many terms that get thrown around by web developers and may be misunderstood by those less familiar with the web development process. Problem solved now! Learn what “responsive design” actually means with this post linking to 5 helpful and informative infographics http://crtv.mk/aNNz. Continue…

Don’t Overthink It Grids

Simple grids- how to code in CSS

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a “main content area” floated to the left a “sidebar” floated to the right, it’s a simple grid.

If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated. Continue…

Prototyping Responsive Typography

As a designer, I want everyone who sees my work to see it exactly as I intended it to display. If the font changes size or family, the colors don’t display right, the images are squished, my intention as a designer has not been conveyed well to the viewer. In other words, you are not seeing my design. How do we make sure that the type we create for websites looks like we intend it to?

The history of typography dates back about 5,000 years. It starts from a series of pictograms, which then evolved to hieroglyphs in Egypt and later around 1,200 BC to Phoenician alphabets. Almost 2,500 years later the Chinese invented first movable type which later revolutionized everything in the west when Gutenberg invented latin movable type. Many of the basic concepts of typesetting are still the same as 500 years ago.

Web typography, and digital typography in general, is a huge step forward in this history. It has made setting type fast and easy compared with hand-setting metal type. Responsiveness, when added on top of this, makes this period of change we are living very fascinating. Not only is centuries old design theory being rewritten, but the process of how design happens is now changing too (as Mark Boulton states it). Continue…

Build Beautiful WordPress Sites With Zurb’s Responsive Foundation Framework

Build responsive websites with ZURB Foundation

Living mostly in the shadow of Twitter Bootstrap is a powerful CSS framework that is just now making its way into WordPress themes. Billed as “freakishly advanced”, with support for literally any grid size from mobile phone to TV, this is one framework that can no longer be overlooked. Today we’re going to explore Foundation, the MIT-licensed front-end framework created by ZURB, Inc.

With several successful case studies already under its belt, Foundation is rapidly gaining popularity for use in high profile websites, such as Pixar and National Geographic. This full-featured responsive framework offers a few advantages that some developers find to be sorely missing in Twitter Bootstrap. Let’s take a look under the hood, compare some features and check out options for using Foundation with WordPress. Continue…

There Is No Mobile Internet! – Web design

As a web designer, what do you think? Do we need to change the way we thing about web design and make it “device independent?” I tend to think so. When I design a site I prefer to think about how it will morph for each user on their device rather than “breaking” at certain points in order to serve a particular screen size. For some reason the design process flows more freely that way. But the code requires that we analyze how our web designs perform across numerous platforms.

It’s time to stop thinking about the Internet and online communication in the context of a device, be it desktop, tablet or mobile. Advances by Google and Apple have heightened consumer expectations, which now require stricter focus from us to create seamless online communications — communications that work everywhere and that get their point across. We need to embrace a device-agnostic approach to communicating with connected consumers and forget the idea of a “mobile Internet”. There is only One Web to experience.

(Smashing’s note: If you are looking for a good book on mobile, this is the one. Our brand new book on best design and coding practices for mobile, Responsive Web design and UX design for mobile. Get it now!)

A Quiet Change
At the beginning of June, Google published on its Webmaster Central Blog its “Recommendations for Building Smartphone-Optimized Websites.” Its recommendations are that responsiveness — or, where necessary, device-specific HTML — is the way to build websites for today. Both methods are based on all devices accessing one URL, which in Google’s words makes it “easier for your users to interact with, share, and link to…” Continue…