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!

 

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…

Search with Filters Responsive Design Pattern

Here is an interesting design example relating to Responsive Design of a page requiring search filters such as a store or photography gallery. What do you think? Which responsive option would work best from a user standpoint?

I’ve long been interested in design patterns. Common and proven-effective solutions to design problems. Too many settings to display at once and it’s confusing the user? Put them into logical groups and use an accordion design pattern! Patterns got even more interesting with the onset of responsive design. How do these patterns hold up as the available screen space changes?

We might be able to get six or more tabs on a laptop screen, but it’s only really practical to get three on most mobile devices. What do we do? Perhaps converting them into an accordion would work.

Brad Frost has done a great job in keeping a repository of Responsive Patterns. Brad and Dave and I were sitting around after InControl talking about design patterns that hadn’t been explored as much. Dave mentioned “Search with Filters” as an example. There can be quite a lot of UI involved in a search filter, so you have the challenge of displaying that without taking up too much room for the actual results, as well as allowing the user to change those filters without being too disruptive.

On desktop, you can do a split column design with the filters on the left and have plenty of room for results:

large display grid with search options.

Continue…

Design Responsively With Malleable Mobile Menus

One of the biggest challenges in responsive web design is getting your menus to function. If you’ve ever had to mess with it, you know what I’m talking about. You can use media queries to define CSS that applies when the screen size is various sizes, but sometimes you need extra functionality to pull off an ideal design.

What Is Mobile Menu Design?

Mobile menu design is simply getting the menus for a responsive design to fit mobile screen sizes. One of the core concepts around responsive web design is making all content available all of the time on all screen sizes. Just as importantly, we want to only publish content once — not create a “mobile version” of our content as well.

So, creating responsive menus that allow for lots of menu items that work in all screen size scenarios is important.

Why Use Mobile Menu Design?

Large and even not-​​so-​​large navigation menus take up a lot of space on a small screen. Ideally, you can compact the menu items while also making the menus usable. Too small and the user can’t see them or may struggle to touch the buttons. Too large and we’re making our users scroll, and scroll, and scroll some more.

So, mobile menu design becomes an important usability task.

Continue reading article here: Design Responsively With Malleable Mobile Menus – DesignFestival.