This week we’re taking a bit of breather on showing new features, instead we take a look at how you might build up a webpage from scratch.
This video is probably just for the hard-core Element fans that want to know more about how everything works as it’s a long one at around 45 minutes, so maybe grab a cup of tea and set the playback speed to at least 1.5x
As always your feedback is invaluable to us, so let us know what you think of today’s video in the comments below.
Hi Dan, in the end you turned one of the small icons with text into a global. That means if you change the text in one it will also change in the others. So if you want to change the text in one you have to break the link?
Very enjoyable to watch the vid.
Thank you for demoing building a simple site in Elements.
Unfortunately I’m finding the process unintuitive and a little tedious as there are some things you can drop into the edit view (elements), others that are better placed in the structure view (sub-elements), and others that need to be dragged into the property inspector (images, videos, etc). I’d love to be able to drag and drop resources into the edit view and have Elements create the required element, and place it where I’ve dropped it, without then having to go and fiddle with the outline or the properties panels. Also, being able to drag element ‘handles’ to resize, adjust padding and margins, etc would really help to keep the focus in the visual editor.
The properties panel has also become a bit unwieldily as it appears very difficult to find anything (lots of scrolling, low information density - the padding and margin widgets in particular) and there doesn’t seem to be a huge amount of consistency with regards to how properties are listed as you demonstrated, as it’s very easy to set the property for a mobile version of an element while intending to change the desktop version.
Then there’s the properties that you need to change via the theme inspector which just adds yet another layer of complexity forcing users to remember where they need to set (or override) which property.
I’m not sure what the answer is, but I suspect the sooner you get Elements in to users’ hands and receive actual user feedback you’ll be in a better position to asses how to proceed.
This is in no way meant to criticize the fantastic work you’ve already done in Elements (there’s LOTS to like), more that I’d hate to see it quickly dismissed by potential users due to a currently awkward UX. I know Elements is a v1 pre-beta, but there’s some not insignificant UX issues that are already visible within the workflow demonstrated.
I have to agree with this as an overall statement.
Agreed.
Agreed also.
I have made comments about the elements lists as well.
It seems to be missing an actual flow. Just a bit too many “powerful” techniques rather than settling on one or two. Perhaps the app needs to decide what is the best way to work and then stick with that method all the way.
EDIT: Let me add. Perhaps if the interface could be broken into logical sections. For example, the editing column on the left—perhaps make one accordion for structure, one for typography and one for design. Then open and close each as needed. Think more like a graphics program. If those three accordions become too long, add a logical forth, like images.
I don’t know what it is called, but the section that was demoed way back at the beginning acts as the core or master styles page. To me, that is one of the most powerful parts of Elements. It has the potential to keep the number of classes low and consistent when used properly.
Then, there are the class overrides. I see this as the right sidebar editor. This needs the organization I mentioned earlier, a logical Accordion UI. However, this is the very part of the app that can create bloat in the classes. The more that is edited here, the more the code swells.
There needs to be a clear understanding of when to edit the Core and when to edit the Overrides. I see it as anything that is global should be edited in the Core editor, and anything that is element-specific for that page should be edited in the Override editor.
Perhaps some names for each of the icons would be useful? I love icons, I really do, however in the beginning an icon can have so many interpretations that an inexperienced user can easily get lost.
Regarding the drag and drop of elements onto the page, yes, in my mind, to make the app a fully functional interface, there ideally would be better controls for editing the layers within the canvas rather than going back to the left side–inspectors.
It was very hard to watch this demo. The designer constantly got lost in the interface. It appears that at times there were a number of dependencies (multiple steps required) to accomplish what seemed like a simple task. This could be because the designer got lost in the interface and clicked something by mistake; it was hard to tell what was happening at times. I simply agree it needs a bit of polish.
There is so much to love about what the Rapidweaver Team has accomplished so far. Please take this as constructive feedback. It’s going to be so much fun!
Hats of to @dan for demoing something on the fly with just an Image of a site to work from. That said I enjoy seeing him work this way as this is how I work. fiddle with this fiddle with that until it looks good and it shows there are different ways to get the same effect or better. The good thing I see is its wysiwyg so not as much flipping back to preview all the time. I dont always have two screens with my laptop so it’s nice to see this.
Kind of how I work as well, prefer as many controls as possible, full tool set.
I think as an example I would like to see a button to collapse all control areas on the right side with a simple click to tidy up, you can see from screen shot a few have been collapsed, as long as these are logical in their order/headings no probs. The left side is collapsable, would like the hover to pop up the item, like when you hover over Safari page tabs, see what element, especially when there are tens and tens of them
The site used as an example was super basic…but I understand for the demonstration purpose of the video. I’m really curious how Elements will fare for the types of sites I build. Very interested to see how it will handle
CMS pages
e-commerce
how flexible and customizable the nav bars are
animations to increase the user experience - scroll parallax, mouse position parallax, scrolling effects, etc.
So far the interface is both familiar and refreshed. Good work!
I could be totally wrong, a common event, but isn’t a basic (?) knowledge of CSS important to understanding what you are building in Elements?
And that makes me wonder if there is a way to have a separate window open that shows the developing CSS & HTML as you happily use a WSYWIG interface? That would be a very helpful & educational tool.
I merely suggested as it might help those unfamiliar with CSS and HTML to see what the cascade is all about, which is (Is it Dan?) the backbone of what Elements creates without us getting our fingers all dirty. And my initial response was to somebody who was finding it hard to follow where everything ‘went’. But maybe I misinterpreted that.
Agree it would be useful, I know you can click and see the code, demonstrated previously, I had suggested that. I have another web building app that shows the code all the time. Not essential if you can click and see the code.
Would need to be in a separate window.
Also sounding like a broken record, the editing window needs to pop out of Elements. Working with two screens editing and seeing the code being written would be extremely powerful and unique, see both or one on the other screen
