    
|
|
|
|
|
Let me start by saying this, I will not be including any point-and-click design tools in this list (think Adobe Edge Reflow). The reason is simple enough, I believe that they’re bad for everyone; designers, clients, coders… everyone suffers.
It’s not a question of the quality of code output by these programs. It’s not because it makes design “too easy”. It’s because no matter how good these programs are, they will always limit the people who use them.
They will be limited, not even by what the program can accomplish, but by what they think it can accomplish. If they think about it, the average user will likely compare it to tools like PowerPoint and/or any number of print design programs, falling once again into old mindsets. Therein lies the problem. Visual web publishing tools will always try to apply old processes to new technologies.
A truly web-oriented workflow is one that embraces the underlying concepts and technologies upon which the web is built. Sure, you can use any number of visual tools to create websites that are technically responsive, but you’d be missing the point.
It’s not about an adaptable layout. It’s about making information accessible to as many people as possible. There are some things a program like Edge Reflow just can’t do. In short, you need to write code.
Therefore, the best tools to aid you in responsive design are those tools that help you to understand and make use of web technologies, plan your website thoroughly, write better code more efficiently, and test/present your responsive designs to clients in context.
Let’s start with the obvious:
No. I’m not kidding. This is quite literally the most important tool you have, because it shows you exactly what your website looks like under your specific conditions.
There has been much debate about whether or not designing in the browser is better than designing in an image editor like Photoshop or GIMP. Allow me to resolve this for you…
Are your website’s users going to do their browsing in Photoshop? Image editors can make pretty pictures, not emulate actual experiences. Use image editors for editing images. Use your browser to design websites.
It’s time to wean our clients off the hyper-detailed mockups that they’ve gotten used to. As the web changes, and our processes become more fluid and iterative, we must move on.
Install at least one browser with every major rendering engine, and get some developer extensions. Get used to looking at your source code the way your browser sees it, because you’re going to be here a while.
Technically, just about any vector-based image editor could do the job when wire-framing your websites and apps. I tend to wire-frame the desktop version of my site first, create a copy of the file, resize the canvas, and go from there. Using vectors makes it easy to quickly resize and rearrange your elements while you’re still in the planning stage.
I prefer the drawing app on Google Drive for a couple of reasons:
Sharing and collaboration features: Google does information sharing better than just about everyone else. With in-context commenting, simultaneous editing, and Hangout integration, I’m in love.
Automatic guides: In each drawing document, guides are automatically created based on the dimensions of each object you put into the document. This makes it easy to depict consistently-sized elements in the document, which is great for grid-obsessed designers like me.
As I share these wireframes with clients, that professional-looking consistency is a big plus. And yet, I’m not constrained to those guides. I see it as a good alternative to mockup apps that try to constrain you to a grid.
Oh, and it’s free. Need I say more?
Based on Style Tiles, Style Prototypes are an in-browser deliverable designed to help you give your clients an idea of how their website’s typography, color, and UI elements will look. Since it is meant to be viewed in the browser, there will be fewer inconsistencies once the website is built.
Furthermore, I would posit that Style Prototypes could help our clients to mentally separate the concepts of UX and aesthetics. And really, anything that helps our clients to better understand the web design process can only be a good thing.
Responsinator is a simple tool that shows your website at different sizes. It imitates, in a very basic way, several different device sizes and contexts. This tool is not for your benefit. You want to see what your website looks like at smaller sizes? Resize your browser window. Better yet, get some actual mobile devices and do some real testing.
This web app is best used to show your clients a quick approximation of what their website will look like in contexts other than a desktop or laptop monitor.
Again, there are many tools that could do the same job as Responsinator, and just as effectively, I suppose. I chose this one because it presents several device silhouettes one after the other, for easy perusal.
Now this one is for you. If you have a mobile testing lab (and the sooner you can make one, the better) Edge Inspect will synchronize all of your devices to view the same page at once. Refresh the page on one device, and you refresh them all.
Unlike the others on this list, this one’s not free. However, if you can afford enough mobile devices to need a solution like this, it’s probably worth the money.
As always, your most important asset is your brain. These tools, and others like them, can only help you on your way. I chose these because they perform very specific functions that aid me in designing responsive sites. They don’t limit what I can do.
The best tools are really the ones that stay out of the way.
Do you use these tools? What are your top 5 tools for responsive design? Let us know in the comments.
Featured image/thumbnail, tools image via Shutterstock.
| Vandelay Web & Responsive Design Kit: 400+ Elements – only $27! |  |
|
|
HAPPY HALLOWEEN!!!
Alas, the cursed night is upon us! We thank you for coming and humbly offer you the 2013 Treehouse Halloween Special: HTM-HELL. All we ask in return is that you give us your undivided attention for the next 15 minutes. If you do not like it then too bad, opinion is relative. So turn off the lights, grab a flashlight and get under the covers; this is going to be one Hell of a show…
http://www.youtube.com/watch?v=jsycDWmv_a8
Unlock more badges with Treehouse to see where the story goes next!
The post Halloween Special 2013: HTM-HELL appeared first on Treehouse Blog.
]]>Join us for the annual PROMISE Fall Harvest Dinner, 6:00 PM, Friday, November 22, 2013 at the Riggs Alumni Center on College Park’s Campus. This event is open to all graduate students, postdocs, faculty, and staff from any school within the University System of Maryland (http://www.usmd.edu/institutions/) who want to participate in, and support the mission of PROMISE AGEP: Maryland Transformation – “Diversity in STEM Education” - https://promiseagep.wordpress.com/2013/09/18/new-nsf-promise-agep-grant-funded-until-2017-includes-university-system-of-maryland-ccbc-aacc-and-agmus/
PROMISE AGEP: Maryland Transformation will engage the University System of Maryland in a system-wide focus on diversity in STEM graduate education, and will share resources and facilities to provide professional development for participants that might otherwise be limited or non-existent at some of the institutions without the alliance. This state-wide alliance eliminates the “silo-effect” or independent STEM diversity efforts, and it promotes as a core mission the collaboration to expand and connect a community of scholars through the state.
Read about our AGEP:
Tull, R. G., Rutledge, J.C., Warnick, J. W., and Carter, F. D. (2012). PROMISE: Maryland’s Alliance for Graduate Education and the Professoriate Enhances Recruitment and Retention of Underrepresented Minority Graduate Students. Academic Medicine, 87(11), p. 1562-1569.
—————————————————————————————————————————————–
CLICK and REGISTER for the 2013 Fall Harvest Dinner,Friday, November 22, 2013:
This event is free, but you must have a ticket. A ticket will be sent to your email as an attachment to your registration confirmation. Please remember to print and bring your ticket.
———————————————————————————————————————————————-
Location: The Samuel Riggs IV Alumni Center at the University of Maryland College Park:
Website: http://www.riggs.umd.edu/
Directions: http://riggs.umd.edu/map.html (Note that this link has a sidebar menu with detailed directions and parking. The Riggs Center is near the Stamp Student Union.)
Join us for the annual PROMISE Fall Harvest Dinner, 6:00 PM, Friday, November 22, 2013 at the Riggs Alumni Center on College Park’s Campus. This event is open to all graduate students, postdocs, faculty, and staff from any school within the University System of Maryland (http://www.usmd.edu/institutions/) who want to participate in, and support the mission of PROMISE AGEP: Maryland Transformation – “Diversity in STEM Education” - https://promiseagep.wordpress.com/2013/09/18/new-nsf-promise-agep-grant-funded-until-2017-includes-university-system-of-maryland-ccbc-aacc-and-agmus/
PROMISE AGEP: Maryland Transformation will engage the University System of Maryland in a system-wide focus on diversity in STEM graduate education, and will share resources and facilities to provide professional development for participants that might otherwise be limited or non-existent at some of the institutions without the alliance. This state-wide alliance eliminates the “silo-effect” or independent STEM diversity efforts, and it promotes as a core mission the collaboration to expand and connect a community of scholars through the state.
Read about our AGEP:
Tull, R. G., Rutledge, J.C., Warnick, J. W., and Carter, F. D. (2012). PROMISE: Maryland’s Alliance for Graduate Education and the Professoriate Enhances Recruitment and Retention of Underrepresented Minority Graduate Students. Academic Medicine, 87(11), p. 1562-1569.
—————————————————————————————————————————————–
CLICK and REGISTER for the 2013 Fall Harvest Dinner,Friday, November 22, 2013:
This event is free, but you must have a ticket. A ticket will be sent to your email as an attachment to your registration confirmation. Please remember to print and bring your ticket.
———————————————————————————————————————————————-
Location: The Samuel Riggs IV Alumni Center at the University of Maryland College Park:
Website: http://www.riggs.umd.edu/
Directions: http://riggs.umd.edu/map.html (Note that this link has a sidebar menu with detailed directions and parking. The Riggs Center is near the Stamp Student Union.)
ARM Extends Its Flagship DS-5 Development Studio for RTOS Development.
]]>|
|
Our UMB Co-PIs for PROMISE: Maryland AGEP Transformation invite graduate students and postdoctoral fellows to hear Nobel Prize Laureate Dr. Craig Mello, on Monday, November 4, 2013, 9:00 AM – 11:00 AM.
Dr. Craig Mello is an American biologist and professor of molecular medicine at the University of Massachusetts Medical School and was awarded the 2006 Nobel Prize for the discovery of RNA interference.
Register here: https://elm.umaryland.edu/ai1ec_event/lecture-by-nobel-prize-laureate-dr-craig-mello/?instance_id=
Your UMB status is “student” if you are a graduate student, and “faculty” if you are a postdoc. Your “UMB Affiliation” is Graduate School. If you are attending, please let us know so that we can look for you in the lobby at 9:00 and we can sit together. Either send email to promisestaff@gmail.com with the subject “Mello Lecture” or you can post a comment at the bottom of this message.
More about Dr. Mello and the Nobel Prize: http://www.nobelprize.org/nobel_prizes/medicine/laureates/2006/mello-photo.html
More about Dr. Mello’s research:
http://www.hhmi.org/scientists/craig-c-mello
http://profiles.umassmed.edu/profiles/ProfileDetails.aspx?From=SE&Person=1009
