Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I am preparing a website manual for my client. My website is responsive and working fine. However, in my manual I want to include screen shots.
Where do I get online tool that will render me a snapshot containing at least 3 devices showing website responsiveness? I am talking of something like this:
As per your question requirement, your best matching solution is here
you can view my example. This what i created for my website
It's included in the developer tools of Chrome (Ctrl+shift+J => little "phone" on the top left or Ctrl+shift+M in the developer tools).
All three devices have a means to capture screenshots. You would capture the screenshots on the devices and send them to a computer where you could use any basic picture editing program like Paint or GIMP to overlay them on each other.
If you want the devices themselves to be visible as in the picture, you'd take the pictures with a digital camera and use Paint or GIMP etc.
You can generate screenshots on different screen sizes using a cross-browser testing tool. The one that would serve your need the best is https://www.browserstack.com/responsive
However, it won't create them in the layout example you provided. You'd need to do that manually in Photoshop or whichever design software you prefer.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I want to create a website but i don't know html and CSS . I have submitted my website layout to the teachers but i don't no how i will create that website look like layout.. so what can i do ? Is their any software like blue griffon etc (blue griffon is not good i didn't understand)
This is my small project to do but i don't no how can i do my classmates is doing this Good because they know html and css
From looking at your template, I assume that you are using Microsoft Word? There are methods which allows you to convert Word documents to HTML online. While they may not reproduce the standards of what a HTML and CSS webpage would be written from scratch, it will allow you to view the document in your browser, and edit in a text editor.
If you need to use a site builder, there are websites freely available such as Squarespace and Webflow (Which is a bit more advanced). And there is also the option of you learning HTML and CSS yourself. There are many websites, YouTube videos and books to help you get started.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Is there any kind of decent program for html/css that lets you build a website visually? I'm thinking something more along the lines of adobe illustrator or google docs, that lets you put content onto a page and drag things to where you need them to be, but spits out html code when you're done. Something like google web designer but more flushed out and functional, as it's still in beta and has a long way to go. Also, what are these kinds of programs called? (originally thought they where WYSIWYGs )
Try wordpress, easiest way to achieve what you've said, then you can drag and drop and design the website like you said. WYSIWYG changes textarea to a text editor, Tinymce is one of them, not what you want. What you want is called Content Management System(CMS), wordpress is one of them, you can see a list of CMSs in the article.
A far more economical drag-and-drop HTML builder tool is Bootstrap Studio.
This is naturally linked to the Bootstrap library and jQuery. But you can just use it to get a flavour of what you want to design.
Then write your own html/css/js code for the final site.
In fact you can use Bootstrap Studio to build a non-Bootstrap site and make use of its features like designing for different device screen widths.
$29 for a year's use, $60 for perpetual use.
https://html-online.com/editor/ free and easy: copy your html inside, edit, copy back to studio.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Some time back I used Android studio's UI designer. I liked it a lot since it allows drag and drop of components like buttons/inputs/widget. More importantly,
we can edit the properties of existing UI component like ID/Size/Visibility using its UI pane(see right of the image). This reduces the changes of errors because we dont need to edit it directly into XML file. Also its quite fast.
I am now working now on an web application and need to design HTML page. Could you suggest any software which provides any of the two feature mentioned above for HTML.
Thanks
Online
Mobirise
Bootstrap Studio
Square Space
Wix
Idk about desktop apps, But since adobe is always perfect, I think DreamWeaver will surely support that.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
Web page is getting fancier each day, while the basis of structure is all the same.
That is css box model.
So I wonder if there is any kind of tool to analyze a page with css box. That is:
1. input a page (url);
2. output the box structure of the page (png);
For example, the output could be something like:
With this, we can do a better review or rework on this web page. Right?
I will appreciate it if you could tell me something you know about this.
Firefox browser provides a 3D tool for detailed checking of web page. It is a very interesting tool. You can check it like this.
Open the web-page in firefox and right click anywhere on the page. Select the inspect element(Q) from the menu. It will bring a new window at the bottom of page similar to firebug window. You can find the 3d view button on the right side. Click it and drag your webpage, then it will rotate as you like.
Here is the sample screenshot for apple.com website
http://i.stack.imgur.com/2TuG6.jpg
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
Imagine a web-designer built several mock-up html pages. Now it is time to start development according to these mock-ups.
First of all I would like to know that all mock-ups are there, i.e. every link has corresponded mock-up page. I can't just click hyperlinks, because they are empty ('#' url).
And secondly, I would like to have kind of map, where developer can look at and figure out transitions from the page and hence fill it with appropriate urls.
Does any body know any tools that can help to make such documents which reflect my needs stated above?
Thanks in advance
MS Visio for Windows or OmniGraffle for OSX can help you build a scenario project where you can design an interactive diagram where each box represents a page. When you click a box it shows the page mockup associated with this box. You can also draw lines between each box that represents links to other pages from this page.
balsamiq a flex app
Axure windows desktop app
Expression blend 3 from Microsoft has Sketchflow.