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.
73

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
20
8
Jesus Nava's profile photoJuraj Vajda's profile photoAntonio Di Giorgio's profile photoJanardhan Raju's profile photo
2 comments
 
Awesome sharing :)


Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Simple #Responsive Table in #CSS

Have fun! 👍🏼

http://codepen.io/AllThingsSmitty/pen/MyqmdM/ #RWD
37
5
Vladislav Masepohl's profile photoJosh Jenkins's profile photoAdrien Van Delft's profile photoАлександр Ковальков (Alexander)'s profile photo
 
Realized I didn't make it very accessible. So I fixed that, too.
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Responsive Flexbox Columns

This is just a quick idea to make columns equal height using #Bootstrap with #flexbox and also #responsive. (Sorry, color repaint is bad in the image recording.)

http://codepen.io/AllThingsSmitty/pen/GZpzGM #RWD
31
4
Enea Overclokk's profile photoJns Wndlmth's profile photo
Add a comment...

Agathe Fert

Tutorials & Articles  - 
 
Really interesting
 
Hey all… What do you think of the suggestions here?

Would you add any others or what are some of your favourite tutorials?

http://www.sitepoint.com/the-11-best-tutorials-on-mobile-design/
Ada Ivanoff highlights 11 of her favorite tutorials on mobile design for iOS, Android, cross-platform and mobile web designers.
17
1
Sílvio Miranda's profile photo
Add a comment...

Tharun kumar

Discussion  - 
 
Looking for jquery plugin or CSS code to get responsive horizontal menu with auto adjust drop down menu.
1
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Responsive Web Design: What the Internet Looks Like in 2016
8
2
Hugo Mora's profile photoEvgeny Scherb's profile photo
Add a comment...

FluidUI.com

Guidelines  - 
 
Modern mobile and desktop users expect their sites to load and run like lightning. Therefore, a good UI or UX designer needs to have a complete understanding of the range of options available to improve the speed of your site and consequently the enjoyment your users get out of using it.
Mobile and desktop users expect their sites to load and run like lightning. A good UX designer therefore must understand these critical points in detail.
1
Add a comment...

Jason McDonald

Showcase RWD Sites  - 
 
Hey all! My first website. Let me know what you think. Give it to me! Hit me hard I can take it! All done in HTML and CSS so I can continue to learn instead of just doing it in a CMS.

Replaced the old non responsive, non mobile compatible website. Redesigned the logo and company image. Everything you see was designed and developed by me except the slider. Still learning JavaScript. Product images are from the old website but tweaked to work on the new slider and social media posts like below.

Interested to hear what you think as a fellow Edin-burger +Ben Seven.
4
Ben Seven's profile photoJason McDonald's profile photo
4 comments
 
+Prabaharan Ganesan thanks! I have been meaning to try and figure that out. I tried to fix it and got messed up. It will be so obvious once I figure it out! 

+Rolf Jouaux good spot! I did them at the very beginning and forgot all about them. I've been too busy trying to fix the visual things by tweaking colours and what not I forgot about the meta tags! I don't think I will forget that again.

+Ben Seven thanks for the pointers! Great help! I can't actually remember where I got that hamburger icon from. That's another thing I did at the beginning and forgot about. I will make my own one ASAP! I looked at tables and quickly decided to get the website finished a lot faster I would make the pricelist an image that splits on smaller viewports. I have still not gone back to learn about tables and RWD, but now the site is finished and rocketing up Google the time is now to get the pricelist crawlable for the Googlebot! The same goes for the buttons, I couldn't get what I wanted so I quickly made them as images. I had not thought about hard of sight at all. I can't imagine the frustration at clicking on the buttons to hear what they are and not being able to get the information. 

I think I need to invest some time in learning about the planning/organisational stages as well as code and design. Thanks again to the three of you!
Add a comment...

Ben Seven
moderator

Showcase RWD Sites  - 
 
Our business Kin just launched the first in a programme of site redevelopments for Scottish Film.

The first is a teaching resource based around archival footage from the National Library of Scotland - "Scotland on Screen": https://scotlandonscreen.org.uk

We managed to launch this more usable, fully responsive site with a quicker page load time and smaller file size than the 12 year old website it replaced. 
3
Jason McDonald's profile photo
 
Looks good. I like it! 
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.
 
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.
6
Add a comment...

Matt Smith

Tutorials & Articles  - 
9
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
6
Add a comment...

Responsive Web Design

Tutorials & Articles  - 
 
Books are one of my side projects at the moment, or at least converting them to websites that work everywhere is anyway. Lara's Designing for Performance is one of the examples I use so I'm excited about her sharing her exact steps to publish it online.
2
Add a comment...

ClickHelp Folks

Tutorials & Articles  - 
 
Responsive HTML tutorial - typical problems, typical solutions:
https://medium.com/@clickhelp/responsive-html-tutorial-1bac6b67bb93
Do you use your phone to consume online content? Of course, you do!
9
4
Rogera “Glo-” Toussaint's profile photoJesus Nava's profile photo
Add a comment...

Agathe Fert

RWD Tools  - 
 
Nouvel outil RWD de Google +  rappels des outils RWD Firefox et Google Chrome
Enjoy !

#rwd #responsivedesign #responsivewebdesign #tools #toolsGoogle #googletools #google #pulsarinformatique  
 ·  Translate
 

En seulement 1 clic, vous pouvez tester si votre site  est adapté aux tablettes et aux smartphone , avec le nouvel outil de Google !
 http://design.google.com/resizer/
#responsivedesign #outilresponsive #tools #toolsresponsive #google #toolsgoogle #pulsarinformatique
 ·  Translate
Google a dévoilé un nouvel outil permettant de simplement tester la capacité responsive d'un site internet sous différentes résolutions.
7
2
Agathe Fert's profile photoky kann's profile photo
Add a comment...

zanetineweb

Discussion  - 
 
 
✎ Get ready for a lengthy read. “Efficient Responsive Design Process”, by Ben Callahan. https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/
What's your responsive design process? Insights on how to keep a design process efficient and successful — with a few warning signs to watch out for.
4
1
Wolfgang Schroeder's profile photo
Add a comment...

Matt Smith

Tutorials & Articles  - 
 
Art-Directed Responsive Images with <picture>

Some good tips that can be applied whether you use their service or not.

http://cloudinary.com/blog/automatically_art_directed_responsive_images #RWD
6
2
Agathe Fert's profile photoeva Fert's profile photo
Add a comment...

David Attard

Tutorials & Articles  - 
 
Getting the RWD basics right is essential in getting started with your responsive web designs. 
If you are interested about Responsive Web Design, this article will explain the basics such as pseudo elements, media queries and more
6
1
Ben Seven's profile photoDavid Attard's profile photoMatthew Galloway's profile photo
2 comments
 
Hey +Ben Seven 

you're absolutely right. There's no reason to take away someone's choice of zooming. I'm guessing the author added this more for completeness sake rather than as a suggestion.

Re the shrink-to-fit, that's new to me, I'll be happy to supplement the article with it.

David
Add a comment...

Iris Liu

Guidelines  - 
 
Boana's Johannes Holl shares ideas and UI patterns he found useful while designing a website with large desktops in mind.
17
8
Henriette Stewart's profile photoAntoine Derouineau's profile photo
Add a comment...