Stream

Join this community to post or comment
Pinned by moderator

Ben Seven
moderator

Guidelines  - 
 
README - RWD Community Posting Rules

READ BEFORE  POSTING

— If your post is not specifically about Responsive Web Design as defined by Ethan Marcotte's A List Apart article, it will be removed.

— This is not a community for sharing generic web design or development advice. If you do not heed these rules, your post will be removed. And subsequent off-topic posts will result in a ban.

— Additionally, your post may be removed for the following reasons;

• Low quality posts, either poorly written or otherwise hard to read and understand

• Articles that are just an explanation of what RWD is; there are many, many of these out there and we don't need to see them; this is a community of practitioners

• Articles that compare RWD to another methodology

• Articles that the mods believe have been written to gain your business search engine traffic, rather than bringing value

• Posts promoting frameworks, WordPress plugins, themes (paid or not) or jQuery plugins. We get so many of these it floods the postings; if you are looking for one, ask what people recommend and get help in the comments

• Posts that are seen to be only promoting your business or service


This is not an exhaustive list, and from time to time the mods may make exceptions; users who are not mods can report posts as spam for mods to review where they do not follow the above rules.
81
 
Automating Art Direction With The Responsive Image Breakpoints Generator
#responsive #webdesign 
Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive image breakpoints? A year later, he had an answer: Ideally, we’d set responsive image performance budgets to achieve "sensible jumps in file size." Cloudinary built a tool that implements this idea, and the response from the community was universal: "Great! Now, what else can it do?" Today, we have an answer: art direction!
2
3
Add a comment...

Dieter Ziegler

Discussion  - 
 
3 Key Strategies to Make Your Content Mobile Ready

With the advent of smart phones net-savvy consumers are more inclined to accomplish online purchases via mobile. Increasing traffic from mobile users is influencing marketing strategy and overall business operation.

#Mobile #ResponsiveWebdesign #MobileStrategy
9
Wicked Local Marketing's profile photoWebsite Boston - Web Design Service's profile photo
4 comments
 
make your mobile ready with these helpful strategies
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Use :root for Flexible Type

Calculate the font size based on the viewport height and width, then use the root em unit based on the value calculated by :root.

:root {
font-size: calc(1vw + 1vh + .5vmin);
}

http://codepen.io/AllThingsSmitty/pen/XKgOkR
25
6
Ben Seven's profile photo
7 comments
 
I've always been intrigued by this kind of notion: here's some thinking out loud...

If we take the changing size of the viewport here as representing a continuum of browsing device sizes, is there really a 1:1 relationship between the size of the viewport and appropriate size of type for the typical viewing distance on those devices?

On the development side, this kind of almost-intrinsic-ratio usage I find really pleasing - like using vh and vw units, and having truly scaled / proportionally behaving interfaces.

But from a design perspective, I'm struggling to see how small screen == small type preferable. It seems like the kind of thing user testing would bear out to be not as 1:1 as this technique would provide - just a hunch.

Add a comment...

Vladan Golubovic

Showcase RWD Sites  - 
1
Add a comment...

Matt Smith

Discussion  - 
 
Laziness in the Time of Responsive Design

Ethan Marcotte speaking at An Event Apart Austin. 📺
3
1
Add a comment...

Justin Avery

Discussion  - 
 
Let us know what your biggest issue is with RWD in this Google Plus poll
5
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
A Crash Course in Technical Responsive Web Design

From the make up of media queries to the technical considerations of the implementation of your sites, this Treehouse post has got some worthwhile tips. via +Responsive Web Design (+Justin Avery)
As a technical medium, Responsive Web Design (RWD) requires a working knowledge of the code that makes it work. Designers who ignore the basics fail to understand what browsers can and can’t do. Cascading Stylesheets, or CSS, is the language...
7
Ryan Cooper's profile photoWebsite Boston - Web Design Service's profile photo
2 comments
 
nice article..additional information
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Use :root for Flexible Type

Calculate font-size based on the viewport height and width for more fluid type.

https://gist.github.com/AllThingsSmitty/ca2b5f00b430c1926c4cea90c57f7ff7 #CSS #RWD
27
8
Jim Kender's profile photoWebsite Boston - Web Design Service's profile photo
2 comments
 
additional knowledge...thanks for sharing
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Simple #Responsive Table in #CSS

Have fun! 👍🏼

http://codepen.io/AllThingsSmitty/pen/MyqmdM/ #RWD
43
5
Matt Smith's profile photoWebsite Boston - Web Design Service's profile photo
2 comments
 
simple but helpful....thanks for sharing
Add a comment...

About this community

Responsive Web Design is gaining popularity in leaps and bounds due to the increase in mobile device usage. Here we can discuss the pros,cons and techniques of responsive design. Please read the rules before posting.

Web Guru Awards

Showcase RWD Sites  - 
 
Are you looking for delicious gluten and dairy free recipes, or simply ideas to eat well? K pour Katrine has got you covered!
1
Add a comment...
 
Email finally wakes up to responsive design
#reponsive #email 
Email is far older than the web; introduced in 1972, anyone who’s ever tried designing for email can be forgiven for assuming that it hasn’t had an update s
10
3
Website Boston - Web Design Service's profile photoBoston Web Designer's profile photo
5 comments
 
great to read..
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Element Queries == The Holy Grail of RWD

They’re not here yet, but the EQCSS project can help in the meantime.
For some time, we’ve run up against the limits of what CSS can do. Those who build responsive layouts will freely admit the frustrations and shortcomings of CSS that force us to reach for CSS preprocessors, plugins and other tools to help us write the styles that we’re unable to write with CSS alone. Even still, we run into limitations with what current tools help us accomplish. Think for a moment of a physical structure. If you’re building a ...
8
1
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Intrinsic Ratio Boxes

A handy trick for maintaining the aspect ratio with responsive video.

http://codepen.io/AllThingsSmitty/pen/jALZvE
5
Wicked Local Marketing's profile photoWebsite Boston - Web Design Service's profile photo
4 comments
 
nice trick in maintaining
Add a comment...
 
Do you follow the 'mobile first' philosophy?
167 votes  -  votes visible to Public
Yes, always.
25%
No, never.
13%
Depends on the project.
62%
9
Tiago Vasconcelos's profile photoRicardo Geek's profile photo
4 comments
 
Depends on the project budget I say... not all clients care :C
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Do Retina Images Really Mean Larger Files?

TL;DR... nope!
Common sense says yes, but guess what? You can have your cake and eat it too, especially when it comes to picture images. Long story short, a retina jpeg image can be compressed a lot more before t…
6
1
Kyle Hawk's profile photoWebsite Boston - Web Design Service's profile photo
4 comments
 
nice article..must read
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

A great look at some complex/rich responsive patterns.
Design patterns often have a bad reputation. They are often considered to be quick, lazy, off-the-shelf solutions that are applied blindly without consideration of the context of a problem. Solutions such as the almighty off-canvas navigation, the floating label pattern or carousels for featured products are some of the prominent ones. This article isn’t about these patterns, though. This article features some of the slightly more obscure desi...
6
1
Add a comment...
 
Google launches their new #mobile-friendly testing tool

+Google+ revamped the mobile-friendly #testing tool after its launch back in November 2014.
Google revamped the mobile-friendly testing tool after its launch back in November 2014.
18
1
Website Boston - Web Design Service's profile photoWicked Local Marketing's profile photo
2 comments
 
mobile friendly tool on digital age
Add a comment...

Matt Smith

Tutorials & Articles  - 
15
Add a comment...

Responsive Web Design

Showcase RWD Sites  - 
 
 
This is a lovely site! Very reactive and the use of the transitions between each mantra for each day and sliding across to the story behind the Mantra is just lovely.

 They take care to ensure that the right logo is being shown as well, super crisp but without burdening users with a few extra bytes. IN saying that though, the logo is in a png sprite so it would interesting to see how much extra the file size would be and weigh that up against the workflow to make this happen.

 See the full review at https://responsivedesign.is/examples/blogs/founder-mantras
13
Ryan Cooper's profile photoWebsite Boston - Web Design Service's profile photo
2 comments
 
thanks for imparting
Add a comment...