Archive for CSS
Have you ever wondered where interior designers go for inspiration and ideas? More than 70,000 of them rely on the Trade Only Design Library (TODL), a site that connects them with sellers of goods for residential and commercial interior design projects. For manufacturers, TODL is also a great resource, generating 4,000 targeted leads monthly.
To keep both buyers and sellers engaged and make the site easier to navigate, TODL recently redesigned the site using Adobe Dreamweaver CC. Executive Creative Director Scotty Smith appreciated how Live View and Code View in Dreamweaver CC saved him time and helped him improve the site’s code. The responsive website is now easily accessible by designers in the office on a desktop computer or at a job site using a tablet or a smartphone.
TODL benefitted from working with tools in Adobe Creative Cloud and looks forward to taking advantage of even more time-saving features and services. “Adobe Creative Cloud has already saved us time by enabling us to easily share files, send links to files that can be viewed using standard web browsers, and integrate a wealth of creative new features into our designs,” says Smith.
Read the full story: http://adobe.ly/1eC7rUU
The Dreamweaver team is conducting a customer feedback survey. The objective of this survey is to connect with you, our users, and figure out from as many of you as possible what’s working in Dreamweaver and what isn’t.
Your feedback is important to us. Participation in this survey is voluntary and your responses are completely anonymous.
The survey should take no more than a few minutes to complete. Once you have completed all survey questions, please remember to click the “Submit” button to send your response.
- To begin, click on the link below.
- After completing each page, the page will scroll down to the next question.
- Scroll up or down If you need to change an answer.
We know your time is valuable, and we appreciate your participation. Thank you very much for helping to improve Adobe Dreamweaver.
To take the survey, click below:
Product Marketing Manager
We’re thrilled to announce the #DreamweaverInAction series. Many of our customers have shared their great work and stories, so we decided to pass it along to the community.
The primary aim of this series is to show off our customers’ exciting work, inspire further creativity by sharing ideas and cultivate a discussion about the modern Dreamweaver. It will also help our featured customers get exposure through Adobe’s social channels and website.
We kicked off the series by showing off the creative work of AltaSartoria web design agency. Claudio Caciagli, lead designer and developer, has just launched this stunning responsive website http://altasartoria.com
We followed that up with an inspiring example by designer Jordan Flower, who used Dreamweaver and WordPress to create a business at Keys Apparel that supports victims of human trafficking.
Do you have a great story to tell? Tell it to millions of Adobe customers. Send us your website or work you’ve created with Dreamweaver CC and be part of the story. You can share your story by sending us a message on Facebook (https://www.facebook.com/AdobeDreamweaver) or tweet it with the (#DreamweaverInAction) hash tag.
When the first version of Dreamweaver launched, the web had only begun to emerge as a viable platform, and its capabilities were a fraction of what they are today. Since then, the web platform has changed dramatically, and continues to evolve at a rapid pace.
Designing for an evolving platform means that the tools one uses must also evolve. To best serve our customers, we are modernizing Dreamweaver to provide an all-in-one visual tooling environment for creating websites and mobile content. To do so we are streamlining the user interface, introducing new ways to tackle key areas of the web design process, and removing support for technologies that are not widely used by our customers.
Our first task has been to streamline the User Interface, which we have begun by consolidating several workflows (such as font management) and simplifying parts of the application (such as the Document Tool Bar and the Insert Panel). In addition, we have begun to identify and remove parts of the application that are redundant. We have already removed 10 panels, 14 dialog boxes, and 62 menu items. A simpler UI means fewer steps to accomplish your tasks, and fewer interruptions to your workflow.
The modernization efforts also include the introduction of the new CSS Designer panel in Dreamweaver CC. In future updates to Dreamweaver we will be overhauling the HTML & CSS preview / inspect / edit workflow, file and site management and collaboration in the app, responsive design tooling, performance, and more. Dreamweaver will also continue to receive regular updates that expose the evolving capabilities of the web and further integrate tools and services that improve productivity.
As we remove older features from Dreamweaver, we recognize that some customers may still depend on existing workflows/technologies. Therefore, in addition to making Dreamweaver CS6 available through Creative Cloud, we are also providing some alternatives. The table below covers some of the features we have removed, and the list of the extensions or workarounds that will enable affected customers to continue using Dreamweaver CC as part of their existing workflows.
|Removed feature / functionality||
|Server Behavior, Bindings and Components Panels and Database feature||There is a single extension to restore these features. Extension is available at:* Vista/Windows 7: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CC\Configuration\DisabledFeatures* Mac OS X: /Applications/Adobe Dreamweaver CC/Configuration/DisabledFeatures
|To install, follow instructions in the video
|ASP, ASPNET, JSP Support||There is a single extension to restore these features. Extension is available at:* Vista/Windows 7: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CC\Configuration\DisabledFeatures* Mac OS X: /Applications/Adobe Dreamweaver CC/Configuration/DisabledFeatures||These extensions are in MXP format. To convert them to the correct format, please follow the instructions in this video: http://youtu.be/8bzlrjHGsQcTo install, follow instructions in the video
|Spry||There is an extension to replace Spry datasets with jQuery datasets. It is available for free on Adobe Exchange. More info here:HTML5 Data BindingsBootstrap Extension||Replacement provided via deep integration with JQuery UI & JQuery effects. You can still download Spry from Adobe GitHub.|
|Widget browser||Widget Browser was the only way to manage Spry extensions across Adobe applications. For more information please visit the following link:
|ColdFusion Support||ColdFusion has a dedicated IDE (ColdFusion Builder) that serves the development needs of the ColdFusion developers & community. Download ColdFusion Builder 2.||Note: You can also open ColdFusion documents from within the files panel in Dreamweaver. Please click here for step-by-step instructions.|
While Adobe has tested the extensions listed above with Dreamweaver CC, we do not provide support for functionality provided through extensions.
In addition to the extensions we’ve provided, we are particularly excited about two new extensions for Dreamweaver developed by DMXzone. They provide modernized replacements for two Spry workflows featured in previous versions of Dreamweaver. More information is available at:
We have just begun the modernization process and invite you to voice your opinion. We are committed to taking action on customer feedback and remaining as transparent as possible about our future plans.
Product Marketing Manager
We are pleased to announce the release of a modernized and streamlined Dreamweaver. Dreamweaver CC is the all-in-one visual tool to efficiently and intuitively create, publish and manage websites and mobile content.
New in Dreamweaver CC:
Create immersive web experiences with the new CSS Designer and visually apply CSS properties such as gradients, box shadows, and more. Dreamweaver CC is committed to producing clean, web-standards code, enabling you to design without the need to hand-code.
Dreamweaver CC also includes enhancements to its responsive design framework, Fluid Grid Layouts. We’ve addressed key usability issues to improve the design workflow, and to help you visually construct and build responsive websites that render properly on multiple screen sizes and devices.
By removing deprecated features and technologies, we are clearing the way to provide optimized features that support the latest and most relevant web technologies and standards. Our aim is to provide the ultimate user experience – a collection of productive and modern visual development features in a single tooling environment.
We have just begun the modernization process and invite you to voice your opinion. We are committed to taking action on customer feedback and remaining as transparent as possible about our future plans. More details will follow on what the modernization effort entails in Dreamweaver CC, and we eagerly await your feedback.
Over the past 12 months, we have been expanded Dreamweaver’s integration with many Creative Cloud services and tools. One of the many benefits to being part of the Creative Cloud is that you can access the vast and ever-growing Adobe Edge Web Fonts library. Also, with web technologies evolving rapidly, Dreamweaver CC helps you keep up by implementing features and addressing issues quickly. Creative Cloud members will receive regular updates to Dreamweaver.
Another benefit of integration with Creative Cloud is Sync: Dreamweaver CC lets you sync both site settings and preferences, streamlining your creation workflow. Sync in seconds and start creating without the need to recreate or manually copy and paste files. With Dreamweaver CC & Creative Cloud, the creative world is at your fingertips.
We are pleased to announce that Dreamweaver CC will be available to our customers to download very soon. With many new features and enhancements, the new Dreamweaver CC is modernized, lighter, smoother and easier to use than ever. Dreamweaver CC is THE all-in-one visual tool for building and creating mobile and web content.
The new CSS Designer in Dreamweaver CC provides a visual interface to let you quickly and intuitively work with CSS properties such as gradients, box shadows; CSS Designer helps you get your work done quickly and efficiently.
In addition, Dreamweaver CC comes with a streamlined workspace; a modernized UI and smoother workflows help you work more efficiently and intuitively. We have been focusing all of our energy and resources on making sure Dreamweaver supports the latest and greatest web and mobile technologies such as HTML5 and HTML5 forms, jQuery mobile support, CSS3, SASS / Less and more.
Constructing and building responsive layouts can be challenging for web designers, and requires learning new skills, but Dreamweaver CC is here to help. By using the enhanced Fluid Grid Layout feature in Dreamweaver CC, users can visually design & lay out their websites to display nicely on different screen sizes for desktop and devices.
Dreamweaver CC brings typography to the party and gives you access to the vast and ever-growing Adobe Edge Web Fonts library. You can use any of Adobe Edge fonts in a few clicks.
Building native mobile apps for Android, iOS, Blackberry, and Windows Phones never been easier with the tight integration between Dreamweaver CC and PhoneGap Build. You can now publish and package your web content as native mobile apps in moments.
Dreamweaver CC, as part of Creative Cloud, boasts tight integration with many CC services and tools, and you can now easily sync your website settings and preferences from anywhere. Anything you need, whenever you need it, is at your fingertips with Adobe Creative Cloud. Watch our video to learn more about what’s new In Dreamweaver CC
Make sure you sign up for Adobe Creative Cloud. We look forward to seeing all the exciting work and experiences you will build with Dreamweaver CC. Buckle up and enjoy the ride on Adobe Creative Cloud.
A few months ago I updated the live chat tool for one of the websites I manage so that it would proactively pop up after a visitor had been on the site for a couple of minutes and had viewed several pages. The pop-up is pretty intrusive which concerned me from a user experience standpoint, but I thought I would try it out anyway.
Here’s how the chat popup looks — you can’t navigate the site without closing it:
We’ve now been running the proactive for four months, and the increase in the number of online chats it has generated is quite substantial:
|Month||Increase in # of chats|
A 200%+ increase in the number of chats was certainly more than I had expected. Not surprisingly, I was also concerned about the negative impact in might have on other visitors who might find it too intrusive and instead choose to leave the site.
Fortunately, we have not seen any spikes in exit rates that could be attributed to this, nor has our conversion rate gone down. In fact, over the last quarter the site has experienced its highest ever revenue, although this is likely to be due to other activities and campaigns we have underway.
Despite its intrusive nature, we’ll be sticking with the proactive chat popup. If you are running an online chat service on your website — especially if it is an ecommerce site — and do not have it set to proactively pop up, you might want to test whether you can drive more chats this way.
I enjoyed this well explained tutorial on how to code multi-column data tables responsively (demo) so that they display in a usable format on small screen devices. The solution? Assign ‘essential’ and ‘optional’ classes to the the data columns and hide the optional columns at smaller screen widths using CSS3 media queries. Very nicely done.
[via CSS Tricks]
I thought this order confirmation page from Potbelly Sandwich Shop was nicely done (click to view larger).
Too often, confirmation pages such as these are overlooked from a design standpoint, so it really stands out when someone takes them time to add some branding / personality to the page.
Of course, there are many other ways you can improve the usefulness of your site’s thank you page from a customer engagement perspective. When did you last look at the user experience when a customer interacts with your business online?
I enjoyed reading ReadWriteWeb’s top web products and top web developer tools of 2011, so I thought I’d put together my own list of top web tools of 2011, based on which ones I liked and used the most.
Here they are, in no particular order:
I use Basecamp every day as the project management tool for my web team. Many people I work with still use spreadsheets and emails to manage their work, and I just feel so organized compared to them. It has just the right amount of features for me, and has been easy for other team members to pick up and use. Given the amount of tasks we have to manage, including multiple websites and email campaigns, it would be impossible to keep everything on track without a solid, user friendly project management tool like this.
If you’re still coding forms by hand then you’re crazy. With JotForm I can create any kind of form I need — including branching logic, validation, tooltips, custom thank you pages — in minutes. Embedding the forms into a web page is easy thanks to the range of options, and maintaining them is simple as I can do it all from within Jotform without ever having to touch the code on the page.
I manage a team that looks after multiple social media accounts and HootSuite has been invaluable in enabling us to keep up with posting to all of them and managing interactions with others. The user interface is very intuitive, with all the functionality I need, such as easily posting to multiple social media networks and scheduling posts in advance.
Not a big surprise to see Google Analytics on this list. It’s a fantastic tool and I use it multiple times a day. New functionality is continually being added, such as the integration with Webmaster Tools, real-time reporting, and multi-channel funnels, which is turning into a real one-stop analytics shop. Plus, there is so much being written on how to use Google Analytics that I’m continually improving my reporting and analysis through the tool.
There are many online services for tracking keyword rankings and backlinks, but I’ve found that Digital Point’s keyword position tracker works fine for my needs. The free service is easy to use, can track a ton of keywords, and provides charts to show your rankings over time in Google, Yahoo!, and Bing. They also track backlinks to your site.
I often need to email design mockups to stakeholders (some people just love to live in their email), and so I use Convert Hub to do this. It’s quick and easy to use, and supports a wide range of image formats (although my need is mainly PNG to JPG). More recently, I’ve started using QwikVu to share mockups, but it’s too early to tell if it will become an essential tool for me.
I’m always taking screenshots and sharing them, and for this I use the Firefox add-on LightShot. It’s lightweight, quick and easy to use, and is perfect for snapping portions of a screen for copying into an email in order to share or send feedback.
I use LastPass for password management. I’ve found it to be a well designed password management tool that doesn’t get in the way as I’m logging in and out of websites. It’s pretty intelligent, so it knows when you make a change to some login information, and it manages multiple profiles well, so I can use it with my wife.
I don’t have much to say about Firebug, except for how I don’t know how I would do any web development without it. It’s also immensely useful for providing feedback — instead of trying to describe how I want something to look, I can just show them. This also saves cycles, as I can see what works and what doesn’t myself without going through numerous iterations with a developer.
I’ve tried out a number of wireframing tools in the past, but settled on MockFlow for my UI design needs. It is a very full-featured tool, while still remaining easy to use. They also have quite an active community creating wireframe templates, which you can use to jump-start your designs. For the longest time, my main complaint was the lack of a snap-to-grid function, but that has since been fixed and new features are being regularly added. A desktop version is available for no extra charge, but for some reason I still find myself using the web version instead.
Thanks to all of these tools for making my working life a lot easier than it would have been without them.
I use a number of other apps on a regular basis that I didn’t quite make my list. These include:
- iContact for email marketing (we send 500k to 1M emails a month through this service)
- Ta-da List for keeping tracking of sites I want to add to an Elements of Design showcase
- Fileswap for sharing large or multiple files with other people without emailing them
- Litmus for checking emails for compatibility with a range of email clients
- Notable for reviewing web designs
- SurveyMonkey for creating online surveys
These are my choices — I’d love to hear what web tools other people couldn’t do without.